HTML | DOM IFrame 沙箱属性

IFrame 是 HTML 中的一个标签，可以在一个网页中嵌入另一个页面，并且允许在这两个页面中进行相互操作。IFrame 有一个重要的属性叫做沙箱（sandbox），可以用于限制被嵌入页面的行为。本文将介绍 HTML 中 IFrame 的使用和沙箱属性的作用。

IFrame 的使用

在 HTML 中，IFrame 的使用非常简单，只需要使用以下标签：

<iframe src="url"></iframe>

其中，src 属性指定了嵌入的页面的地址。

在这个嵌入的页面中，可以使用 JavaScript 访问父页面的对象。例如，以下代码可以从嵌入页面中访问父页面中的元素：

var parentElement = window.parent.document.getElementById('parent-element-id');

但是，这种行为可能会带来一些风险，例如跨站脚本攻击（XSS）。为了降低这种风险，可以使用 IFrame 的沙箱属性。

沙箱属性

IFrame 的沙箱属性是一个布尔属性，可以用于禁止多种行为。IFrame 标签可以添加该属性，如下所示：

<iframe sandbox></iframe>

在该属性被设置的情况下，IFrame 满足以下条件：

• 不与任何外部资源交互。
• 不同源页面的 JavaScript 代码无法操作该 IFrame。
• IFrame 中的表单无法自动提交。
• IFrame 中的脚本无法访问父页面或子页面中的 Cookie。
• IFrame 中的脚本无法打开弹出窗口或移动或缩放父窗口。

除了使用 sandbox 标志之外，还可以对其进行明确设置，如下所示：

<iframe sandbox="allow-modals allow-scripts allow-same-origin"></iframe>

• allow-modals：IFrame 中的脚本可以弹出模态窗口。
• allow-scripts：IFrame 中的脚本可以运行。
• allow-same-origin：IFrame 可以与同源内容进行交互。

当然，还可以有其他的选项：

• allow-top-navigation：IFrame 中的脚本可以导航到顶层窗口。
• allow-forms：IFrame 中的表单可以自动提交。
• allow-pointer-lock：IFrame 中的脚本可以获取指针锁定。
• allow-popups-to-escape-sandbox：IFrame 中的模态窗口可以逃脱沙箱。

需要注意的是，一个 IFrame 可以设置多个 sandbox 标志和可选的限制，例如：

<iframe sandbox="allow-scripts allow-forms"></iframe>

总结

IFrame 是 HTML 中非常有用的标签，它可以让你在一个页面中嵌入另一个页面，增强了页面的交互性。但是，随之而来的是风险，可以使用 IFrame 的沙箱属性来限制它们的行为。sandbox 属性可以帮助我们通过禁止某些行为来降低风险，并可以通过内部文本设置做到更精确的设置。