如何在iframe环境中访问主站点的localStorage存储内容

问题根本原因 #

localStorage受浏览器同源策略限制，是和当前执行上下文的源（协议+域名+端口）绑定的。你在iframe内部执行代码时，默认的localStorage指向的是iframe自身源对应的存储，和主站的存储完全独立隔离，因此直接读取只能拿到iframe侧的存储内容。

相关场景示意图：

对应解决方案 #

场景1：主站和iframe完全同源（协议、域名、端口全部一致） #

直接访问父窗口的localStorage对象即可，修改代码为：

console.log(Object.entries(window.parent.localStorage))

场景2：主站和iframe仅跨子域名（比如主站为a.example.com、iframe为b.example.com） #

需要先在主站和iframe的代码中都设置document.domain为共同根域名，示例：

// 主站和iframe两端都需要添加这行代码
document.domain = 'example.com'

设置完成后再通过window.parent.localStorage访问即可。

场景3：主站和iframe完全跨站 #

浏览器同源策略禁止直接跨站读取存储，只能通过postMessage的方式由主站配合返回数据：

主站侧添加监听逻辑：

window.addEventListener('message', (e) => {
  // 必须校验iframe来源，仅响应信任的域名，避免安全问题
  if (e.origin !== 'https://你的iframe实际域名') return
  if (e.data?.action === 'getMainLocalStorage') {
    e.source.postMessage({
      action: 'returnMainLocalStorage',
      data: Object.entries(localStorage)
    }, e.origin)
  }
})

iframe侧添加请求和接收逻辑：

// 向主站发送获取存储的请求
window.parent.postMessage({ action: 'getMainLocalStorage' }, 'https://你的主站实际域名')

// 监听主站返回的存储数据
window.addEventListener('message', (e) => {
  if (e.origin !== 'https://你的主站实际域名') return
  if (e.data?.action === 'returnMainLocalStorage') {
    console.log(e.data.data) // 此处即可拿到主站localStorage的键值对
  }
})

注意事项 #

• 如果iframe添加了sandbox属性，需要额外配置allow-same-origin参数才能访问父窗口上下文
• 跨站场景下没有任何绕过同源策略直接读取主站localStorage的方法，必须由主站配合做数据通信
• 使用postMessage时必须校验来源origin，避免出现XSS、数据泄露等安全问题

内容的提问来源于stack exchange，提问作者sin0x1