IFRAME沙盒属性阻止AJAX调用
我有一个应用程序(http:// localhost / MyApp),其中一些部分通过IFRAMES呈现.这些iframed零件与应用程序的其余DOM没有任何业务,所以我应用了沙盒属性.
IFRAME声明如下: <iframe src="/MyApp/en/html/action?id=1" sandbox="allow-forms allow-scripts" seamless="seamless"></iframe> iframed页面有一个按钮,它将AJAX调用到同一个Web应用程序,但是不是HTTP GET,浏览器会发出一个显示为已取消的HTTP选项,并发生错误: XMLHttpRequest cannot load http://localhost/MyApp/en/data/action?id=1. Cannot make any requests from null. Ajax State 0 Error: HTTP 0 如果我将allow-same-origin添加到沙盒属性中,它可以工作.至于I read here,它不应该影响AJAX调用. 为什么会发生这种情况?考虑将路径/ MyApp / en / html / action作为整个IFRAME的起源,并将请求阻止到以前的级别? 干杯. 解决方法
它影响Ajax的原因是因为Ajax受
Same Origin Policy规则的约束,并且当您打沙箱时,您有效地告诉浏览器将iframe内容视为来自不同的来源.引用同样的
article:
换句话说,如果您在沙盒属性中省略了allow-same-origin,那么它将沙盒页面视为属于不同的域(实际上,它将被视为具有原始空白).由于将Ajax请求置空是没有意义的,所以沙盒页面根本无法进行Ajax调用(如果允许他们对本地主机进行访问,那么它们将与父页面的调用无法区分,从而达到沙盒的目的). 附加信息 如果您尝试将Ajax调用到其他域,则显然将失败: <script src="http://code.jquery.com/jquery.min.js"></script> <script> console.log(location.host); $.post('https://google.com/',{},function() { }); </script> 但是,它将如何失败将取决于所使用的沙箱属性.如果您将页面上面嵌入到具有allow-same-origin的iframe中,则会将其打印到控制台: localhost XMLHttpRequest cannot load https://google.com/. Origin http://localhost is not allowed by Access-Control-Allow-Origin. …如果你嵌入没有allow-same-origin: localhost XMLHttpRequest cannot load https://google.com/. Cannot make any requests from null. 请注意,虽然两者都将location.host报告为localhost,但有一个认为源为http:// localhost,而另一个则将其视为null(显示与您在示例中遇到的错误信息相同). 推理 为什么从同一个域中的沙盒内容中阻止Ajax调用非常重要?正如文中所解释的:
举一个例子:假设Facebook决定允许用户在他们的网页上发布一些HTML5动画.它将它们存储在自己的服务器中,并且在显示时,将它们仅作为允许脚本将其沙箱(因为需要脚本才能使动画生效),而是将所有内容都拒绝(特别是允许相同来源,因为您不想要用户代码搞乱了父页面).如果Ajax调用也不会被默认阻止会发生什么? 马洛里创建一个“动画”,其中包括: >使用其API(例如Open Graph)对Facebook执行Ajax调用;服务器将很乐意接受该呼叫,因为所有这一切都知道请求是从一个以https://facebook.com为起点的页面. 当Alice访问Mallory配置文件并看到动画时,上面的脚本运行: > Ajax调用运行在Alice的浏览器中,Alice登录;由于服务器不知道呼叫来自哪里(主页或嵌入页面),它将会执行所要求的任何操作 – 包括检索个人信息.>当使用Mallory的URI创建img元素时,浏览器会尝试正常加载“图像”,因为图像不受同源策略的限制.>由于URI在查询字符串中具有Alice的私有信息,Mallory的服务器可以保存它并返回所需的任何图像.现在马洛里有爱丽丝的个人信息,爱丽丝什么都不怀疑. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- html – css中的字符串连接
- 浏览器兼容性--IE11以及Edge等下载文件的中文名出现乱码,前
- 对ggplot geom_text使用wordlayout结果
- Formik官方应用案例解析(二)表单校验
- jQuery children() find()和contents()方法
- domain-name-system – 间歇性Kerberos失败:GSSAPI身份验证
- 微信小程序之开发环境的搭建 (图文)
- html – FireFox中的`contenteditable = true`身高问题
- 调整自定义表单(带阴影效果)和控制鼠标拖动事件在c sharp?
- 每次从服务器加载index.html,而不是缓存