加了 sandbox 属性（哪怕值为空）即彻底锁死：iframe 内容不解析、js 不执行、表单不提交、弹窗拦截、localstorage 访问报错、network 显示 err_blocked_by_response；必须显式声明 allow-scripts 等白名单 token 才能逐项放行。
加了 sandbox 属性（哪怕值为空）就不是“限制”，而是“彻底锁死”——iframe 内容根本不会被解析，JS 不执行、表单不提交、弹窗被拦、localStorage 访问直接报错，Network 面板显示 net::ERR_BLOCKED_BY_RESPONSE。真正可控的安全行为，必须靠显式声明白名单 token 来逐项放行。
sandbox="" 为什么 iframe 白屏且控制台没报错
空值 sandbox="" 或仅写 sandbox 会让浏览器跳过整个 HTML 解析流程，连响应体都不进入 DOM 构建阶段。这不是加载失败，是内容被底层拦截。
- 现象：iframe 显示空白，DevTools Network 显示
Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE - 调试方法：在控制台执行
document.querySelector('iframe').sandbox，返回空DOMTokenList []就确认权限全关 - 修复方式：必须至少写一个合法 token，例如
sandbox="allow-scripts"才能启动加载
allow-scripts 单独启用时的硬边界
allow-scripts 是第三方组件最常需要的权限，但它只解禁外链脚本加载，不恢复配套能力。
- ✅ 可运行：
<script src="https://cdn.example.com/widget.js"></script>（需服务端返回Access-Control-Allow-Origin） - ❌ 不可运行：
<script>alert(1)</script>、onclick="fetch()"、eval()、document.write() - ⚠️ 注意：
window.origin强制为"null"，仍无法访问window.parent或父页 DOM；localStorage和cookie仍不可读写 - 动态设置
iframe.sandbox = "allow-scripts"无效，属性必须在插入 DOM 前就写死
allow-same-origin 的生效前提和高危误用
allow-same-origin 不是“信任开关”，而是一个条件触发器：它只在 src 与父页协议+域名+端口完全一致时才被浏览器识别，否则静默忽略。
- 错误示例：
sandbox="allow-scripts allow-same-origin"加载https://third-party.com/widget.html→allow-same-origin被忽略，但暴露配置疏漏 - 正确判断：父页是
https://app.example.com/dashboard，iframesrc必须也是https://app.example.com/widget.html（不能是https://api.example.com或http://app.example.com） - 即使同源，它也只影响存储访问（
localStorage、cookie），不解除 DOM 隔离 ——document和window.parent依然不可读 - 生产环境嵌第三方内容时，绝对不要加该 token
真正容易被忽略的是：sandbox 不是布尔开关，是白名单；它不判断“谁可信”，只执行“能做什么”。组合权限时别堆砌，比如 sandbox="allow-scripts allow-forms allow-popups" 已覆盖大多数第三方 widget 场景，而加 allow-same-origin 或 allow-top-navigation 几乎等于放弃隔离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
