Html 沙盒、IFrame 和允许同源

Sandboxing, IFrame, and allow-same-origin

提问by Thomas

I have been reading about the HTML5 additions to the <iframe>tag. One of the additions is the inclusion of sandboxing flags that allow the document loaded into the iframeto interact with its parent browser context.

我一直在阅读有关 HTML5 添加到<iframe>标签的内容。新增功能之一是包含沙盒标志，允许加载到 中的文档iframe与其父浏览器上下文进行交互。

After reading some of the documentation, I am looking for a bit of clarity. I have read MDN'sdescription of the allow-same-originflag:

在阅读了一些文档后，我正在寻找一些清晰度。我已经阅读了MDN对allow-same-origin标志的描述：

Allows the content to be treated as being from its normal origin. If this keyword is not used, the embedded content is treated as being from a unique origin.

允许将内容视为来自其正常来源。如果未使用此关键字，则嵌入的内容将被视为来自唯一来源。

Not hugely, helpful, I think, after having read W3C'sspecification:

在阅读了W3C 的规范后，我认为不是很大，很有帮助：

...[I]t can be used to embed content from a third-party site, sandboxed to prevent that site from opening pop-up windows, etc, without preventing the embedded page from communicating back to its originating site, using the database APIs to store data, etc.

...[I]t 可用于嵌入来自第三方站点的内容，沙箱化以防止该站点打开弹出窗口等，而不会阻止嵌入的页面使用数据库与原始站点通信用于存储数据等的 API。

My question is specifically about what MDN refers to as the "normal origin" in light of W3C's specification: when refering to the "normal origin" is MDN stating that the content of document contained within the <iframe>tag is treated as if it shares the origin of the page from which the document originates, e.g. a YouTube video believes - and can communicate as if - it is still apart of YouTube? Or, does the <iframe>document have access to the parent browser context?

根据 W3C 的规范，我的问题特别是关于 MDN 将什么称为“正常来源”：当提到“正常来源”时，MDN 表示<iframe>标签中包含的文档内容被视为共享来源文档来源的页面，例如 YouTube 视频相信 - 并且可以像交流一样 - 它仍然是 YouTube 的一部分？或者，<iframe>文档是否可以访问父浏览器上下文？

采纳答案by LFC

You can't access the document between an iFrame and the Parent window (from different domains). To communicate between frames in you'd need to use postMessage.

您无法访问 iFrame 和父窗口（来自不同域）之间的文档。要在帧之间进行通信，您需要使用postMessage。

Using the allow-same-origin allows you to use, for example, cookies that are in the iFrame.

例如，使用allow-same-origin 允许您使用iFrame 中的cookie。

Here's a good reading to understand better iFrames' sandbox: http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/

这是一个很好的阅读，可以更好地理解 iFrames 的沙箱：http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/

回答by LFC

I was still a bit confused after reading LFC's answer, but the link they provided had a good explanation. Here's a summary:

阅读 LFC 的回答后，我仍然有点困惑，但他们提供的链接有一个很好的解释。这是一个总结：

Let's say we want to add a tweet button to our website. We could just do this:

假设我们想在我们的网站上添加一个推文按钮。我们可以这样做：

<iframe src="https://platform.twitter.com/widgets/tweet_button.html"></iframe>

But we're probably giving twitter more permissions than they need. So we want to sandbox them. Twitter apparently needs to know whether the user is logged in (maybe so they can show your avatar next to the tweet button, for example), so the iframe needs to be able to access twitter.comcookies and other data associated with twitter.com(local storage, etc.). So by setting allow-same-origin, we give the iframe permission to use the data from twitter.com.

但我们可能给 Twitter 的权限超出了他们的需要。所以我们想对它们进行沙盒处理。Twitter 显然需要知道用户是否已登录（例如，这样他们可以在推文按钮旁边显示您的头像），因此 iframe 需要能够访问twitter.com与twitter.com（本地存储等）相关的 cookie 和其他数据。 ）。因此，通过设置allow-same-origin，我们授予 iframe 使用来自twitter.com.

Twitter may also need to make requests to twitter.comresources, and these would be treated as cross-origin requests if you didn't set allow-same-origin, so those requests would probably be blocked by the browser - unless the resources had headers which allowed cross origin requests.

Twitter 可能还需要向twitter.com资源发出请求，如果您没有设置allow-same-origin，这些将被视为跨源请求，因此这些请求可能会被浏览器阻止 - 除非资源具有允许跨源请求的标头。