存储分区、第三方与隐私

本节在不同顶层站点嵌入同一个第三方页面，记录 Cookie、Storage 和顶层 origin，区分同源与存储分区。

console.log(location.origin, document.cookie, localStorage.getItem('demo'))
localStorage.setItem('demo', String(Date.now()))

同一第三方源在不同顶层站点中的存储键可能不同；实验记录必须带上顶层站点和嵌入源，不能只记录 iframe 自己的 origin。

机制拆解

隐私边界同时受 origin、顶层站点、Cookie 属性和浏览器存储分区影响。嵌入同一第三方源不保证共享 localStorage 或 Cookie；实验必须记录顶层站点、嵌入源和浏览器策略。

边界与失败路径

• 所有权：监听器、observer、worker、连接、缓存和焦点都有创建者与释放时机；页面隐藏、路由离开和元素移除时都要验证。
• 宿主差异：SSR、Web Worker、Shadow DOM、跨文档、跨源和辅助技术不会共享同一套全局对象与事件路径。
• 错误分类：取消、超时、权限拒绝、协议错误、配额不足和浏览器不支持应分别进入可观察状态。
• 安全边界：用户输入、URL、HTML、消息和持久化数据不能仅因为来自同源或类型正确就视为可信。

可运行实验

在两个不同顶层站点嵌入同一个 iframe，写入相同的 localStorage 键并记录读取结果、Cookie 属性和顶层站点；清除站点数据后重复，区分持久化与分区。

实验记录要包含运行时、输入步骤、预期输出、实际日志和未覆盖的宿主差异。

练习

1. 在两个顶层站点嵌入同一 iframe，记录相同键的读写结果。
2. 清除站点数据后重复实验，区分缓存、Cookie 和分区存储。
3. 说明 origin 相同为何仍不能推断第三方嵌入上下文共享状态。 查看本节答案

下一步

完成练习后回到本章概览，按下一篇继续；遇到跨章节故障，先回到本节的所有权与宿主边界。