localStorage不能跨域,但可通过iframe+postMessage实现安全跨域通信:A域嵌入B域iframe,双方校验origin后用postMessage传递数据并由目标域自行存取localStorage。

不能直接跨域访问 localStorage,这是浏览器强制执行的同源策略限制。但可以通过 iframe 搭建通信桥梁,配合 postMessage 在不同域名间安全传递数据,再由目标域自行存取本地 storage —— 这不是“破除”同源策略,而是绕过它,符合规范且被广泛采用。
核心原理:iframe 是目标域的“合法入口”
在 A 域(如 https://a.com)中嵌入一个指向 B 域(如 https://b.com/share.html)的隐藏 iframe。这个 iframe 加载后,就运行在 B 域上下文中,能自由读写 B 域的 localStorage。A 域无法直接操作 B 域 storage,但可以和这个 iframe 通信 —— 这就是桥接的关键。
标准实现步骤(双向可选)
- A 域页面创建隐藏 iframe,
src指向 B 域专用通信页(如/share.html) - A 域监听 iframe 的
load事件,确保 iframe 已就绪后再发postMessage - B 域的
share.html监听message事件,校验event.origin后执行读/写 localStorage 操作 - B 域将结果(如
localStorage.getItem('token'))通过event.source.postMessage()回传给 A 域 - A 域监听全局
message,只接收来自可信 origin 的响应,避免 XSS 风险
关键细节与避坑提醒
iframe 必须显式等待 load 完成:未加载完成就调用 contentWindow.postMessage 会报错或静默失败。
origin 校验不可省略:B 域必须检查 event.origin === 'https://a.com',A 域也需校验回传来源为 'https://b.com',否则可能被恶意站点劫持。
专用通信页更轻量安全:B 域不要用主页面做桥接,单独建 share.html,里面只留 message 监听逻辑,无业务代码、无外部资源,减少攻击面。
不支持同步读取:整个过程是异步的,A 域需用 Promise 封装或配合 loading 状态处理等待逻辑。
典型应用场景
- 单点登录(SSO):主站登录后,把 token 推送至多个子系统域的 iframe,各系统存入自身 localStorage
- 微前端子应用状态同步:基座应用通过 iframe 桥向不同域的子应用下发用户偏好、主题配置等
- 跨域分析埋点共享:广告平台将设备 ID 写入合作方域名下的 localStorage,用于归因追踪











