空sandbox属性导致iframe白屏或js不执行，因其默认禁用脚本、表单、弹窗、存储及自动播放等全部能力，script标签、内联事件、onload全失效，表单提交静默失败，window.open和target="_blank"被拦截，localstorage/sessionstorage/cookie不可读写，同域src也会被强制设为"null"源。
iframe 的 sandbox 属性不是“加了就安全”，而是“不加白加，加错更危险”——它默认禁用一切能力，必须显式放行；每多一个 allow- token，就多一分风险边界。
空 sandbox="" 为什么 iframe 会白屏或 JS 不执行？
写成 <iframe src="widget.html" sandbox></iframe> 或 <iframe sandbox=""></iframe>，浏览器立即启用全部限制：
-
script标签、内联事件（onclick）、onload全部失效，控制台静默，不报错 - 表单点击提交无响应，
<form></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 组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
