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-* 值都对应明确行为，不是“可有可无”的修饰符：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 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：

• 只展示静态内容 → 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。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！