加了 sandbox 属性(哪怕值为空)即彻底锁死:iframe 内容不解析、JS 不执行、表单不提交、弹窗拦截、localStorage 访问报错、Network 显示 ERR_BLOCKED_BY_RESPONSE;必须显式声明 allow-scripts 等白名单 token 才能逐项放行。

加了 sandbox 属性(哪怕值为空)就不是“限制”,而是“彻底锁死”——iframe 内容根本不会被解析,JS 不执行、表单不提交、弹窗被拦、localStorage 访问直接报错,Network 面板显示 net::ERR_BLOCKED_BY_RESPONSE。真正可控的安全行为,必须靠显式声明白名单 token 来逐项放行。
sandbox="" 为什么 iframe 白屏且控制台没报错
空值 sandbox="" 或仅写 sandbox 会让浏览器跳过整个 HTML 解析流程,连响应体都不进入 DOM 构建阶段。这不是加载失败,是内容被底层拦截。
- 现象:iframe 显示空白,DevTools Network 显示
Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE - 调试方法:在控制台执行
document.querySelector('iframe').sandbox,返回空DOMTokenList []就确认权限全关 - 修复方式:必须至少写一个合法 token,例如
sandbox="allow-scripts"才能启动加载
allow-scripts 单独启用时的硬边界
allow-scripts 是第三方组件最常需要的权限,但它只解禁外链脚本加载,不恢复配套能力。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
- ✅ 可运行:
<script src="https://cdn.example.com/widget.js"></script>(需服务端返回Access-Control-Allow-Origin) - ❌ 不可运行:
<script>alert(1)</script>、onclick="fetch()"、eval()、document.write() - ⚠️ 注意:
window.origin强制为"null",仍无法访问window.parent或父页 DOM;localStorage和cookie仍不可读写 - 动态设置
iframe.sandbox = "allow-scripts"无效,属性必须在插入 DOM 前就写死
allow-same-origin 的生效前提和高危误用
allow-same-origin 不是“信任开关”,而是一个条件触发器:它只在 src 与父页协议+域名+端口完全一致时才被浏览器识别,否则静默忽略。
立即学习“前端免费学习笔记(深入)”;
- 错误示例:
sandbox="allow-scripts allow-same-origin"加载https://third-party.com/widget.html→allow-same-origin被忽略,但暴露配置疏漏 - 正确判断:父页是
https://app.example.com/dashboard,iframesrc必须也是https://app.example.com/widget.html(不能是https://api.example.com或http://app.example.com) - 即使同源,它也只影响存储访问(
localStorage、cookie),不解除 DOM 隔离 ——document和window.parent依然不可读 - 生产环境嵌第三方内容时,绝对不要加该 token
真正容易被忽略的是:sandbox 不是布尔开关,是白名单;它不判断“谁可信”,只执行“能做什么”。组合权限时别堆砌,比如 sandbox="allow-scripts allow-forms allow-popups" 已覆盖大多数第三方 widget 场景,而加 allow-same-origin 或 allow-top-navigation 几乎等于放弃隔离。


















