瞭解 Cookie

Cookie 是瀏覽器中儲存的資料區塊，用來保留網站執行功能所需的狀態和其他資訊。

Rowan Merewood

注意： 本文是 SameSite Cookie 屬性異動系列的一部分，包括：

• SameSite Cookie 說明
• SameSite Cookie 食譜
• 固定的同網站

Cookie 是網站儲存在使用者電腦上的小型檔案，其中儲存的資訊會在瀏覽器和網站之間來回傳遞。

每個 Cookie 皆為鍵/值組合，以及多項屬性，以控制 Cookie 的使用時機和位置。這些屬性是用於設定到期日等設定，或指出 Cookie 只能透過 HTTPS 傳送。您可以透過 HTTP 標頭或 JavaScript 介面設定 Cookie。

Cookie 是讓網站加入持續狀態的方法之一。這些年來，他們的能力不斷成長與發展，但此平台有了一些棘手的舊版問題。為解決此問題，瀏覽器 (包括 Chrome、Firefox 和 Edge) 將調整其行為，實施更多隱私權保護預設值。

注意： 進一步瞭解 Chrome 如何保護使用者的線上隱私權，並為公司和開發人員提供實用工具，讓數位業務蓬勃發展。

Cookie 應用

假設您想在網誌上向使用者顯示「最新消息」宣傳訊息。使用者可以關閉促銷活動，短期內就不會再看到。 您可以將這項偏好設定儲存在 Cookie 中，並設為在一個月後到期 (2,600,000 秒)，並且只透過 HTTPS 傳送。這類標頭應如下所示：

Set-Cookie: promo_shown=1; Max-Age=2600000; Secure

伺服器使用 Set-Cookie 標頭設定 Cookie。

當讀者查看符合這些需求條件的網頁 (使用安全連線，且 Cookie 使用時間未滿一個月) 時，瀏覽器會在要求中傳送這個標頭：

Cookie: promo_shown=1

瀏覽器會將 Cookie 傳回 Cookie 標頭中。

您也可以使用 document.cookie 新增及讀取 JavaScript 中提供給該網站的 Cookie。當您指派到 document.cookie 時，系統會使用該金鑰建立或覆寫 Cookie。舉例來說，您可以在瀏覽器的 JavaScript 控制台中嘗試下列操作：

→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
← "promo_shown=1; Max-Age=2600000; Secure"

讀取 document.cookie 會輸出目前情境中可存取的所有 Cookie，並以半形分號分隔每個 Cookie：

→ document.cookie;
← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"

JavaScript 可透過 document.cookie 存取 Cookie。

如果您在某幾個熱門網站上試用此程式碼，就會發現大部分網站設置的 Cookie 數量遠超過三個。在大多數情況下，系統會在每次要求至該網域時傳送這些 Cookie，造成許多影響。上傳頻寬通常比使用者下載的限制還多，因此，所有傳出要求的負擔都會增加延遲時間。您設定的 Cookie 數量和大小應保守。使用 Max-Age 屬性有助於確保 Cookie 不會保留不必要的時間。

第一方和第三方 Cookie 是什麼？

警告： 瀏覽器將限制使用第三方 Cookie。如果您先前已為 Cookie 設定 SameSite=None，則需要採取額外行動。請參閱這篇文章，瞭解如何因應第三方 Cookie 限制。

如果您返回先前瀏覽過的網站，或許已註意到有些 Cookie 會出現在許多網域，而不只是您目前造訪的網站。如果 Cookie 與目前網站的網域相符 (也就是瀏覽器網址列顯示的內容)，就稱為「第一方」Cookie。同樣地，來自目前網站以外的網域 Cookie 稱為「第三方」Cookie。這個 Cookie 不是絕對標籤，但是根據使用者的情況而定。根據使用者當時所在的網站，同一個 Cookie 可以是第一方或第三方。

在同一個網頁上，Cookie 可能會來自多個不同網域。

延續上例，假設您的某篇網誌文章含有超讚的貓咪圖片，代管位置是 /blog/img/amazing-cat.png。它超棒的圖片 因此被其他人直接在網站上使用如果訪客已造訪你的網誌並擁有 promo_shown Cookie，那麼當他們在另一人的網站上查看 amazing-cat.png 時，就會將 Cookie 傳送至該圖片要求中。這對任何人來說沒有特別實用，因為 promo_shown 並未用於這位使用者網站上的任何項目，只不過是增加要求的負擔。

如果這是非預期的效果，為什麼您想要這麼做？正是這種機制可讓網站在第三方環境中使用時，能夠保留狀態。舉例來說，如果在網站上嵌入 YouTube 影片，訪客會在播放器中看到「稍後觀看」選項。如果訪客已經登入 YouTube，則第三方 Cookie 會在嵌入式播放器中提供該工作階段。也就是說，「稍後觀看」按鈕只會一次儲存影片，而不會提示他們登入，也不必離開您的網頁返回 YouTube。

系統會在造訪不同網頁時，傳送第三方情境中的 Cookie。

網路的其中一項文化財產通常預設為開放。這是為了讓許多人能在當地建立內容和應用程式的過程。然而，這也帶來了許多安全性與隱私權疑慮。跨網站偽造要求 (CSRF) 攻擊的判斷依據是 Cookie 附加至任何指定來源的要求，無論發出要求者為何。舉例來說，如果您造訪 evil.example，它就會觸發對 your-blog.example 的要求，而瀏覽器也會快樂附加相關聯的 Cookie。如果網誌未謹慎驗證這些要求，evil.example 可能會觸發動作，例如刪除貼文或新增自己的內容。

使用者也越來越清楚 Cookie 的用途，可跨多個網站追蹤活動。不過，到目前為止，還沒有方法透過 Cookie 明確說明意圖。您的 promo_shown Cookie 應只能在第一方情境中傳送，而若要將小工具嵌入其他網站的工作階段 Cookie，我們特意在該位置提供該元件的登入狀態，以便在第三方環境中提供登入狀態。

您可以設定適當的 SameSite 屬性，才能使用 Cookie 明確指出意圖。

如要找出第一方 Cookie 並設定適當的屬性，請參閱「第一方 Cookie 食譜」一文。