加了 sandbox 就白屏不是 bug，而是空值导致零权限：默认全锁死，js 不执行、表单不提交、localstorage 报 securityerror；sandbox 是白名单机制，空值等于“零权限”，非“最小隔离”。
加了 sandbox 就白屏？不是 bug，是默认全锁死
写成 <iframe src="https://third-party.com/widget.html" sandbox></iframe> 或 <iframe sandbox=""></iframe>，浏览器会直接拒绝解析响应体，Network 面板显示 net::ERR_BLOCKED_BY_RESPONSE，页面空白，JS 不执行、表单不提交、localStorage 访问报 SecurityError。这不是加载失败，是底层内容被拦截——sandbox 是白名单机制，空值等于“零权限”，不是“最小隔离”。
sandbox="allow-scripts" 能跑什么、不能跑什么
allow-scripts 是第三方组件（如图表、广告 SDK）最常需的权限，但它只解禁外链脚本加载与执行，不恢复任何内联能力：
- ✅ 可运行：
<script src="https://trusted-cdn.com/chart.js"></script>（需服务端返回Access-Control-Allow-Origin） - ❌ 不可运行：
<script>alert(1)</script>（内联 script 静默忽略） - ❌ 不可运行：
<button onclick="fetch('/api')">click</button>（onclick等内联事件处理器完全失效） - ❌ 不可运行：
javascript:void(0)或eval()（执行引擎被硬性关闭） - ⚠️ 注意：
allow-scripts不递归授权——脚本里再document.write("<script>...</script>")仍被拦截
allow-same-origin 和 allow-scripts 同时出现的真实效果
这两个 token 经常被一起写，但它们不是叠加生效，而是存在强依赖和高风险：
-
allow-same-origin单独写毫无意义：浏览器先校验src是否与父页协议+域名+端口全一致；不同源时该 token 直接被忽略，且不报错 - 只有
allow-scripts allow-same-origin同时存在，且src确实同源时，localStorage、同源fetch()、cookie读写才可能恢复 - 即使满足条件，
window.parent和document依然不可访问——DOM 隔离是 sandbox 的硬边界 - 给
src="https://third-party.com/widget.html"硬加allow-same-origin，既得不到权限，又暴露配置疏忽
动态设置 sandbox 属性无效，必须静态声明
在 DOM 插入后执行 iframe.sandbox = "allow-scripts" 在 Chromium 内核中会被忽略，控制台可能报 Failed to set the 'sandbox' property on 'HTMLIFrameElement': This property is read-only。沙箱策略只在 iframe 创建并开始加载资源前生效：
- ✅ 正确做法：服务端渲染时直接写死属性，如
<iframe sandbox="allow-scripts allow-forms"></iframe> - ✅ 前端动态插入时，用字符串拼接或
innerHTML设置（注意 XSS），不能先创建空 iframe 再补sandbox - ❌ 错误做法：先
document.createElement('iframe')，再el.sandbox = "allow-scripts" - 验证是否生效：控制台执行
document.querySelector('iframe').sandbox，返回的是实际生效的DOMTokenList，不是 HTML 字符串
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
