沙箱 iframe 的 document.cookie 总是空，因为 sandbox 强制 origin 为 null，使 cookie 绑定到临时匿名上下文，读写均不持久、父页不可见；即使加 allow-scripts 也无效，allow-same-origin 仅在严格同源时恢复 cookie 访问，但 dom 隔离仍强制存在。
沙箱 iframe 的 document.cookie 为什么总是空？
因为 sandbox 属性强制将 iframe 的 origin 设为 null，无论 src 是否同源。此时 document.cookie 不再指向父页的 Cookie 存储区，而是绑定到一个临时、匿名、无持久化的上下文里——读写都发生在这个隔离区，父页完全不可见，且刷新后即丢失。
常见错误现象：
- 写了
sandbox="allow-scripts"，但document.cookie = "a=1"后立即console.log(document.cookie)返回空字符串 - DevTools 的 Application → Cookies 标签页显示为空，或仅列出父页域名下的条目（不显示 iframe 自己的）
- 父页脚本执行
document.cookie完全看不到 iframe 写入的内容，反之亦然
allow-same-origin 能否恢复 cookie 访问？
能，但有硬性前提：iframe 的 src 必须与父页严格同源（协议 + 域名 + 端口全一致），否则该 token 被浏览器静默忽略，控制台可能只报 warning，不报 error。
实操建议：
- 检查
iframe.src：比如父页是https://app.example.com/，iframe src 必须是https://app.example.com/widget.html，不能是https://sub.example.com/或http://app.example.com/ - 不要在第三方内容上硬加
allow-same-origin：既得不到权限，又暴露配置疏忽，还可能被用于试探信任边界 - 即使满足同源 +
allow-scripts allow-same-origin，window.parent和跨 frame DOM 访问仍被 sandbox 强制禁止——DOM 隔离不可绕过
如何安全地在沙箱中持久化用户状态？
别碰 document.cookie 和 localStorage。沙箱内所有存储 API 都绑定到 null origin，本质是“一次性的临时空间”，不是真正的持久化方案。
正确做法是让父页统一托管：
- 沙箱 iframe 内通过
window.parent.postMessage()上报状态变更（如用户偏好、表单草稿） - 父页监听
message事件，校验event.origin（不能只依赖allow-same-origin） - 父页将数据存入自己的
localStorage或后端同步，再按需下发给 iframe - 调试时别信 DevTools 的 UI，直接在 iframe 控制台运行
Object.keys(document.cookie)或document.cookie.length验证真实状态
不同浏览器对沙箱 cookie 的处理差异
Safari 和 Chrome 在 DevTools 显示逻辑上不一致：Safari 的 Application 面板常把沙箱 iframe 的 Cookie 区域标为 “(inactive)”，而 Chrome 可能直接不列出；但两者在 JS 层行为一致——document.cookie 读写都受限于 null origin。
容易踩的坑：
- 用 Safari 测试时看到 “(inactive)” 就以为配置失败，其实只是 UI 提示方式不同
- 在 Chrome 里看到父页 Cookie 列表就误判 iframe 也能访问，忽略了 origin 隔离本质
- 没做
event.origin校验就接收 postMessage，导致恶意 iframe 可伪造消息冒充
真正关键的不是能不能看到 cookie，而是 origin 是否被重置为 null——这是沙箱设计的底层锚点，所有存储行为都绕不开它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
