iframe的sandbox属性有什么作用？

本文共计916个文字，预计阅读时间需要4分钟。

iframe 的 `sandbox` 属性并非加了就安全，而是不加更安全，加错更危险——它默认禁止一切能力，必须显式放开；每个 `allow` token 都代表一种能力，多一个就可能多一分风险。

空 sandbox="" 为什么 iframe 会白屏或 JS 不执行？

写成 <iframe src="widget.html" sandbox></iframe> 或 <iframe sandbox=""></iframe>，浏览器立即启用全部限制：

• script 标签、内联事件（onclick）、onload 全部失效，控制台静默，不报错
• 表单点击提交无响应，<form> 被锁死
• window.open()、target="_blank" 被拦截
• localStorage、sessionStorage、cookie 不可读写
• 即使 src 是同域 HTML，origin 也会被强制设为 "null"，失去同源判断基础

allow-scripts 和 allow-same-origin 同时出现的陷阱

这两个 token 常被一起写，但合用极易越权，关键点在于：

• allow-same-origin 单独存在无效：只有当 src 真实满足协议+域名+端口三重一致时，浏览器才认它；否则直接忽略
• 若 src="https://third-party.com/widget.js" 却硬加 allow-same-origin，既得不到权限，又暴露你对来源校验的疏忽
• allow-scripts allow-same-origin 同时存在，脚本可读写自身 localStorage、发 fetch()，但仍无法访问 window.parent 或 document —— DOM 隔离是 sandbox 的硬边界，绕不过
• 生产环境嵌第三方内容时，禁用 allow-same-origin；只在确认 src 是 https://yourdomain.com/admin/ 这类可信内部路径时才考虑

怎么配才够用又不越界？按场景选最小权限组合

别堆砌 token，每个都要有明确用途：

立即学习“前端免费学习笔记（深入）”；

• 只展示带 JS 的广告或图表：sandbox="allow-scripts allow-popups"（禁表单、禁存储、禁跳转父页）
• 需用户填写并提交反馈表单：sandbox="allow-scripts allow-forms allow-popups"（表单提交走 CORS，不加 allow-same-origin）
• 嵌入内部可信子系统（同源且需本地存储）：sandbox="allow-scripts allow-same-origin allow-forms"（务必确认 src 确实同源）
• 绝对禁止 iframe 跳转整个页面：allow-top-navigation 别碰；真要跳，由父页监听 postMessage 后主动跳转

动态插入的 iframe 容易漏掉 sandbox

React/Vue 中用 dangerouslySetInnerHTML 或 v-html 渲染含 iframe 的 HTML 时，常漏掉 sandbox 属性。结果是未受控内容直接执行脚本，等于没防护。

验证是否生效，打开控制台执行：document.querySelector('iframe').sandbox，返回的是实际生效的 DOMTokenList，比如 ["allow-scripts", "allow-forms"]。空值或缺失，说明配置没生效。

真正容易被忽略的，是那些没走静态模板、靠 JS 动态生成的 iframe —— 它们不会自动继承父级安全策略，必须手动补上 sandbox 并严格校验 token 组合。