真正隔离需显式声明权限，如 sandbox="allow-scripts"；仅 sandbox 属性本身禁用全部能力导致白屏，非安全隔离而是直接拒止。
HTML沙箱iframe的sandbox属性怎么写才真正隔离？
只加 sandbox 属性本身是**不生效的**——它默认禁用所有能力，包括脚本、表单提交、插件、弹窗等，但如果你没显式开启任何权限，页面会直接白屏或功能瘫痪，这不是“安全隔离”，而是“直接拒止”。真正起作用的是带值的 sandbox 属性，比如 sandbox="allow-scripts allow-same-origin"。
常见错误是以为加了 sandbox 就万事大吉，结果发现内嵌的图表库报 SecurityError: Failed to read the 'cookie' property from 'Document'，或者 fetch 请求被静默拦截——因为没开 allow-scripts 或 allow-fetch（后者需配合 CORS）。
-
sandbox=""（空值）：最严格，禁用脚本、表单、插件、弹窗、localStorage、cookie 访问、top导航等 -
sandbox="allow-scripts"：允许执行脚本，但依然隔离 origin（即仍被视为 null origin），document.cookie读不到，localStorage是独立的空空间 -
sandbox="allow-scripts allow-same-origin"：⚠️危险组合！只有当 iframe 的src是同源 URL 时才可安全启用；否则浏览器会忽略allow-same-origin，并抛出警告 - 不支持
allow-fetch独立开关，fetch 行为受allow-scripts控制，但跨域请求仍受 CORS 和 CORP 头限制
为什么 sandbox="allow-scripts" 后 localStorage 还是空的？
沙箱 iframe 中的 localStorage、sessionStorage、IndexedDB 全部被强制绑定到一个**临时、隔离、无持久化的匿名 origin**，哪怕你开了 allow-scripts，也跟父页完全无关。这不是 bug，是设计使然。
典型表现：你在沙箱里调用 localStorage.setItem('a', '1') 不报错，但刷新 iframe 后读不到；父页也永远访问不到这个值；DevTools 的 Application 面板里，该 iframe 对应的 storage 显示为空或标为 “(inactive)”。
立即学习“前端免费学习笔记（深入）”；
- 无法通过任何方式绕过这个隔离——包括 postMessage 传递数据后在父页存 localStorage，那也是父页自己的空间
- 如果需要持久化，必须由父页统一管理，iframe 仅通过
window.parent.postMessage()上报状态 - 测试时别依赖 DevTools 的 “localStorage” 标签页看沙箱内容，改用控制台直接执行
localStorage.length或Object.keys(localStorage)验证
iframe sandbox 在不同浏览器中的兼容性差异
Chrome、Firefox、Edge 基本一致，但 Safari（尤其是 iOS 15–16）对 sandbox 的实现更保守：即使开了 allow-scripts，某些 Web API（如 navigator.permissions.query、Notification.requestPermission）仍直接返回 denied，且不抛异常；而 Chrome 会拒绝调用并报 DOMException。
另一个坑是 allow-popups：在 Safari 中它**不自动包含 allow-popups-to-escape-sandbox**，所以 window.open() 打开的新窗口依然被沙箱约束；Chrome 则默认赋予新开窗口相同 sandbox 权限（除非显式加 allow-popups-to-escape-sandbox）。
- 移动端 Safari 对
allow-forms支持不稳定，部分表单控件（如<input type="file">）可能直接不可点击 -
sandbox属性对srcdoc内容始终有效，但srcdoc中的 script 标签若含defer或async，在部分旧版 Edge 中会被忽略 - 不要依赖
document.domain来“修复”沙箱跨域问题——沙箱 iframe 的 origin 是 null，document.domain在其中被禁用，设值会抛错
如何验证沙箱环境是否真的隔离了真实数据？
最可靠的验证不是看页面有没有报错，而是主动探测关键敏感接口的行为是否被阻断：
- 执行
document.cookie→ 应返回空字符串（不是 undefined），且赋值无效 - 执行
localStorage.getItem('xxx')→ 返回 null，且localStorage.length === 0 - 执行
fetch('/api/user', { credentials: 'include' })→ 若未开allow-scripts，直接报错；若开了但没allow-same-origin，credentials 自动降级为'omit'，服务端收不到 cookie - 尝试
window.top.location.href = 'https://evil.com'→ 应触发 SecurityError，而非跳转
这些检查最好封装成一个 isSandboxed() 工具函数，在 iframe 加载后立即运行，比依赖文档描述更可靠。沙箱不是开关，是契约——你开了什么，就只能用什么；没开的，连试探的余地都没有。
