瞭解如何設定第一方 Cookie,確保安全性、跨瀏覽器相容性,並在第三方 Cookie 逐步淘汰後,盡可能減少發生錯誤的可能性。
根據使用者當時造訪的網站,Cookie 可能屬於第一方或第三方。如果 Cookie 的可註冊網域和配置文件與目前的頂層網頁相符,也就是瀏覽器網址列中顯示的內容,系統就會將 Cookie 視為來自該網頁的同網站,通常稱為第一方 Cookie。
目前網站以外的網域所產生的 Cookie,通常稱為第三方 Cookie。
第一方 Cookie 的最佳配方
舉例來說,如果您設定的 Cookie 不會用於跨網站 (例如用來管理網站上的工作階段),且該 Cookie 從未用於跨網站 iframe,則系統一律會在第一方情境中使用該 Cookie。
根據預設,Cookie 可在各個網站之間共用、透過 JavaScript 存取,並透過 HTTP 連線傳送,因此可能會帶來一些隱私權和安全性風險。我們目前正透過 Privacy Sandbox 和其他提案 (例如origin-bound cookies) 改善預設行為,但您現在也可以透過設定 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 會傳送至該網域的所有網址路徑。不使用 Domain
和 Path=/
的組合可讓 Cookie 盡可能緊密地繫結至來源,因此其行為與其他用戶端儲存空間 (例如 LocalStorage
) 相似,不會造成 example.com/a
可能接收不同於 example.com/b
的值的混淆。
HttpOnly
屬性可限制 JavaScript 存取權,為網站提供額外防護,避免遭到第三方惡意指令碼入侵。這可讓 Cookie 僅在要求標頭中傳送,並讓 JavaScript 無法使用 document.cookie
。
Max-Age
會限制 Cookie 的生命週期,因為瀏覽器工作階段可持續運作很長,而且你也不希望過時的 Cookie 持續出現。這類 cookie適合短期 cookie,例如使用者工作階段,甚至是更短的 cookie,例如表單提交的權杖。Max-Age
是以秒為單位定義,在前述範例中,其值設為 7776000 秒,即 90 天。這是合理的預設值,您可以視用途而變更。
SameSite=Lax
會限制 Cookie 只在相同網站要求時傳送。也就是說,請求會符合目前的瀏覽環境,也就是使用者目前造訪的頂層網站,並顯示在位置列中。SameSite=Lax
是新式瀏覽器的預設值,但建議您指定這個值,以便在不同瀏覽器 (可能有不同的預設值) 之間保持相容性。明確將 Cookie 標示為僅限同網站,即可將 Cookie 限制在第一方內容中,且在第三方 Cookie 消失時,您不必變更該 Cookie。
如要進一步瞭解各種 Cookie 屬性,請參閱 Set-Cookie
MDN 說明文件。
含有子網域的網站適用的第一方 Cookie 範例
如果您的網站有子網域,且您想要在所有子網域中建立一個工作階段,Host
前置字串可能會過於嚴格。舉例來說,news.site
可能會有主題子網域,例如 finance.news.site
和 sport.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。
限制來自第三方網站的請求對第一方 Cookie 的存取權
雖然 SameSite=Lax
Cookie 不會透過跨網站子請求傳送 (例如在第三方網站上載入嵌入式圖片或 iframe),但會在使用者前往原始網站時傳送 (例如點選來自其他網站的連結)。
您可以利用 SameSite=Strict
進一步限制 Cookie 存取權,並禁止連同第三方網站發出的要求一併傳送 Cookie。如果您有與功能相關的 Cookie,而該功能一律會在初始導覽後方執行 (例如變更密碼或購物),這項功能就非常實用。
食譜
Set-Cookie:
__Host-cookie-name=cookie-value;
Secure;
Path=/;
HttpOnly;
Max-Age=7776000;
SameSite=Strict;