當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

chrome禁止三方cookie，网站登录不了怎么办

發布時間：2023/12/4 编程问答 57 豆豆

生活随笔收集整理的這篇文章主要介紹了 chrome禁止三方cookie，网站登录不了怎么办小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

背景

新版chrome(80+)瀏覽器默認屏蔽所有三方cookie已經不是什么新聞了，具體原因這里不去深究，有大量相關文章介紹，由于目前許多網站都依賴三方cookie，因此該特性的推出還是造成了一些的影響，比如收集用戶信息的廣告商，而且主流的瀏覽器都跟進chrome的策略，已經成為了既定事實，本篇文章主要聚焦于各種解決方案，大家可以針對自身情況采用不同的解決辦法。

限制說明

SameSite

cookie新增的屬性，取值包括：Lax(默認),None,Strict

1.None?：將關閉SameSite屬性，前提是必須同時設置Secure屬性（Cookie 只能通過 HTTPS 協議發送），否則無效；

2.Strict?：嚴格模式，完全禁止第三方 Cookie，跨站點時，任何情況下都不會發送 Cookie。換言之，只有當前網頁的 URL 與請求目標一致，才會帶上 Cookie；

3.Lax?：規則稍稍放寬，大多數情況也是不發送第三方 Cookie，但是導航到目標網址的 Get 請求除外，具體可參考文末鏈接【1】；

總數所述，要解決我們的問題，要么都是同一域名，一勞永逸，要么采用https協議+SameSite=none，或者不用新版瀏覽器，除此之外，好像也沒有什么辦法了(如果有，請告訴我-_-)。

解決方案

1.chrome設置

這種方式比較簡單，手動禁用瀏覽器的限制功能，可參考文末鏈接【2】：

2.使用低版本瀏覽器

這也是一種解決方式，但是不推薦；

3.https協議 + SameSite=None

這主要依賴運維和后端處理了，但是這種方式在以后新版瀏覽器中可能會失效，因為過兩年瀏覽器將全面禁止三方cookie，到時候怎么設置都不起作用了；

4.代理服務

如果上面的方式都不滿足，可以考慮采用node作為請求-應答的中間層，大體設計如圖：

前端項目和代理服務位于同一個服務器，協議和域名一致，只是端口不同而已，為什么要這么設計呢，便于cookie共享，?因為cookie是不區分協議和端口的，因此只要域名(或者ip)一致，那么在同一臺電腦上就可以讀取同域名下的cookie?。
還需要說明的一點就是跨域問題是瀏覽器的安全策略，對于代理服務和后端服務來說就沒有跨域一說了，而是進程間的通信。
接下來我們實現一個比較簡單的三方cookie請求示例，其中各個服務的訪問地址如下(都是本地模擬，因此代理和后端服務的ip一致，而真實情況往往不同)：
前端項目:?http://127.0.0.1:8000
node代理服務:?http://127.0.0.1:8001
后端服務:?http://127.0.0.1:8002

示例演示與流程

1.登錄驗證

首先需要輸入正確的用戶信息獲取cookie，這里我們使用iframe+postmessage的方式實現跨域登錄請求，流程分為：
1.訪問http://127.0.0.1:8000,打開登陸界面，輸入用戶名和密碼
2.點擊登錄，登錄頁面通過postMessage將登錄信息發送給http://127.0.0.1:8001頁面，這個頁面獲取登錄信息后調用http://127.0.0.1:8001/login登錄接口
3.請求到node代理服務后端，然后發起對真正的服務后端請求，然后將后端服務的響應返回給前端頁面
4.如果校驗成功，響應頭會攜帶Set-Cookie信息，在http://127.0.0.1:8001的域下寫入cookie，同時http://127.0.01:8000也會寫入同樣的cookie

2.cookie讀取

成功登錄之后，在http://127.0.0.1:8000和http://127.0.0.1:8001都保存有cookie，實現了共享，可以通過document.cookie獲取，如果服務端返回的cookie是httponly，這時可以在代理服務層將這個屬性去掉就可以讀取了。

3.查詢數據

發起信息查詢時，需要攜帶登陸成功后設置的cookie，這里就不通過iframe+postMessage的方式了，直接調用8001的接口服務，但是要注意一點的就是，?由于是跨域的腳本請求，因此是不會自動攜帶cookie信息的(即便是在客戶端可以實現cookie共享)?，如果設置withcredentials相關屬性，則還是三方cookie跨域的問題，是不容許攜帶cookie的，因此我們需要手動設置一個請求頭?_cookie(cookie前面加了個下劃線前綴)?，將cookie帶上去。
8001上的代理獲取到查詢請求時，解析請求頭的_cookie參數，然后重新設置請求頭的cookie參數，再發送給真正的后端服務接口，這時候就可以實現cookie的校驗了。

