小编典典

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

ajax

我有一个应用程序(http://localhost/MyApp),其中某些部分是通过IFRAMES呈现的。这些iframed部分与应用程序的其余DOM无关,因此我应用了该sandbox属性。

IFRAME的声明如下:

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

iframed页面上有一个按钮,该按钮可以对同一Web应用程序进行AJAX调用,但是HTTP GET浏览器会发出一个HTTP OPTIONS显示为Cancelled的错误消息,而不是a ,并且发生错误:

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- originsandbox属性中添加,就可以了。据我在此处阅读的内容,它不应该影响AJAX调用。

为什么会这样呢?是否将路径/MyApp/en/html/action视为整个IFRAME的来源并将请求阻止到以前的级别?

干杯。


阅读 347

收藏
2020-07-26

共1个答案

小编典典

它影响Ajax的原因是因为Ajax受相同来源策略规则的约束,当您对其进行沙箱处理时,实际上是在告诉浏览器将iframe内容视为来自其他来源。引用同一篇文章

  • 独特的起源治疗。 所有内容均根据唯一来源处理。内容无法遍历DOM或读取cookie信息。

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

嵌入的内容仅允许显示信息。IFRAME 中无法执行其他任何可能破坏托管网站或利用用户信任的操作。

换句话说,如果您allow-same- originsandbox属性中省略,它将把沙盒页面视为属于另一个域(实际上,它将被视为具有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>

但是,它将 如何 失败将取决于所使用的沙盒属性。如果您将上面的页面嵌入iframe其中allow-same-origin,它将打印到控制台:

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.hostlocalhost,但其中一个认为原点是,http://localhost而另一个认为原点是null(显示您在示例中遇到的相同错误消息)。

推理

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

在同一个域中的内容 应该 是安全的,这是有道理的。这里的风险主要来自于用户生成的内容,该内容重新托管在 IFRAME中

让我们举一个例子:假设Facebook决定允许用户在其页面中发布一些HTML5动画。它将它们存储在自己的服务器中,并且在显示时将它们allow- scripts仅作为沙箱存储(因为动画需要使用脚本),但是将其他所有内容都拒绝(尤其是allow-same- origin因为您不希望用户代码弄乱父页面) )。如果默认情况下也未阻止Ajax调用,将会发生什么情况?

Mallory创建的“动画”包括:

  1. 使用其API对Facebook执行Ajax调用(例如Open Graph);服务器将很乐意接受该呼叫,因为对于服务器而言,它知道请求均来自具有https://facebook.com原始来源的页面。

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

当爱丽丝访问Mallory个人资料并查看动画时,上面的脚本运行:

  1. 登录Alice后,Ajax调用将在Alice的浏览器中运行;由于服务器不知道呼叫来自何处(主页或嵌入式页面),因此它将执行请求的所有操作-包括检索个人信息。

  2. img使用Mallory的URI创建该元素时,浏览器将尝试正常加载“图像”,因为图像不受相同来源政策的约束。

  3. 由于URI在查询字符串中包含Alice的私人信息,因此Mallory的服务器可以保存它并返回所需的任何图像。现在,马洛里有了爱丽丝的个人信息,爱丽丝丝毫不怀疑。

2020-07-26