鑒權(quán)方式

1 cookie

cookie 是服務(wù)器發(fā)送到用戶瀏覽器并保存在本地的一小塊數(shù)據(jù)，它會在瀏覽器下次向同一服務(wù)器再發(fā)起請求時被攜帶并發(fā)送到服務(wù)器上。

服務(wù)端通過響應(yīng)頭set-cookie將session信息放入瀏覽器cookie

客戶端在請求中將cookie信息放入請求頭

2 jwt (JSON Web Token)

服務(wù)端生成token， 通過接口等發(fā)送給客戶端

客戶端將token存在本地(如localStorage)，然后在請求時通過請求頭帶入

限制

1 cookie HttpOnly

無法通過js腳本讀寫cookie

2 Chrome 80 版本后的安全策略

Chrome 80.0中將SameSite的默認(rèn)值設(shè)為Lax,對現(xiàn)有的Cookie使用有什么影響?

如果 SameSite 值是 Lax, 那么在發(fā)送同站請求的時候會帶上 Cookie。

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

解決

1 針對httponly

無解

2 針對Chrome Cookie策略

手動修改setcookie信息，samesite設(shè)置為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);