跨域名共享登录状态问题

鉴权方式

1 cookie

cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。

服务端通过响应头set-cookie将session信息放入浏览器cookie

客户端在请求中将cookie信息放入请求头

2 jwt (JSON Web Token)

服务端生成token， 通过接口等发送给客户端

客户端将token存在本地(如localStorage)，然后在请求时通过请求头带入

限制

1 cookie HttpOnly

无法通过js脚本读写cookie

2 Chrome 80 版本后的安全策略

Chrome 80.0中将SameSite的默认值设为Lax,对现有的Cookie使用有什么影响?

如果 SameSite 值是 Lax, 那么在发送同站请求的时候会带上 Cookie。

3 cookie、localStorage、seesionStorage 等的跨域限制

解决

1 针对httponly

无解

2 针对Chrome Cookie策略

手动修改setcookie信息，samesite设置为none

3 针对storage的跨域限制

在工作项目中我使用了利用iframe postMessage传递localStorage。
登录站点

                    const iframe = document.createElement('iframe');
                    iframe.src = 'https://xxx.yyy.com';
                    iframe.style.display='none';
                    document.body.append(iframe);
                    // 使用postMessage()方法将token传递给iframe
                    setTimeout(() => {
                        // eslint-disable-next-line no-console
                        console.log('posted');
                        iframe.contentWindow.postMessage(
                           token,
                            'https://xxx.yyy.com',
                        );
                    }, 4000);
                    setTimeout(() => {
                        iframe.remove();
                    }, 6000);

被传值站点

          window.addEventListener('message', e => {
            if (e.source != window.parent) { return; }
            console.log(e.data);
            localStorage.setItem('task', e.data);
        }, false);