JS `iframe` `sandbox` 属性：细粒度控制 `iframe` 权限 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！今天咱们来聊聊 iframe 的 sandbox 属性，这玩意儿就像个给 iframe 穿的“金钟罩铁布衫”，能让你对 iframe 的权限进行细粒度的控制。

iframe：Web 应用中的小弟

首先，咱们得简单了解一下 iframe。它就像网页中的一个小窗口，可以用来嵌入其他网页，或者同域、跨域的内容。虽然方便，但如果放任不管，也可能带来安全问题，比如跨站脚本攻击（XSS）。

sandbox：权限控制的利器

sandbox 属性就是为了解决这些安全问题而生的。它允许你对 iframe 的权限进行限制，就像给 iframe 划定了一个活动范围，超出这个范围，它就啥也干不了。

sandbox 属性的使用

sandbox 属性的使用非常简单，直接在 iframe 标签中添加即可。

<iframe src="example.com" sandbox></iframe>

就这样？是的，就是这么简单！但是，仅仅这样设置，iframe 的权限就被限制到了最低，几乎什么都做不了，相当于给它穿上了全封闭的“金钟罩”，连呼吸都困难。

sandbox 属性的取值（token）

sandbox 属性的值实际上是一系列 token，每个 token 代表一种权限。你可以通过指定不同的 token，来赋予 iframe 不同的权限。如果不指定任何 token，那么 iframe 将拥有最严格的权限限制。

下面咱们来详细看看这些 token：

Token	描述
`allow-forms`	允许 `iframe` 提交表单。
`allow-same-origin`	允许 `iframe` 将其来源视为与包含它的页面相同。这意味着 `iframe` 可以访问包含它的页面的 Cookie 和本地存储。特别注意：不推荐随便使用，除非你真的需要同源访问，否则可能会带来安全风险。
`allow-scripts`	允许 `iframe` 运行脚本（JavaScript）。
`allow-top-navigation`	允许 `iframe` 导航（改变）顶层窗口。谨慎使用，防止恶意 `iframe` 重定向整个页面。
`allow-popups`	允许 `iframe` 打开新的弹出窗口。
`allow-pointer-lock`	允许 `iframe` 使用指针锁定 API。这个 API 允许 `iframe` 捕获鼠标指针，常用于游戏和 3D 应用。
`allow-modals`	允许 `iframe` 打开模态窗口（例如 `alert()`、`confirm()`、`prompt()`）。
`allow-orientation-lock`	允许 `iframe` 锁定屏幕方向。
`allow-presentation`	允许 `iframe` 使用 Presentation API。这个 API 允许 `iframe` 在第二屏幕上显示内容。
`allow-downloads`	允许 `iframe` 下载文件。
`allow-storage-access-by-user-activation`	允许 `iframe` 在用户激活后访问存储（例如 Cookie、本地存储）。这可以防止 `iframe` 在未经用户许可的情况下偷偷访问存储。
`allow-top-navigation-by-user-activation`	允许 `iframe` 在用户激活后导航顶层窗口。这可以防止 `iframe` 在未经用户许可的情况下重定向整个页面。
`allow-top-navigation-to-custom-protocols`	允许 `iframe` 导航到自定义协议（例如 `mailto:`、`tel:`）。同样需要谨慎使用，防止恶意协议利用。

组合使用 token

你可以同时使用多个 token，用空格分隔。例如：

<iframe src="example.com" sandbox="allow-forms allow-scripts allow-same-origin"></iframe>

这个例子中，iframe 被允许提交表单、运行脚本，并且可以同源访问。

实例演示

咱们来几个例子，让大家更直观地理解 sandbox 的作用。

例1：完全限制

<!DOCTYPE html>
<html>
<head>
  <title>Sandbox Example 1</title>
</head>
<body>
  <h1>Sandbox Example 1: Fully Restricted</h1>
  <iframe src="sandbox_example.html" sandbox></iframe>
</body>
</html>

sandbox_example.html 内容：

<!DOCTYPE html>
<html>
<head>
  <title>Sandbox Example Content</title>
</head>
<body>
  <h1>Sandbox Example Content</h1>
  <button onclick="alert('Hello from iframe!')">Click Me</button>
  <script>
    console.log("Hello from iframe script!");
    document.cookie = "test=123";
  </script>
  <form action="/submit" method="post">
    <input type="text" name="name" value="John Doe">
    <button type="submit">Submit</button>
  </form>
</body>
</html>

在这个例子中，iframe 的 sandbox 属性没有指定任何 token，这意味着 iframe 的权限被限制到了最低。你会发现：

iframe 中的 JavaScript 代码无法执行。
iframe 中的表单无法提交。
iframe 无法访问 Cookie。
iframe 无法打开弹出窗口。

例2：允许运行脚本

<!DOCTYPE html>
<html>
<head>
  <title>Sandbox Example 2</title>
</head>
<body>
  <h1>Sandbox Example 2: Allow Scripts</h1>
  <iframe src="sandbox_example.html" sandbox="allow-scripts"></iframe>
</body>
</html>

在这个例子中，iframe 的 sandbox 属性指定了 allow-scripts token，这意味着 iframe 被允许运行脚本。你会发现：

