空sandbox属性即全锁死,JS不解析、表单不提交、弹窗失效、localStorage不可读写,仅postMessage可用;必须显式添加allow-scripts等权限token才能逐项放行,且需配合referrerpolicy、CSP等纵深防护才构成真正安全隔离。

sandbox 属性不是“加了就安全”,而是“加了就锁死”——只要出现该属性(哪怕值为空),iframe 内所有主动行为立刻被浏览器底层拦截,JS 不解析、表单不提交、弹窗失效、localStorage 不可读写,仅 postMessage 保持可用。
空 sandbox 会导致白屏或 net::ERR_BLOCKED_BY_RESPONSE
写成 <iframe src="widget.html" sandbox> 或 <iframe sandbox="">,等价于启用全部限制:Network 面板里会显示 net::ERR_BLOCKED_BY_RESPONSE,iframe 渲染区空白,控制台静默无报错。这不是加载失败,是内容根本没被解析。常见误判是以为路径错了或 JS 语法有问题,其实只需在控制台执行 document.querySelector('iframe').sandbox,返回空 DOMTokenList [] 就能确认权限未开启。
allow-scripts 是第三方组件的最低可行权限
广告、图表、统计脚本等依赖 JS 执行的组件,至少需要 allow-scripts 才能运行。但要注意它只解禁外链脚本(<script src="https://cdn.example.com/widget.js"></script>),并不恢复以下能力:
-
onclick、onload、javascript:void(0)等内联事件处理器仍被屏蔽,必须改用addEventListener -
document.write()、同步XMLHttpRequest、eval()仍被禁止 -
window.origin强制为"null",无法访问window.parent或父页 DOM -
window.localStorage、document.cookie绑定到临时匿名上下文,刷新即丢
allow-same-origin 和 allow-top-navigation 极易越权
allow-same-origin 只有在 src 与父页协议、域名、端口完全一致时才生效;否则浏览器静默忽略该 token,但暴露配置疏漏。例如:sandbox="allow-scripts allow-same-origin" 加载 https://third-party.com/widget.html,allow-same-origin 实际无效,localStorage 依然不可读写,DOM 依然隔离——你以为开了同源权限,其实什么都没变。
立即学习“前端免费学习笔记(深入)”;
allow-top-navigation 允许 iframe 修改顶层页面地址(如 top.location = 'https://evil.com'),生产环境应绝对避免;若需跳转,优先使用 allow-top-navigation-by-user-activation(仅允许用户点击后触发)。
验证 sandbox 是否生效和最小权限配法
别靠猜,直接查:document.querySelector('iframe').sandbox 返回的 DOMTokenList 就是当前实际启用的权限列表。按真实场景选最小组合,拒绝堆砌:
- 只展示带 JS 的广告/图表:
sandbox="allow-scripts allow-popups" - 嵌入用户填写的问卷:
sandbox="allow-scripts allow-forms allow-popups" - 加载同源可信子系统(如
https://yourapp.com/internal.html):sandbox="allow-scripts allow-same-origin allow-forms" - 绝对不要写:
sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-top-navigation"——这和没加sandbox几乎一样危险
真正可控的安全隔离,必须显式声明最小权限,并叠加 referrerpolicy="no-referrer"、loading="lazy"、srcdoc 和服务端 Content-Security-Policy: frame-ancestors 等纵深措施。单独用 sandbox,连起点都算不上。



















