sandbox属性默认全锁死:脚本不执行、表单不提交、弹窗拦截、localStorage不可读写、onclick静默忽略;必须显式添加allow-scripts等白名单权限才能逐项启用,且每开一项均增加风险。

sandbox 属性一加就失效,不是配置错了,而是默认锁死一切——脚本不执行、表单不提交、弹窗拦截、localStorage 不可读写,连 onclick 都静默忽略。
空 sandbox="" 为什么直接白屏或 JS 完全不跑?
写成 <iframe src="widget.html" sandbox></iframe> 或 <iframe sandbox=""></iframe>,浏览器立刻启用全部限制:
-
script标签、javascript:void(0)、内联事件(如onclick)全部被屏蔽,控制台不报错也不提示 - 表单点击后无响应,
<form>提交被静默丢弃 -
window.open()、target="_blank"、target="_top"全部拦截 - 即使
src是同域 HTML,origin 也被强制设为"null",失去同源基础 - 检查方式:在控制台执行
document.querySelector('iframe').sandbox,返回空DOMTokenList []就说明没开权限
allow-scripts 单独启用时的硬限制
只加 allow-scripts 能让 JS 执行,但远不如你以为的“能用了”:
- 内联事件处理器(
onclick、onload)仍被禁用,必须改用addEventListener -
document.write()和同步XMLHttpRequest依然报错,哪怕加了该权限 - iframe 的 origin 永远是
"null",无法访问window.parent或父页面 DOM -
postMessage可用,但接收方必须校验event.origin,不能依赖allow-same-origin绕过验证
allow-forms 和 allow-scripts 组合的实际效果
这是嵌入第三方交互组件(如反馈表单、带 JS 的图表)最常用且相对安全的组合:
立即学习“前端免费学习笔记(深入)”;
-
sandbox="allow-scripts allow-forms"允许 JS 运行 + 表单提交,但提交目标仍受 CORS 控制 - 不会开放
localStorage、cookie、window.top.location.replace()等高危能力 - 禁止跳转顶层页面(
allow-top-navigation没开),防止整个页面被重定向 - 禁止弹窗(
allow-popups没开),避免钓鱼式新窗口打开 - 若表单需上传文件或携带凭证,后端必须明确支持 CORS 并允许对应 header,否则 403 或跨域拒绝
真正容易被忽略的点是:allow-same-origin 不是“锦上添花”,而是高危开关——它只有在 src 真实满足协议+域名+端口三重一致时才生效;写错或滥用,等于主动绕过同源策略,把沙盒变成摆设。



















