以“安全”的方式嵌入其他网站

【问题标题】：Embed other site in “safe” way以“安全”的方式嵌入其他网站
【发布时间】：2018-12-23 10:36:10
【问题描述】：

我想制作一个 iframe 并嵌入一个外部网站，而不允许或极度限制该页面影响父页面的 DOM 和 JavaScript 上下文的能力。有没有办法做到这一点？

【问题讨论】：

您能否澄清一下您试图阻止什么以及常规的同源政策如何解决不了这个问题？

标签： javascript html iframe embed

【解决方案1】：

由于same-origin policy，iframe 无法访问父 iframe 跨域的大部分属性。

所以它可以做的很少，尽管它可以将父文档重定向到另一个 URL。

如果您需要进一步限制，可以使用sandbox attribute 进一步限制访问。

【讨论】：

谢谢。这回答了我的问题。

【解决方案2】：

是的！使用iframe 的sandbox 属性：

// Fully sandboxed
<iframe src="..." sandbox />

// Partially sandboxed, see docs for full set of options
<iframe src="..." sandbox="allow-forms allow-popups" />

请注意，旧版浏览器（例如 IE 10）不支持此功能，并且可能会导致 iframe 在这些浏览器上中断。

【讨论】：