沙盒,IFrame和允许同源

Question

我一直在阅读有关<iframe>标签的HTML5添加内容.其中一个补充是包含沙盒标志,允许加载到其中的文档iframe与其父浏览器上下文进行交互.

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

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

在阅读W3C的规范后,我认为并不是很有帮助,有帮助:

... [我可以用来嵌入来自第三方网站的内容,沙盒以防止该网站打开弹出窗口等,而不会阻止嵌入式页面与其原始网站通信,使用数据库用于存储数据等的API

根据W3C的规范,我的问题具体是关于MDN所指的"正常起源":当提到"正常起源"时,MDN声明<iframe>标签中包含的文件内容被视为共享来源.文档来源的页面,例如YouTube视频相信 - 并且可以进行通信 - 它仍然是YouTube的一部分？或者,<iframe>文档是否可以访问父浏览器上下文？

Answer 1

您无法在iFrame和父窗口(来自不同域)之间访问该文档.要在帧之间进行通信,您需要使用postMessage.

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

这是了解更好的iFrames沙箱的好方法:http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/

Answer 2

阅读LFC的答案后，我仍然有些困惑，但是他们提供的链接给出了很好的解释。总结如下：

假设我们要在网站上添加推特按钮。我们可以这样做：

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

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

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