IFRAME沙箱属性阻止AJAX调用 [英] IFRAME sandbox attribute is blocking AJAX calls

问题描述

我有一个应用程序（的http：//本地主机/ MyApp的），其中的一些部件都通过IFRAMES呈现。这些iframed部分没有业务与应用程序的DOM的休息，所以我申请了沙箱属性。

I have an application (http://localhost/MyApp), where some of the parts are rendered through IFRAMES. These iframed parts has no business with the rest of the application's DOM, so I applied the sandbox attribute.

在IFRAME是这样的声明：

The IFRAME is declared like this:

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

该iframed页有一个按钮，使一个AJAX调用相同的Web应用程序，但随后而不是 HTTP GET 时，浏览器会发出 HTTP选项取消显示为，并在发生错误的：

The iframed page has a button that makes a AJAX call to the same web application, but then rather than a HTTP GET, the browser issues a HTTP OPTIONS that appears as Cancelled, and an error happens:

XMLHttpRequest cannot load http://localhost/MyApp/en/data/action?id=1. Cannot make any requests from null.
Ajax State 0 Error: HTTP 0 

如果我添加了允许-同源到沙箱属性，它works.As据< A HREF =htt​​p://msdn.microsoft.com/en-us/hh563496.aspx>我在这里看，这不应该影响AJAX调用。

If I add the allow-same-origin to the sandbox attribute, it works.As far as I read here, it was not supposed to affect AJAX calls.

这是怎么回事？正在考虑的路径 / MyApp的/ EN / HTML /动作作为整个IFRAME的起源和阻塞请求previous水平？

Why is this happening? Is considering the path /MyApp/en/html/action as origin of the whole IFRAME and blocking the request to previous levels?

干杯。

推荐答案

它影响阿贾克斯的原因是因为阿贾克斯是由同一管辖原产地政策规则，当你沙盘它你相当于告诉浏览器来治疗 IFRAME 的内容，就好像它是从不同的起源。报价相同文章：

The reason it affects Ajax is because Ajax is governed by the Same Origin Policy rules, and when you sandbox it you're effectively telling the browser to treat the iframe contents as if it were from a different origin. Quoting the same article:

  
• 唯一产地处理。所有的内容是根据独特的血统处理。内容不能够遍历DOM或读取cookie信息。
  

• Unique origin treatment. All content is treated under a unique origin. The content is not able to traverse the DOM or read cookie information.

这意味着，即使内容来自同一个域即将与跨域策略对待，因为每个的 IFRAME 的内容将被视为一个独特的起源。

This means that even content coming from the same domain is treated with the cross-domain policy, as each IFRAME content will be viewed as a unique origin.

嵌入的内容只允许显示信息。没有其他动作里面可以完成的 IFRAME 的可能危及托管网站或利用用户的信赖。

Embedded content is only permitted to display information. No other actions can be done inside the IFRAME that could compromise the hosting website or take advantage of the users’ trust.

在换句话说，如果你省略了沙箱属性允许-同源，这将把沙盒页属于不同的域（事实上，它会将为具有空原点）。因为它没有任何意义，使Ajax请求到空，沙箱页面无法让阿贾克斯在所有调用（如果使他们能够本地主机被允许，他们会从父页调用没有区别，击败沙箱的目的）。

In other words, if you omit the allow-same-origin in the sandbox attribute, it will treat the sandboxed page as belonging to a different domain (in fact, it will treat as having a null origin). Since it doesn't make sense to make Ajax requests to null, sandboxed pages can not make Ajax calls at all (if making them to localhost were allowed they would be indistinguishable from the calls from the parent page, defeating the purpose of sandboxing).

如果你试图让Ajax调用不同的域，它显然会失败：

If you try to make an Ajax call to a different domain, it will obviously fail:

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

然而，如何将失败将取决于所用的沙箱属性。如果嵌入页面上方的 IFRAME 与允许-同源将结果输出到控制台：

However, how it will fail will depend on the sandbox attribute used. If you embed the page above in an iframe with allow-same-origin it will print this to the console:

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.

请注意，尽管这两个报告 location.host 为本地主机，一是认为起源是的http：//本地主机而其他认为它是空（显示你在你的例子经历了同样的错误消息）

Note that, while both reported location.host as localhost, one considered the origin to be http://localhost while the other considered it to be null (showing the same error message you experienced in your example).

为什么这么重要的是要阻止阿贾克斯从沙盒内容来自同一个域调用？正如在文章中解释：

Why is it so important to block Ajax calls from sandboxed contents from the same domain? As explained in the article:

这是有道理的，在同一个域的内容的应的是安全的。风险主要在这里源于已重新驻留在用户生成内容的 IFRAME 的。

It kind of makes sense that content on the same domain should be safe. The risk here primarily stems from user-generated content that is re-hosted in the IFRAME.

让我们做了一个例子：假设Facebook的决定允许用户张贴的小HTML5动画在他们的网页。这将它们存储在自己的服务器，并且显示的时候，沙箱它们作为允许-脚本只（因为需要脚本动画工作），但保留一切拒绝（以特别是允许-同源，因为你不希望用户code搞乱与父页）。会发生什么，如果Ajax调用是不是也默认情况下阻止？

Let's make up an example: suppose Facebook decides to allow users post little HTML5 animations in their pages. It stores them in its own servers and, when displaying, sandboxes them as allow-scripts only (because scripts are needed for the animations to work) but leave everything else denied (in particular allow-same-origin, since you don't want user code messing up with the parent page). What would happen if Ajax calls weren't also blocked by default?

马洛里创建一个动画，它由：

Mallory creates an "animation" that consists of:

1. 执行Ajax调用给Facebook使用其API（比如，开放图谱）;服务器将愉快地接受呼叫，因为所有它知道该请求来自一个页面 https://facebook.com 为原点。

1. Performing an Ajax call to Facebook, using its API (say, Open Graph); the server will happily accept the call, since for all it knows the request came from a page with https://facebook.com as origin.

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

Create a URI pointing to her own server, with the returned data as query strings, and set it as the src of a picture in the sandboxed page.

在爱丽丝访问马洛里的资料，并看到动画，上面运行的脚本：

When Alice visits Mallory profile, and sees the animation, the script above runs:

1. Ajax调用运行在Alice的浏览器，而爱丽丝登录;因为服务器不知道在哪里调用来自（主页或嵌入网页），它会做什么它的要求 - 包括获取个人信息

1. The Ajax call runs in Alice's browser, while Alice is logged on; since the server does not know where the call comes from (main page or embedded page) it will do whatever it's asked to - including retrieving personal info.

在 IMG 元素与马洛里的URI创建，浏览器将尝试加载的形象通常情况下，因为图像是免除同源策略

When the img element is created with Mallory's URI, the browser will attempt to load the "image" normally, since images are exempt from the Same Origin Policy.

由于URI有爱丽丝的查询字符串的私人信息，马洛里的服务器可以只保存并返回任何图像就是了。现在，马洛里拥有爱丽丝的个人信息，爱丽丝有任何怀疑。

Since the URI has Alice's private info in the query string, Mallory's server can just save it and return whatever image it wants. Now Mallory has Alice's personal info, and Alice suspects nothing.

这篇关于IFRAME沙箱属性阻止AJAX调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！