iframe 中的 JavaScript 代码可以执行。
但是，iframe 仍然无法提交表单，无法访问 Cookie，无法打开弹出窗口。

例3：允许运行脚本和提交表单

<!DOCTYPE html>
<html>
<head>
  <title>Sandbox Example 3</title>
</head>
<body>
  <h1>Sandbox Example 3: Allow Scripts and Forms</h1>
  <iframe src="sandbox_example.html" sandbox="allow-scripts allow-forms"></iframe>
</body>
</html>

在这个例子中，iframe 的 sandbox 属性指定了 allow-scripts 和 allow-forms token，这意味着 iframe 被允许运行脚本和提交表单。你会发现：

iframe 中的 JavaScript 代码可以执行。
iframe 中的表单可以提交。
但是，iframe 仍然无法访问 Cookie，无法打开弹出窗口。

例4：允许同源访问（谨慎使用）

<!DOCTYPE html>
<html>
<head>
  <title>Sandbox Example 4</title>
</head>
<body>
  <h1>Sandbox Example 4: Allow Same Origin</h1>
  <iframe src="sandbox_example.html" sandbox="allow-scripts allow-forms allow-same-origin"></iframe>
  <script>
    document.cookie = "main_page_cookie=456";
  </script>
</body>
</html>

在这个例子中，iframe 的 sandbox 属性指定了 allow-scripts、allow-forms 和 allow-same-origin token，这意味着 iframe 被允许运行脚本、提交表单，并且可以同源访问。你会发现：

iframe 中的 JavaScript 代码可以执行。
iframe 中的表单可以提交。
iframe 可以访问包含它的页面的 Cookie。 sandbox_example.html 中的脚本可以访问 main_page_cookie。

警告：allow-same-origin 的风险

allow-same-origin 是一个非常强大的 token，它赋予了 iframe 几乎与包含它的页面相同的权限。这意味着，如果 iframe 中包含恶意代码，它可能会窃取用户的 Cookie、修改页面内容，甚至执行其他危险操作。因此，除非你完全信任 iframe 的来源，否则不要使用 allow-same-origin。

最佳实践

默认情况下，尽可能使用最严格的 sandbox 限制（不指定任何 token）。
只赋予 iframe 必要的权限。 例如，如果 iframe 只需要显示内容，不需要运行脚本，就不要指定 allow-scripts。
谨慎使用 allow-same-origin。 只有在完全信任 iframe 的来源时，才可以使用 allow-same-origin。
定期审查 sandbox 设置。 随着业务发展，iframe 的需求可能会发生变化，需要定期审查 sandbox 设置，确保其仍然安全有效。
使用内容安全策略（CSP）进一步增强安全性。 CSP 可以限制 iframe 加载的资源，例如脚本、样式表、图片等，从而进一步降低安全风险。

sandbox 属性的浏览器兼容性

sandbox 属性的浏览器兼容性良好，主流浏览器都支持。但是，为了兼容旧版本的浏览器，可以考虑使用 polyfill。

代码示例：使用 JavaScript 动态设置 sandbox 属性

有时候，你可能需要在 JavaScript 中动态设置 sandbox 属性。例如，你可以根据用户的角色，赋予 iframe 不同的权限。

const iframe = document.getElementById('myIframe');
const userRole = 'admin'; // 假设从服务器获取用户角色

if (userRole === 'admin') {
  iframe.sandbox = 'allow-forms allow-scripts allow-same-origin allow-top-navigation'; // 管理员拥有所有权限
} else if (userRole === 'editor') {
  iframe.sandbox = 'allow-forms allow-scripts'; // 编辑器可以提交表单和运行脚本
} else {
  iframe.sandbox = ''; // 其他用户只能查看内容
}

高级用法：结合 CSP 使用

sandbox 属性和内容安全策略（CSP）可以结合使用，以提供更强大的安全保护。例如，你可以使用 CSP 限制 iframe 加载的脚本来源，即使 iframe 被允许运行脚本，也只能加载来自特定域名的脚本。

<!DOCTYPE html>
<html>
<head>
  <title>Sandbox and CSP Example</title>
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://example.com;">
</head>
<body>
  <h1>Sandbox and CSP Example</h1>
  <iframe src="sandbox_example.html" sandbox="allow-scripts"></iframe>
</body>
</html>

在这个例子中，CSP 限制了 iframe 只能加载来自当前域名（'self'）和 https://example.com 的脚本。即使 sandbox_example.html 尝试加载来自其他域名的脚本，也会被 CSP 阻止。

总结

iframe 的 sandbox 属性是一个强大的安全工具，可以让你对 iframe 的权限进行细粒度的控制。但是，sandbox 属性也需要谨慎使用，否则可能会带来安全风险。记住以下几点：

默认情况下，尽可能使用最严格的 sandbox 限制。
只赋予 iframe 必要的权限。
谨慎使用 allow-same-origin。
定期审查 sandbox 设置。
使用内容安全策略（CSP）进一步增强安全性。

好了，今天的讲座就到这里。希望大家对 iframe 的 sandbox 属性有了更深入的了解。记住，安全无小事，小心驶得万年船！下次再见！

发表回复 取消回复

发表回复取消回复