空 sandbox 属性（如 sandbox 或 sandbox=""）会触发浏览器底层内容拦截，导致 iframe 白屏且 network 显示 net::err_blocked_by_response；必须显式声明至少一个 allow-token（如 sandbox="allow-scripts"）才能启动 html 解析与加载。
空 sandbox 属性会导致 iframe 白屏或 net::ERR_BLOCKED_BY_RESPONSE
直接写 sandbox 或 sandbox="" 不是“开启沙箱”，而是触发浏览器最底层的内容拦截策略：HTTP 响应体被直接丢弃，HTML 解析器根本不启动。现象是 iframe 完全空白，Network 面板显示 net::ERR_BLOCKED_BY_RESPONSE，控制台静默无报错——这不是加载失败，是内容压根没被处理。
验证方式很简单：在控制台执行 document.querySelector('iframe').sandbox，返回空的 DOMTokenList [] 就说明没开任何权限，等同于锁死状态。
- 必须显式声明至少一个
allow-token 才能启动加载和解析，比如sandbox="allow-scripts" -
sandbox=" "（带空格）也等效于空值，同样白屏 - 动态设置
iframe.sandbox = "allow-scripts"无效；属性必须在 DOM 插入前就写死
sandbox="allow-scripts" 能跑什么、不能跑什么
allow-scripts 是绝大多数第三方组件的最低可行配置，但它只解禁外链脚本加载，不恢复内联行为，也不赋予跨域能力。
- ✅ 可运行：
<script src="https://trusted.example/widget.js"></script>（需服务端返回Access-Control-Allow-Origin） - ❌ 不可运行：
<script>alert(1)</script>（内联 script 标签被静默忽略） - ❌ 不可运行：
<button onclick="fetch('/api')">click</button>（所有内联事件处理器失效） - ❌ 不可运行：
javascript:void(0)、eval()、document.write()、同步XMLHttpRequest - ⚠️ 注意：
allow-scripts不递归授权——外链脚本里再document.write("<script></script>")仍被禁止
allow-same-origin 的生效前提与高危误用
allow-same-origin 不是“让 iframe 和父页变同源”，而是仅当 src 真实满足协议+域名+端口三者完全一致时，才被浏览器识别并启用。否则该 token 被静默忽略，且不报错。
- ❌ 错误示例：
sandbox="allow-scripts allow-same-origin"加载https://third-party.com/widget.html——allow-same-origin实际无效，但暴露配置疏漏 - ✅ 正确场景：仅用于同域可信子系统，如
src="https://yourapp.com/admin.html"，且服务端需返回正确 CORS 头 - ⚠️ 即使同源 +
allow-scripts allow-same-origin，iframe 仍无法访问window.parent或父页 DOM —— DOM 隔离是 sandbox 的硬边界，不可绕过 - ⚠️
allow-same-origin仅影响localStorage、cookie、fetch()同源请求等存储类 API，不影响通信能力
金融/支付类 iframe 的底线配置与通信规范
第三方支付 iframe（如银行收银台）必须使用 sandbox="allow-scripts allow-forms"，这是功能可用与安全可控之间的最小交集。
-
allow-scripts：支撑 SDK 初始化、签名、调起支付弹窗 -
allow-forms：支持用户填写银行卡号、CVV 等字段提交（提交目标受 CORS 控制，不会自动发到父域） - 绝对不加
allow-same-origin：防止读取父页localStorage中的 session token - 绝对不加
allow-popups和allow-top-navigation：杜绝钓鱼跳转或全页劫持 - 通信必须走
postMessage，且父页监听时严格校验event.origin === 'https://pay.bank.com'，拒绝'*'
沙箱配置不是越宽越好；每多一个 allow- token，就多一条可能被利用的攻击路径。真正关键的是把通信逻辑设计成显式、可校验、不可绕过的流程，而不是依赖权限堆砌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
