每個 Cookie 都包含鍵/值組合,以及多項屬性,可控制 Cookie 的使用時間和地點。
導入 SameSite
屬性 (定義於 RFC6265bis) 後,您就能宣告 Cookie 是否僅限於第一方或同網站情境。請務必瞭解這裡的「網站」確切含義。
網站是由網域字尾和網域中位於字尾前的部分組成。舉例來說,www.web.dev
網域是 web.dev
網站的一部分。
重要字詞:如果使用者位於 www.web.dev
,並要求從 static.web.dev
取得圖片,這就是同網站要求。
公用尾碼清單會定義哪些網頁屬於同一網站。這不僅取決於頂層網域 (例如 .com
),
也可能包含 github.io
等服務。這樣一來,your-project.github.io
和 my-project.github.io
就會視為個別網站。
重要術語:如果使用者位於 your-project.github.io
,並從 my-project.github.io
要求圖片,這就是跨網站要求。
使用 SameSite
屬性宣告 Cookie 用途
Cookie 的 SameSite
屬性提供三種不同的方式來控管這項行為。您可以選擇不指定屬性,也可以使用 Strict
或 Lax
將 Cookie 限制為同網站要求。
如果將 SameSite
設為 Strict
,Cookie 只能在第一方環境中傳送,也就是 Cookie 的網站與瀏覽器網址列中顯示的網站相符時。因此,如果 promo_shown
Cookie 設定如下:
Set-Cookie: promo_shown=1; SameSite=Strict
使用者瀏覽您的網站時,系統會如預期將 Cookie 連同要求一併傳送。
不過,如果使用者是透過其他網站的連結進入您的網站,系統就不會在初始要求中傳送 Cookie。這類 Cookie 適合用於一律位於初始導覽後方的功能,例如變更密碼或購物,但對於 promo_shown
這類 Cookie 而言,限制過於嚴格。如果讀者點選連結進入網站,他們會希望系統傳送 Cookie,以便套用偏好設定。
SameSite=Lax
可讓瀏覽器在這些頂層導覽中傳送 Cookie。舉例來說,如果其他網站引用您網站的內容 (在本例中,是使用您的貓咪相片並提供文章連結,如下所示):
<p>Look at this amazing cat!</p>
<img src="https://blog.example/blog/img/amazing-cat.png" />
<p>Read the <a href="https://blog.example/blog/cat.html">article</a>.</p>
Cookie 設定為 Lax
,如下所示:
Set-Cookie: promo_shown=1; SameSite=Lax
當瀏覽器為其他人的網誌要求 amazing-cat.png
時,您的網站不會傳送 Cookie。不過,如果讀者點選連結前往網站上的 cat.html
,該要求就會包含 Cookie。
建議您以這種方式使用 SameSite
,將影響網站顯示的 Cookie 設為 Lax
,並將與使用者動作相關的 Cookie 設為 Strict
。
您也可以將 SameSite
設為 None
,表示您希望在所有情況下傳送 Cookie。如果您提供的服務會供其他網站使用,例如小工具、內嵌內容、聯盟計畫、廣告或跨多個網站的登入功能,請使用 None
確保意圖明確。

None
、Lax
或 Strict
。
不使用 SameSite 時的預設行為變更
Browser Support
SameSite
屬性廣受支援,但尚未普及。
過去,如果沒有 SameSite
,系統預設會在所有情境中傳送 Cookie,導致使用者容易受到 CSRF 攻擊,或在無意間洩漏資訊。為鼓勵開發人員聲明意圖並提供更安全的使用者體驗,IETF 提案「逐步改善 Cookie」列出兩項重大變更:
- 沒有
SameSite
屬性的 Cookie 會被視為SameSite=Lax
。 - 含有
SameSite=None
的 Cookie 也必須指定Secure
,也就是需要安全環境。
這兩項變更都與瀏覽器回溯相容,因此無論瀏覽器是否正確實作舊版 SameSite
屬性,或是根本不支援舊版 SameSite
,都能正常運作。這項屬性可明確指出 Cookie 行為和預期用途,藉此減少開發人員對瀏覽器預設行為的依賴。不支援 SameSite=None
的用戶端應忽略這項標記。
預設為 SameSite=Lax
如果傳送 Cookie 時未指定 SameSite
屬性,瀏覽器會將該 Cookie 視為設為 SameSite=Lax
。我們仍建議您明確設定 SameSite=Lax
,讓使用者在不同瀏覽器上獲得更一致的體驗。
SameSite=None
必須安全
使用 SameSite=None
建立跨網站 Cookie 時,您也必須將這些 Cookie 設為 Secure
,瀏覽器才會接受:
Set-Cookie: widget_session=abc123; SameSite=None; Secure
如要測試 Chrome 76 以上版本的這項行為,請啟用 about://flags/#cookies-without-same-site-must-be-secure
;如要測試 Firefox 69 以上版本的這項行為,請在 about:config
中設定 network.cookie.sameSite.noneRequiresSecure
。
此外,我們也建議您盡快將現有 Cookie 更新為 Secure
。
如果您在網站上使用第三方內容服務,請確保服務供應商已更新 Cookie,並更新網站上的任何程式碼片段或依附元件,確保網站採用新的行為。
SameSite
餅乾食譜
如要進一步瞭解如何更新 Cookie,順利處理 SameSite=None
的這些異動,以及瀏覽器行為的差異,請參閱後續文章「SameSite Cookie 做法」。
感謝 Lily Chen、Malte Ubl、Mike West、Rob Dodson、Tom Steiner 和 Vivek Sekhar 提供貢獻和意見回饋。
Cookie hero image by Pille-Riin Priske on Unsplash