Chrome 80及以上版本 中 Iframe 跨域 Cookie 的 Samesite 問題
新專案要嵌入之前的一個專案,而且該被嵌入專案之前提供給第三方使用,他們也是用的iframe。以前都是好的,但是現在發現要是iframe的地址和父級的地址不同源,專案登入時無法設定cookie。
一開始以為後端出問題了,後來換火狐、ie edge 都是可以的,並且其他人的Chrome也有可以用的。
並且介面設定cookie時提示:“this set-cookie didnot specify a "sameSite" attribute and was defaulted to "sameSite=Lax" and broke the same rules specified in the SameSiteLax value”。
從Chrome 51
開始,瀏覽器的Cookie
新增加了一個SameSite屬性,用來防止CSRF
攻擊和使用者追蹤。
該設定當前預設是關閉的,但在Chrome 80
之後,該功能預設已開啟。
所以當你無法使用某些網站第三方登入功能的時候,請檢視一下是否受到了該設定的影響。
- 對於使用者,快速解決方案:
方案1. 開啟Chrome
設定,將chrome://flags/#same-site-by-default-cookies
禁用,然後重啟瀏覽器。
方案2. 使用低版本瀏覽器,可選擇70版。
2. 對於開發者,解決方案:
方案1. 將SameSite
屬性值改為None
secure
屬性設定為 true
。且需要將後端服務域名必須使用https
協議訪問。方案2. 由於設定
SameSite = None
,有SCRF
風險,所以,最佳方案是用token
代替Cookie
方式作驗證。
一、CSRF 攻擊是什麼?
Cookie 往往用來儲存使用者的身份資訊,惡意網站可以設法偽造帶有正確 Cookie 的 HTTP 請求,這就是 CSRF 攻擊。
舉例來說,使用者登陸了銀行網站your-bank.com
,銀行伺服器發來了一個 Cookie。
1 Set-Cookie:id=a3fWa;
使用者後來又訪問了惡意網站malicious.com
1 <form action="your-bank.com/transfer" method="POST"> 2 ... 3 </form>
使用者一旦被誘騙傳送這個表單,銀行網站就會收到帶有正確 Cookie 的請求。為了防止這種攻擊,表單一般都帶有一個隨機 token,告訴伺服器這是真實請求。
1 <form action="your-bank.com/transfer" method="POST"> 2 <input type="hidden" name="token" value="dad3weg34"> 3 ... 4 </form>
這種第三方網站引導發出的 Cookie,就稱為第三方 Cookie。它除了用於 CSRF 攻擊,還可以用於使用者追蹤。
比如,Facebook 在第三方網站插入一張看不見的圖片。
1 <img src="facebook.com" style="visibility:hidden;">
瀏覽器載入上面程式碼時,就會向 Facebook 發出帶有 Cookie 的請求,從而 Facebook 就會知道你是誰,訪問了什麼網站。
二、SameSite 屬性
Cookie 的SameSite
屬性用來限制第三方 Cookie,從而減少安全風險。
它可以設定三個值。
Strict
Lax
None
2.1 Strict
Strict
最為嚴格,完全禁止第三方 Cookie,跨站點時,任何情況下都不會發送 Cookie。換言之,只有當前網頁的 URL 與請求目標一致,才會帶上 Cookie。
1 Set-Cookie: CookieName=CookieValue; SameSite=Strict;
這個規則過於嚴格,可能造成非常不好的使用者體驗。比如,當前網頁有一個 GitHub 連結,使用者點選跳轉就不會帶有 GitHub 的 Cookie,跳轉過去總是未登陸狀態。
2.2 Lax
Lax
規則稍稍放寬,大多數情況也是不傳送第三方 Cookie,但是導航到目標網址的 Get 請求除外。
1 Set-Cookie: CookieName=CookieValue; SameSite=Lax;
請求型別 | 示例 | 正常情況 | Lax |
---|---|---|---|
連結 | <a href="..."></a> |
傳送 Cookie | 傳送 Cookie |
預載入 | <link rel="prerender" href="..."/> |
傳送 Cookie | 傳送 Cookie |
GET 表單 | <form method="GET" action="..."> |
傳送 Cookie | 傳送 Cookie |
POST 表單 | <form method="POST" action="..."> |
傳送 Cookie | 不傳送 |
iframe | <iframe src="..."></iframe> |
傳送 Cookie | 不傳送 |
AJAX | $.get("...") |
傳送 Cookie | 不傳送 |
Image | <img src="..."> |
傳送 Cookie | 不傳送 |
設定了Strict
或Lax
以後,基本就杜絕了 CSRF 攻擊。當然,前提是使用者瀏覽器支援 SameSite 屬性。
2.3 None
Chrome 計劃將Lax
變為預設設定。這時,網站可以選擇顯式關閉SameSite
屬性,將其設為None
。不過,前提是必須同時設定Secure
屬性(Cookie 只能通過 HTTPS 協議傳送),否則無效。
下面的設定無效。
Set-Cookie: widget_session=abc123; SameSite=None
下面的設定有效
Set-Cookie: widget_session=abc123; SameSite=None; Secure
參考連結:http://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html