chrome禁止三方cookie,網站登入不了怎麼辦

福祿網路技術團隊發表於2020-09-25

背景

新版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:8000http://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請求頭,重新設定cookie
		headers.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') { // 校驗cookie
		res.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

福祿ICH·架構組 福袋

相關文章