使用iframe访问主域名localStorage失效该如何解决？

localStorage严格遵循同源策略，要求协议、域名、端口三者完全一致才能互相读写，不同子域名的存储默认完全隔离。你当前在子域名页面的iframe onLoad 回调中直接执行magicLogin，读取的是子域名站点自身的localStorage，和iframe加载的主域名站点存储没有关联，因此无法拿到预期数据。

推荐使用postMessage跨上下文通信实现数据传递，改动量小且安全性可控，步骤如下：

1. 调整主域名（app.appname.io）站点代码，新增消息监听逻辑，收到可信请求后读取自身localStorage并回传登录状态

// app.appname.io 全局增加以下代码
window.addEventListener('message', (event) => {
  // 生产环境替换为你的实际子域名地址，仅响应可信来源请求
  if (event.origin !== 'http://app.subdomain.appname.io') return
  if (event.data === 'getLoginStatus') {
    const loginStatus = !!localStorage.getItem('isCaseworkerLoggedIn')
    event.source.postMessage({
      type: 'loginStatus',
      data: loginStatus
    }, event.origin)
  }
})

2. 调整子域名（app.subdomain.appname.io）站点的登录逻辑，iframe加载完成后主动向主域名iframe发请求，接收回传的状态后再执行登录操作

// app.subdomain.appname.io 调整后代码
const magicLogin = () => {
  const iframe = document.querySelector('iframe')
  // 向iframe内的主域名站点发请求要登录状态，第二个参数生产环境替换为实际主域名
  iframe.contentWindow.postMessage('getLoginStatus', 'http://app.appname.io')
}

// 新增消息监听，接收主域名回传的登录状态
window.addEventListener('message', (event) => {
  // 生产环境替换为实际主域名地址，校验发送方可信
  if (event.origin !== 'http://app.appname.io') return
  if (event.data?.type === 'loginStatus' && event.data.data) {
    caseworkerLogin()
  }
})

3. 本地测试时注意把origin校验值替换为你实际的本地测试地址，比如主站是http://app.localhost:3000，子站是http://app.subdomain.localhost:3001的话，对应修改校验规则即可。

如果两个站点协议、端口完全一致，仅二级域名不同，也可以通过统一设置document.domain实现上下文打通，在两个站点的全局都添加一行代码：

document.domain = 'appname.io'

该方案改动量更小，但适用场景有限，安全性弱于postMessage方案，更推荐优先使用第一种方案。

• 所有postMessage交互必须做origin校验，避免恶意站点发起请求泄露数据
• 生产环境要保证两个站点协议一致，不要http和https混用
• 不要直接在父页面操作iframe的localStorage，所有主域名存储的读写操作必须在iframe内部执行

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