iframe的sandbox属性默认完全禁用所有能力，必须显式添加权限；加了就白屏或报错是因为未授予必要权限，如allow-scripts才能执行JS，allow-forms才能提交表单。
iframe 的 sandbox 属性不是“开了就安全”，而是“关了才危险”——默认完全禁用所有能力，必须显式添加权限才能启用对应功能。
为什么 sandbox 一加就白屏或脚本报错？
因为 sandbox 默认值等价于 sandbox="true"（或空字符串），即开启最严限制：禁止运行脚本、禁止表单提交、禁止弹窗、禁止 DOM 访问父页面、禁止插件、禁止自动播放媒体等。
- 常见现象：
Uncaught DOMException: Blocked a frame with origin ... from accessing a cross-origin frame或脚本直接不执行、按钮点击无反应 - 根本原因：没给必要权限，比如要执行 JS 就得加
allow-scripts，要提交表单就得加allow-forms - 注意：
allow-scripts单独启用时，仍禁止document.write和同步 XHR；如需完整脚本能力，还得配allow-same-origin（但会削弱隔离性）
sandbox 各权限开关的实际效果与风险
每个 allow-* 值都对应明确行为，不是“可有可无”的修饰符：
-
allow-scripts：允许执行 JS，但 iframe 会被强制降为null源（无法与父页同源通信） -
allow-same-origin：仅当 iframe URL 是同源时才生效；若和allow-scripts同时使用，JS 才能读写父页 DOM（高风险，慎用） -
allow-popups：允许window.open()和target="_blank"弹窗（否则会被静默拦截） -
allow-downloads：允许通过a[download]触发下载（Chrome 95+ 支持，旧版忽略） -
allow-top-navigation：允许 iframe 内跳转整个页面（top.location = ...），极易被用于钓鱼，生产环境应避免
如何安全地组合 sandbox 权限？
按最小权限原则配置，拒绝“全开”思维。例如嵌入第三方广告或用户提交的 HTML：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 只展示静态内容 →
sandbox=""（即全禁） - 需要加载并执行 JS（如统计代码）→
sandbox="allow-scripts" - 需提交表单 + 运行 JS（如嵌入的问卷）→
sandbox="allow-scripts allow-forms" - 需调用父页 API（如支付回调）→ 必须配合
postMessage，而非开allow-same-origin；父页监听message事件并校验event.origin - 绝对不要写成
sandbox="allow-scripts allow-same-origin allow-popups allow-forms"—— 这几乎等同于没沙箱
兼容性与调试技巧
sandbox 在 Chrome、Firefox、Safari、Edge 16+ 均支持，但 IE 完全不支持（需降级处理）。调试时重点看控制台报错类型：
- 报
Blocked script execution→ 缺allow-scripts - 报
Failed to execute 'postMessage' on 'DOMWindow'→ 父页未监听，或 iframe 源被 sandbox 重置为null（此时event.source无法反向通信） - 用
console.log(iframe.contentWindow)查看是否为null：sandbox 启用后若未加allow-same-origin，跨域 iframe 的contentWindow为null，无法直接访问
真正难的不是加哪些 allow-，而是判断「这个 iframe 是否真的需要这些能力」——多数业务场景里，白名单越短，越不容易漏掉边界 case。
