空 sandbox 属性是彻底锁死而非构建隔离，需显式声明最小权限并叠加 referrerpolicy、loading="lazy"、srcdoc 和服务端帧防护等纵深措施。
直接加 sandbox 属性本身不是“构建隔离”，而是“彻底锁死”——它默认禁用脚本、表单、弹窗、存储、自动播放等所有能力，iframe 会白屏或功能失效。真正实现**可控的安全隔离**，关键在于：显式声明最小必要权限，配合其他防护手段协同生效。
空 sandbox 是起点，不是终点
写成 <iframe src="widget.html" sandbox></iframe> 或 <iframe sandbox=""></iframe>，等价于启用全部限制：
- 内联和外部 JavaScript 完全不执行（
alert()、fetch()、事件监听器均失效） -
<form>提交静默失败，无报错、无响应 -
window.open()、target="_blank"被拦截 -
localStorage、sessionStorage、document.cookie不可读写（即使同源） - 视频/音频
autoplay强制禁用，autofocus失效 - iframe 被强制赋予
nullorigin，与父页完全隔离
按需开启白名单权限（带风险提示）
每个 allow- token 解锁一项能力，必须空格分隔，不可省略引号。常用组合及注意事项：
-
allow-scripts：必须开启才能运行 JS；但开启后仍无法访问window.parent或父页 DOM，localStorage仍是独立空空间 -
allow-forms：仅当 iframe 内含<form>且需提交时添加；提交目标受 CORS 控制，不自动获得网络权限 -
allow-popups：需window.open()或新窗口链接时才加；建议搭配allow-scripts使用 -
allow-same-origin：高危！仅当src确实与父页同协议+域名+端口时才可启用；不同源时浏览器直接忽略该 token，加了也无效 -
allow-top-navigation-by-user-activation：比allow-top-navigation更安全，只允许用户点击后跳转顶层页面
错误示例：sandbox="allow-scripts allow-same-origin" 用于加载 https://third-party.com/widget.html —— 因不同源，allow-same-origin 被忽略，但暴露了配置疏漏；正确做法是去掉该 token。
立即学习“前端免费学习笔记（深入）”；
必须配合的纵深防御措施
sandbox 单独使用远远不够，需叠加以下防护：
-
referrerpolicy="no-referrer"：防止 iframe 内请求泄露来源 URL -
loading="lazy"：延迟加载非首屏 iframe，减少初始攻击面 -
srcdoc替代src：对简单静态内容（如说明卡片），直接内联 HTML，避免外部资源加载风险 - 服务端设置
X-Frame-Options: DENY或Content-Security-Policy: frame-ancestors 'none'：从源头禁止被他人嵌入，与 sandbox 形成双向防护
验证是否生效的实用方法
别靠猜测，打开浏览器控制台直接检查：
- 执行
document.querySelector('iframe').sandbox，返回DOMTokenList（如["allow-scripts", "allow-forms"]），即当前实际生效的权限列表 - 在 iframe 内控制台输入
location.origin，确认是否为"null"（未开allow-same-origin时应如此） - 尝试执行
localStorage.setItem('test', '1')后立即读取，验证是否写入成功（沙箱中即使成功，刷新后也会丢失）
不复杂但容易忽略。
