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)
      }) 
    }
  };
  1. 监听message事件

  window.addEventListener('message', (e) => {
    console.log('postmessage收取到信息', e.data)
    sessionStorage.setItem('token', e.data.token)
    if(e.origin == location.origin){
      // 重新加载页面
      window.location.reload()
    }
  });
  1. 优化下,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是会在原来的基础上

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

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

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

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.opena标签且rel="noopener"的页面
  • localhost模式开发跟直接a.domain.cn的开发模式,浏览器对sessionStorage跟localStorage的处理有差异性

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

(1)
上一篇 2024年4月18日 上午10:06
下一篇 2024年4月18日 上午10:16

相关推荐

发表回复

登录后才能评论