IFRAME沙盒属性正在阻止AJAX调用

我有一个应用程序（

http://localhost/MyApp

），其中一些部分通过iFrame渲染。这些iframed部分与应用程序DOM的其余部分没有任何关系，因此我应用了

sandbox

属性

IFRAME声明如下：

<iframe src="/MyApp/en/html/action?id=1" sandbox="allow-forms allow-scripts" seamless="seamless"></iframe>

如果我将

allow same origin

添加到

sandbox

属性中，它就可以工作了

为什么会这样？是否将路径

/MyApp/en/html/action

视为整个IFRAME的来源，并将请求阻止到以前的级别

---

干杯。

它影响Ajax的原因是Ajax受规则控制，当您对其进行沙箱处理时，实际上是在告诉浏览器将iframe内容视为来自不同的来源。引述同样的话：

• 唯一来源处理。所有内容都在唯一来源下处理。内容无法遍历DOM或读取cookie信息

这意味着，即使来自同一域的内容也将使用跨域策略处理，因为每个IFRAME内容都将被视为唯一的来源

嵌入式内容仅允许显示信息。在IFRAME内不能执行任何其他可能危害托管网站或利用用户信任的操作

换句话说，如果在

沙盒

属性中省略

允许相同来源

，它会将沙盒页面视为属于不同的域（事实上，它将视为具有

null

来源）。由于将Ajax请求设置为

null

没有意义，沙盒页面根本无法进行Ajax调用（如果允许将它们设置为

localhost

，则它们将无法与父页面的调用区分开来，从而无法实现沙盒的目的）

附加信息 如果尝试对其他域进行Ajax调用，显然会失败：

<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
    console.log(location.host);
    $.post('https://google.com/',{},function() { });
</script>

…如果您在不使用

的情况下嵌入它，则允许使用相同的源代码

：

localhost
XMLHttpRequest cannot load https://google.com/. Cannot make any requests from null.

请注意，虽然两者都将

location.host

报告为

localhost

，但其中一个认为原点是

http://localhost

，而另一个认为它是

null

（显示您在示例中遇到的相同错误消息）

推理 为什么阻止来自同一域的沙盒内容的Ajax调用如此重要？如文章所述：

在某种意义上，相同域上的内容应该是安全的。这里的风险主要来自于在IFRAME中重新托管的用户生成的内容

让我们举个例子：假设Facebook决定允许用户在他们的页面上发布HTML5动画。它将它们存储在自己的服务器中，并且在显示时，沙盒将它们作为

仅允许脚本

（因为动画工作需要脚本），但其他所有内容都被拒绝（特别是

允许同源

，因为您不希望用户代码弄乱父页面）。如果默认情况下Ajax调用没有被阻止，会发生什么

Mallory创建的“动画”包括：

使用Facebook的API（比如，）执行对Facebook的Ajax调用；服务器将愉快地接受调用，因为据它所知，请求来自

https://facebook.com

作为原点

创建一个指向她自己的服务器的URI，返回的数据作为查询字符串，并将其设置为沙盒页面中图片的

src

当Alice访问Mallory profile并看到动画时，上面的脚本将运行：

当Alice登录时，Ajax调用在Alice的浏览器中运行；由于服务器不知道呼叫来自何处（主页或嵌入页面），它将执行任何要求执行的操作，包括检索个人信息

当使用Mallory的URI创建

img

元素时，浏览器将尝试正常加载“图像”，因为图像不受同源策略的约束

由于URI在查询字符串中包含Alice的私有信息，Mallory的服务器可以保存它并返回它想要的任何图像。现在马洛里掌握了爱丽丝的个人信息，爱丽丝对此毫无怀疑

---

那么您的意思是，因为父帧使用主机A，即使子帧也使用主机A作为原点，它也将无法对其自己的原点执行AJAX，因为父帧正在使用它？这听起来像是一个古怪的实现，浏览器应该知道每个iframe执行哪些调用。浏览器知道，但服务器呢？如果服务器没有显式地向沙盒页面授予相同的源站权限，那么您如何知道它希望接收来自它的Ajax调用？如果您的服务器是，并且

iframe

中运行的代码来自不受信任的第三方，该怎么办？它们运行的域将是相同的，但这并不意味着第三方代码应该能够对服务器进行Ajax调用（可能泄漏敏感信息）。这是正确的设计，安全性方面。服务器不应该关心请求来自何处。实际上，阻止请求的是浏览器而不是服务器。对不起，我觉得这个问题有点奇怪。请检查我的最新答案。沙箱的全部意义在于否认所有不被明确允许的事情。因为浏览器不知道服务器关心什么和不关心什么，所以从安全的角度来看，它应该会出错，并假设Ajax调用（以及其他同源特权）不正常。如果你想从沙盒内容中接受Ajax，但又不想让它破坏父页面，恐怕你需要另一种策略，比如or。我想指出，向沙盒属性添加allow same origin标记实际上是没有用的

localhost
XMLHttpRequest cannot load https://google.com/. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

localhost
XMLHttpRequest cannot load https://google.com/. Cannot make any requests from null.