iframe sandbox 属性在 spa 中默认启用后会彻底禁用 js 执行、表单交互等能力，需显式配置 allow-token（如 allow-scripts）并避免误用 allow-same-origin；动态插入时须用 setattribute 设置，且需配合 csp、referrerpolicy 等纵深防护。
iframe sandbox 属性在 SPA 中默认就是锁死状态
加了 sandbox 但 JS 不执行、表单点不动、控制台没报错？不是 bug，是它真被关严实了。SPA 里嵌第三方模块（比如独立渲染的报表组件、广告位、用户生成内容预览）时，sandbox="" 或 sandbox 空属性会让 iframe 内容彻底失去主动行为能力：内联事件（onclick）、fetch()、localStorage、window.open() 全部静默失效，连 alert(1) 都不会弹。
验证是否生效很简单：document.querySelector('iframe').sandbox.length > 0 返回 true 就说明沙箱已激活，且当前无任何白名单权限。
- SPA 路由切换后动态插入的 iframe，
sandbox必须写在 HTML 字符串里或用setAttribute('sandbox', '...')设置；直接赋值iframe.sandbox = 'allow-scripts'无效 -
srcdoc内容同样受 sandbox 限制，哪怕没网络请求，JS 也得靠allow-scripts才能跑 - Vue/React 渲染时若用 v-html 或 dangerouslySetInnerHTML 注入 iframe，确保字符串中
sandbox属性已存在且值正确，框架不会帮你补
按 SPA 场景选最小 allow-token 组合
别堆砌 allow-scripts allow-same-origin allow-forms —— 每个 token 都是攻击面。SPA 常见需求对应的安全组合如下：
- 只渲染带交互图表（如 ECharts）：
sandbox="allow-scripts allow-popups"。弹窗用于缩放/导出，不碰表单、不读写 storage - 嵌入用户提交的富文本预览（含 form）：
sandbox="allow-scripts allow-forms"。提交走 CORS 到后端，禁allow-same-origin，避免 cookie 泄露 - 同源子系统入口（如
https://app.example.com/admin）：sandbox="allow-scripts allow-same-origin allow-forms"。前提是服务端返回正确Access-Control-Allow-Origin和SameSitecookie 头 - 绝对禁止
allow-top-navigation和allow-top-navigation-by-user-activation以外的跳转权限——SPA 的路由由主应用控制，iframe 不能擅自改top.location
allow-same-origin 在 SPA 中极易误用
allow-same-origin 不是“让同源 iframe 更好用”，而是高危开关。它仅在 iframe src 与主站协议+域名+端口完全一致时才生效；跨域时浏览器直接忽略该 token，且不报错。
典型误用：<iframe src="https://cdn.example.com/widget.js"></iframe> 加 sandbox="allow-scripts allow-same-origin" —— 因 CDN 域名不同，allow-same-origin 白加，还暴露你试图绕过隔离的意图。
- 检查是否真同源：用
new URL(iframe.src).origin === location.origin判断，别信肉眼观察 - 即使同源，启用
allow-same-origin后，iframe 仍无法访问window.parent或父页 DOM —— 这是 sandbox 的硬隔离边界，只能靠postMessage通信 - SPA 中更推荐用
srcdoc+allow-scripts替代同源src，彻底规避 origin 校验风险
必须叠加的纵深防护措施
sandbox 单独扛不住真实攻击。SPA 动态加载 iframe 时，还需同步配置：
-
referrerpolicy="no-referrer"：防止 iframe 内资源请求泄露当前 SPA 的路由路径（如/dashboard/user/123） -
loading="lazy"：对非首屏 iframe 延迟加载，减少初始 JS 执行面 - 服务端响应头加
Content-Security-Policy: frame-ancestors 'self'，防主站被恶意站点 iframe 嵌套 - 若 iframe 内容简单静态（如说明卡片），优先用
srcdoc内联 HTML，省去网络请求和证书校验环节
最易被忽略的是：sandbox 对 iframe 自身加载的子资源（如 iframe 里的 <script src="//cdn.com/x.js"></script>）无约束力——这些脚本仍受主页面 CSP 控制，但若 CSP 宽松，它们就可能绕过 sandbox 的 JS 执行限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