4.代碼實現

文件結構圖

1.) 前端項目

<body><iframe src="http://127.0.0.1:8001"></iframe> <div><label>姓名：</label><input type="text" id="name" /><br><label>密碼：</label><input type="password" id="pass"><br><button id="btn-login">登錄</button></div></body><script type="text/javascript">var proxyHost = "http://127.0.0.1:8001";window.onload = function() {window.addEventListener("message", receiveMessage, false);document.querySelector('#btn-login').addEventListener('click', function login() {window.frames[0].postMessage({ // 發送跨域登錄請求到iframe頁面url: '/login',payload: {name: document.querySelector('#name').value,pass: document.querySelector('#pass').value,}}, proxyHost);}, false);}function receiveMessage(event) {if (event.origin !== proxyHost) {return;}if (event.data.code === 0) { // 登錄成功fetchUser();}}function fetchUser() { // 查詢用戶信息$.ajax({type : "POST",contentType: "application/json",url : proxyHost + "/fetchUser",headers: {_cookie: document.cookie, // 自定義請求頭_cookie},success : function(result) {console.log('fetchUser success:', result);},error : function(e){console.log('fetchUser error:', e);}});}</script>

2.) node代理服務

---`http://127.0.0.1:8001`---<script type="text/javascript">var appHost = "http://127.0.0.1:8000";function login(event) { // 調用代理服務登錄接口$.ajax({type : "POST",contentType: "application/json",data: JSON.stringify(event.data.payload),url : "/login",success : function(result) {event.source.postMessage(result, event.origin); // 調用成功，發送返回數據給用戶頁面},error : function(e){event.source.postMessage(e, event.origin);}});}function receiveMessage(event) {if (event.origin !== appHost) {return;}if (event.data.url === '/login') {login(event);}}window.addEventListener("message", receiveMessage, false);</script>---代理服務腳本---......const CORS_HEADER = {'Access-Control-Allow-Origin': 'http://127.0.0.1:8000','Access-Control-Allow-Headers': 'Content-Type, _cookie','Access-Control-Allow-Credentials': 'true',};......function sendProxyRequest(req, res) {const { method, headers, url } = req;const chunks = [];if(Object.hasOwnProperty.call(headers, '_cookie')) { // 包含自定義_cookie請求頭，重新設置cookieheaders.cookie = headers._cookie;}req.on('data', (chunk) => {chunks.push(chunk);});req.on('end', () => {const request = http.request({ // 發送請求到后端服務host: '127.0.0.1',port: 8002,path:url,method,headers,}, (response) => {res.writeHead(response.statusCode, {...CORS_HEADER,...response.headers,});response.pipe(res);});request.end(Buffer.concat(chunks).toString());});}

3.) 后端服務

......const { method, headers, url } = req;const _method = method.toLowerCase();if (url === '/login' && _method === 'post') { // 登錄驗證const chunks = [];req.on('data', (chunk) => {chunks.push(chunk);});req.on('end', () => {const result = {code: -1,message: 'login fail',};const resHeaders = {'Content-Type': 'text/json',};const { name, pass } = JSON.parse(Buffer.concat(chunks).toString());if (name === '123' && pass === 'abc') { // 這里只校驗123&abc這種情況result.code = 0;result.message = 'login success';resHeaders['Set-Cookie'] = `sid=abc; Max-Age=${getCookieExpires()};`; // 設置cookie}res.writeHead(200, resHeaders);res.end(JSON.stringify(result));});......return;}if (url === '/fetchUser' && _method === 'post') { // 用戶信息查詢if (req.headers.cookie === 'sid=abc') { // 校驗cookieres.writeHead(200, {'Content-Type': 'text/json',});......} else {res.writeHead(401);res.end();}return;}

總結

第四種方法可以不修改后端服務，微調前端項目即可，因此對于現有項目改造成本較低，但是需要維護一個node服務代理，上面的示例演示了http協議，對于https站點，只需要稍微修改下node代理服務即可(https模塊+根證書)，最后再說一點，在前后端分離模式下，開發過程中遇到這樣的問題，可以設置webapck的服務代理，具體可參考資料【4】，本文就講到這里，大家如果有更好的解決方案，歡迎留言交流。

參考資料
【1】http://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html
【2】https://www.cnblogs.com/Summer6/p/11671204.html
【3】https://juejin.im/post/6844904128557105166
【4】https://www.yuque.com/mdtvv0/myv5bw/es2oeo

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的chrome禁止三方cookie，网站登录不了怎么办的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Git 图形化操作之合并提交记录
下一篇：初识ABP vNext（11）：聚合根、