iframe 的 sandbox 属性是 html5 提供的关键安全机制，通过白名单方式严格限制嵌入内容权限，默认禁用脚本、表单、弹窗及存储访问；空值 sandbox="" 完全禁用所有特权，启用需谨慎添加如 allow-scripts、allow-same-origin（高危）等 token，并配合 referrerpolicy、srcdoc、csp 等纵深防御。
iframe 的 sandbox 属性是 HTML5 提供的关键安全机制，用于严格限制嵌入内容的执行权限，防止恶意脚本窃取主页面数据或发起攻击。它通过白名单方式启用特定能力，未显式声明的权限默认全部禁用，比单纯依赖同源策略更主动、更细粒度。
基础沙盒配置：最小权限原则
最安全的起点是只开启必要功能。空值 sandbox="" 表示完全禁用所有特权：
- 禁止运行脚本（
javascript）、提交表单（submit）、弹窗（popup） - 禁止访问父页面 DOM（
top-navigation和allow-scripts不启用时自动受限） - 禁止读写 cookies、localStorage 等存储（除非显式添加
allow-same-origin）
例如：<iframe src="widget.html" sandbox=""></iframe> —— 此 iframe 连 alert(1) 都无法执行。
按需启用关键能力（带风险提示）
如需增强功能，必须逐项添加对应 token，并清楚其安全影响：
-
allow-scripts：允许执行 JS，但默认仍不能访问父页面（受同源与 sandbox 双重隔离） -
allow-same-origin：⚠️ 危险！仅当 iframe 与主站同源且可信时才可启用，否则会绕过同源策略，导致 DOM 访问、cookie 读写等高危行为 -
allow-forms：允许提交表单，但不自动赋予网络请求权限（仍受 CORS 控制） -
allow-popups：允许调用window.open()，建议配合allow-scripts使用
组合示例：sandbox="allow-scripts allow-forms" —— 允许运行脚本和提交表单，但无法跳转父页面、无法弹窗、无法访问父级 DOM。
配合其他属性强化防护
sandbox 不是万能的，需与其它属性协同使用：
-
referrerpolicy="no-referrer"：防止 iframe 内资源请求泄露来源 URL -
loading="lazy"：延迟加载非首屏 iframe，减少初始攻击面 -
srcdoc替代src：直接内联 HTML 内容，避免外部资源加载风险（适合简单、静态嵌入） - 服务端设置
X-Frame-Options: DENY或Content-Security-Policy: frame-ancestors 'none'：从源头禁止被嵌入，与 sandbox 形成纵深防御
常见误区与验证建议
实际部署中容易忽略的细节：
- 不要混用
allow-same-origin和跨域 iframe：这会导致严重越权，浏览器会静默忽略该 token - sandbox 对
srcdoc内容同样生效，即使无网络请求也受限制 - 可通过 JavaScript 检查是否启用 sandbox：
iframe.sandbox.length > 0；也可在 DevTools 的 Elements 面板中查看 sandbox 属性值 - 测试时用 Chrome/Firefox 的开发者工具 → Application → Frames 查看当前 iframe 的权限状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
