鑒權(quán)方式

1 cookie

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

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

客戶端在請(qǐng)求中將cookie信息放入請(qǐng)求頭

2 jwt (JSON Web Token)

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

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

限制

1 cookie HttpOnly

無法通過js腳本讀寫cookie

2 Chrome 80 版本后的安全策略

Chrome 80.0中將SameSite的默認(rèn)值設(shè)為L(zhǎng)ax,對(duì)現(xiàn)有的Cookie使用有什么影響?

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

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

解決

1 針對(duì)httponly

無解

2 針對(duì)Chrome Cookie策略

手動(dòng)修改setcookie信息，samesite設(shè)置為none

3 針對(duì)storage的跨域限制

在工作項(xiàng)目中我使用了利用iframe postMessage傳遞localStorage。
登錄站點(diǎn)

                    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);

被傳值站點(diǎn)

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