Cookie 是儲存在瀏覽器中的一小段資料,用於儲存網站執行功能所需的狀態和其他資訊。
Cookie 是網站在使用者電腦上儲存的小型檔案,其中儲存的資訊會在瀏覽器和網站之間來回傳送。
每個 Cookie 都是鍵/值組合,並搭配多個用來控制 Cookie 使用時機和位置的屬性。這些屬性可用來設定到期日,或指出 Cookie 應僅透過 HTTPS 傳送。您可以在 HTTP 標頭或透過 JavaScript 介面設定 Cookie。
Cookie 是在網站上加入永久狀態的方法之一。這些功能多年以來不斷發展,但也為平台留下了一些棘手的舊問題。為解決這個問題,瀏覽器 (包括 Chrome、Firefox 和 Edge) 會變更行為,以便強制採用更能保護隱私權的預設值。
Cookie 的應用實例
假設您想在網誌中向使用者顯示「最新消息」宣傳內容。使用者可以關閉促銷活動,一陣子就不會再看到。 您可以將該偏好設定儲存在 Cookie 中,並將其設定為在 1 個月後 (2,600,000 秒) 到期,且只能透過 HTTPS 傳送。該標頭會如下所示:
Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
讀者瀏覽符合這些條件的網頁時 (網頁連上的是安全連線,且 Cookie 存在不到一個月),他們的瀏覽器會在要求中傳送這個標頭:
Cookie: promo_shown=1
您也可以使用 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"
如果你在部分熱門網站上試試這個方法,就會發現大多數網站設定的 Cookie 遠遠不只三個。在大部分情況下,這些 Cookie 會在每個要求傳送至該網域時傳送這些 Cookie,而這會產生許多影響。對於使用者而言,上傳頻寬通常比下載頻寬受到更多限制,因此所有傳出要求的額外負擔會導致首次位元組的延遲時間增加。請特別留意您設定的 Cookie 數量和大小,使用 Max-Age
屬性,確保 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。
網路的其中一項文化特性,是預設開放使用。這也是許多人能在該平台上建立自己的內容和應用程式的原因之一。不過,這也帶來許多安全性和隱私權疑慮。跨網站要求偽造 (CSRF) 攻擊會利用以下事實:無論誰發出要求,Cookie 都會附加至任何要求特定來源的請求。舉例來說,如果您造訪 evil.example
,系統就會觸發對 your-blog.example
的請求,而瀏覽器會隨即附加相關 Cookie。如果網誌未謹慎驗證這些要求,evil.example
就可能會觸發刪除文章或新增內容等動作。
使用者也越來越瞭解 Cookie 如何用於追蹤他們在多個網站上的活動。不過,目前還沒有任何方法可以透過 Cookie 明確表示您的意圖。promo_shown
Cookie 應僅在第一方使用情境中傳送,而用於在其他網站上嵌入的小工具工作階段 Cookie 則是刻意用於在第三方使用情境中提供登入狀態。
您可以設定適當的 SameSite 屬性,以使用 Cookie 明確指出您的意圖。
如要識別您的第一方 Cookie 並設定適當屬性,請參閱「第一方 Cookie 方案」一文。