沙盒、IFrame 和允许同源

Posted 2023-03-05

【中文标题】沙盒、IFrame 和允许同源

【英文标题】：Sandboxing, IFrame, and allow-same-origin

【发布时间】：2015-09-19 23:29:43

【问题描述】：

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

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

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

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

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

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

【参考方案1】：

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

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

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

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

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

【参考方案2】：

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

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

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