理解 Set-Cookie 與 Cookie 的運作機制

此文章是 FrontendMaster 上的 Advanced Web Development Quiz 課程筆記

題目

What statements are true about the following cookie header?
Select all the correct answers.

`Set-Cookie: my-cookie="value"; Domain="website.com"; Secure; HttpOnly;`

[1] This cookie is accessible from www.website.com, but not from blog.website.com
[2] This cookie can only be set client-side on the website.com domain
[3] This cookie gets treated like a session cookie
[4] This cookie will be sent when navigating from another website to www.website.com

Cookie

Cookie 一般是由伺服器傳遞給瀏覽器的資訊，並讓瀏覽器端儲存於的資訊，用來在對伺服器請求時可以一併傳送的資訊，讓原本無狀態的 HTTP 可以記錄下使用者的資訊。例如：Session 管理 (登入、購物車)、個人化（語系、主題）、追蹤分析

怎麼運作

伺服器端

伺服器透過在 header 中夾帶 Set-Cookie 的回應要求瀏覽器建立或更新 Cookie，而瀏覽器在後續請求中通常會在 header 中夾帶 Cookie 把已儲存的 Cookie 一起送回。

同一個回應可以用多個 Set-Cookie 來設定多個 Cookie。

前端 JavaScript 讀不到 Set-Cookie 這個回應標頭（它被視為 forbidden response header name）。

前端

前端則被限制只能操作沒有被標記 HttpOnly 的 Cookie，缺點也是他可以被隨意透過 Javasscript 取得，所以儲存一些不需要保護的資料比較適合。

生命週期

只要設定了 Expires 或 Max-Age，就算是持久型的 Cookie，若沒有設定其中之一，瀏覽器就會把他當作 session cookie，在 session 結束時刪除。

推薦使用 Max-Age 當 Expires、Max-Age 同時存在時，Max-Age 會優先生效

Domain & Path

Domain 與 Path 決定 Cookie 可以被送到哪些 URL，指定 Domain 會讓 Cookie 對該網域與其子網域都可用，若省略 Domain，只有設定他的那個 host 可以使用該 Cookie，子網域就無法使用。

而 Path 則限制請求路徑需符合某個前綴才會夾帶 Cookie，未指定時會預設設定該 Cookie 的 URL(不是 /)，例如在 /media/001 設定 cookie 而不指定 path 時，這個 cookie 的 path 就會是 /media

注意： path 的用法是控制瀏覽器送不送 Cookie，而不是用來防止其他路徑讀取 Cookie 的保護

安全 Secure HttpOnly SameSite

• Secure 讓 Cookie 只在 HTTPS 連線時才會送出，這能降低中間人攻擊的風險

• HttpOnly 禁止 JavaScript 存取 Cookie，不過他仍然會隨著 JS 發起的請求一起被送到伺服器端，可以降低 XSS 竊取 session 的風險

• SameSite 控制跨站請求中 Cookie 是否被送出，用於防範 CSRF

  • Strict：限制同站請求才能送出
  • Lax：除了同站請求之外，額外允許跨站的頂層導覽（不能是 POST、PUT、DELETE 的請求）
  • None：允許跨站都送，但必須同時設定 Secure

未指定 SameSite 時通常會視為 Lax

答案

[3] This cookie gets treated like a session cookie
[4] This cookie will be sent when navigating from another website to www.website.com

參考

• Set-Cookie header "MDN"