iframe中新开窗口不会携带sessionStorage跟localStorage

你是否遇到了localStorage不共享的情况？sessionStorage不在原来页面的clone基础上？

场景

主项目在域名main.cn中用iframe的方式嵌入其他系统，比如A系统a.domain.cn以及B系统b.domain.cn等。A，B系统通过监听postmessage方式获取主项目的用户信息存储在sessionStorage中，来让A，B系统的鉴权。但是A，B系统中通过window.open 打开的页面（同源）都因为获取不到sessionStorage而鉴权不成功，而导致不可以正常加载页面

方案汇总

一、给window.open的页面发送postMessage通信

1. 修改window.open方法，给window.open的页面发送postMessage通信

export const windowOpen = (url: string, windowName = '') => {
    const target = window.open(
      url,
      windowName,
      'toolbar=no'
    );
    if(target){
      // 不要直接postMessage，不然target接收不到，因为那个时候页面还没有加载
      target.addEventListener('DOMContentLoaded',()=>{
        target.postMessage({
          token: '鉴权信息'
        },location.origin)
      }) 
    }
  };

2. 监听message事件

  window.addEventListener('message', (e) => {
    console.log('postmessage收取到信息', e.data)
    sessionStorage.setItem('token', e.data.token)
    if(e.origin == location.origin){
      // 重新加载页面
      window.location.reload()
    }
  });

3. 优化下，window.open是先进入login页面再跳转到目标页面，直接空白而不是进入login页面。这跟JS的event loop有关，event loop是在脚本执行后才开始轮询

  const RequireAuth = ({ children }: { children: JSX.Element }) => {
  
    const token = sessionStorage.getItem('token');
    const location = useLocation();

    if (!token && window.opener) {
      // 解决浏览器版本升级后，iframe嵌入的形式中window.open不会携带原本的sessionStorage信息导致跳转到login页面 优化为空白页面
      return ""
     }
    
    if (!token) {
      return <Navigate to="login" state={{ from: location }} replace />;
    }
    return children;
  };
  export default RequireAuth;

二、改为localStorage的存储

心想sessionStorage不共享，localStorage总共享吧

修改后发现window.open的页面还是没办法正常加载，localStorage原来也不共享了。我在思索这里面的原因是主项目跟iframe内嵌页面是跨域的。window.open打开的页面是否跨域不取决于内嵌页面，而在于主项目，所以有跨域了

最后才发现可以直接window.opener.localStorage.getItem(key)去获取iframe内嵌页面的localStorage

 if(window.opener){
    return window.opener.localStorage.getItem('token');
  }

PS：

localhost的访问形式。localStorage是共享的，sessionStorage是会在原来的基础上

非localhost的域名，localStorage是互不影响的，sessionStorage不复制

PS： 盲猜？？？浏览器对localhost的形式跨域限制比较宽容？？

三、最终解决 直接获取window.opener.sessionStorage

export const getSessionStorageValue = function (key: string) {
  const val = sessionStorage.getItem(key)
  if(val){
    return val;
  }
  if(window.opener){
    // fix: iframe下window.open不会携带window.opener的sessionStorage信息
    return window.opener.sessionStorage.getItem(key);
  }
  return ""
};

总结

• sessionStorage跟localStorage都遵从同源策略
• main.cn系统中以iframe的形式嵌入B系统（b.domain.cn），在iframe中打开B系统的页面a.html，window.open('/a')。会被浏览器认为不同源，从而导致sessionStorage没有从iframe克隆过来，localStorage不共享
• window.open打开的如果是同源页面，会返回一个WindowProxy对象，可以访问原本的window的信息，可以获取localStorage，sessionStorage
• 通过window.opener可以获取到原本窗口的引用。window.open跟a标签且rel="noopener"的页面
• localhost模式开发跟直接a.domain.cn的开发模式，浏览器对sessionStorage跟localStorage的处理有差异性

原文链接：https://juejin.cn/post/7358672039086407732 作者：Elsa