第一方 Cookie 食譜

瞭解如何設定第一方 Cookie,確保安全性、跨瀏覽器相容性,並將第三方 Cookie 淘汰後中斷的機率降到最低。

Milica Mihajlija
Milica Mihajlija

Cookie 可以是第一方或第三方,與使用者所處情境相關。取決於使用者當時所在的網站如果 Cookie 的可註冊網域和配置符合目前的頂層網頁 (也就是瀏覽器網址列中顯示的內容),系統會將 Cookie 視為與網頁來自「同一個網站」,通常又稱第一方 Cookie。

目前網站以外網域的 Cookie 通常稱為第三方 Cookie

舉例來說,如果您設定的 Cookie 不會用於跨網站 (例如用來管理網站上的工作階段),且該 Cookie 從未用於跨網站 iframe,則系統一律會在第一方情境中使用該 Cookie。

根據預設,Cookie 可在各個網站之間共用、透過 JavaScript 存取,並透過 HTTP 連線傳送,因此有一些隱私權和安全性風險。儘管我們會持續努力改善預設行為,但透過 Privacy Sandbox 和其他提案 (例如來源繫結 Cookie) ,現在還有許多功能可以針對 Cookie 設定其他屬性。

建議您採用以下設定,確保大多數第一方 Cookie 的安全性和跨瀏覽器相容性。並且提供安全的基礎,讓您只在必要時進行調整,開啟權限。本文還針對某些特定用途提供不同的方案變化版本。

食譜

Set-Cookie:
__Host-cookie-name=cookie-value;
Secure;
Path=/;
HttpOnly;
Max-Age=7776000;
SameSite=Lax;
詳細資料

Host 是選填的前置字元,某些屬性為必要屬性,其他屬性則禁止使用:

  • Secure 必須存在
  • 必須省略「Domain
  • Path 須為 /

新增 Host 後,您就可以依賴瀏覽器檢查這些屬性是否與 __Host 規則一致,如果沒有,就會拒絕 Cookie。

Secure 只允許透過 HTTPS 連線傳送 Cookie,避免在不安全的網路上竊取 Cookie。如果尚未將網站完全遷移至 HTTPS,請優先處理。

Domain 屬性會指定哪些主機可以接收 Cookie。如果省略這個旗標,則會將 Cookie 限制在目前的文件主機內 (不含子網域):example.com 的 Cookie 會在每次傳送至 example.com 的要求時一併傳送,但不會在傳送至 images.example.com 的要求時產生。如果您在不同的子網域上執行不同的應用程式,這麼做可降低某個遭入侵網域上允許一門門口的風險。

Path 表示要求的網址中必須存在的路徑,瀏覽器才能傳送 Cookie 標頭。如果設定 Path=/,表示系統會將 Cookie 傳送至該網域的所有網址路徑。搭配使用 DomainPath=/ 時,系統會盡可能將 Cookie 繫結至來源,因此運作方式與其他用戶端儲存空間 (例如 LocalStorage) 類似,不必擔心 example.com/a 會收到不同的 example.com/b 值。

HttpOnly 屬性可以限制 JavaScript 存取權,藉此防範網站上的惡意第三方指令碼。這會讓 Cookie 只會在要求標頭中傳送,並使 Cookie 無法使用 document.cookie,導致 JavaScript 無法使用。

Max-Age 會限制 Cookie 的生命週期,因為瀏覽器工作階段可持續運作很長,而且你也不希望過時的 Cookie 持續出現。這個選項適用於短期的 Cookie,例如使用者工作階段或較短的 Cookie,例如用來提交表單的權杖。Max-Age 定義為秒數,在上一個範例中設為 7776000 秒,也就是 90 天。這是合理的預設值,可以視實際用途加以變更。

SameSite=Lax 會限制 Cookie 只會在相同網站要求時傳送。也就是說,請求會符合目前的瀏覽環境,也就是使用者目前造訪的頂層網站,並顯示在位置列中。SameSite=Lax 是新式瀏覽器的預設選項,但建議您指定此屬性,使其在各種瀏覽器 (可能擁有不同預設值) 上的相容性。明確將 Cookie 明確標示為相同網站,您就只會使用第一方環境,而當第三方 Cookie 停用後,該 Cookie 還不需變更。

如要進一步瞭解不同的 Cookie 屬性,請參閱 MDN 的 Set-Cookie 說明文件

如果你的網站含有子網域,並想在所有子網域中建立一個工作階段,則 Host 前置字元的限制可能會過於嚴格。舉例來說,news.site 中可以有多個主題 (例如 finance.news.sitesport.news.site) 的子網域,而您想針對所有主題建立一個使用者工作階段。此時,請使用 __Secure 前置字元,而非 __Host,並指定 Domain

食譜

Set-Cookie:
__Secure-cookie-name=cookie-value;
Secure;
Domain=news.site;
Path=/;
HttpOnly;
Max-Age=7776000;
SameSite=Lax;
詳細資料

Secure 是選填的前置字元,斷言的要求少於 Host:您只需透過 Secure 屬性設定 Cookie。

雖然系統不會透過跨網站子要求傳送 SameSite=Lax Cookie (例如載入第三方網站上的內嵌圖片或 iframe),但當使用者前往來源網站 (例如從其他網站的連結時),這些 Cookie 就會傳送。

您可以利用 SameSite=Strict 進一步限制 Cookie 存取權,並禁止連同第三方網站發出的要求一併傳送 Cookie。如有 Cookie 必須與初始瀏覽功能有關 (例如變更密碼或購物),則適合使用這類 Cookie。

食譜

Set-Cookie:
__Host-cookie-name=cookie-value;
Secure;
Path=/;
HttpOnly;
Max-Age=7776000;
SameSite=Strict;