Cookie 是前端狀態管理的基石，看似簡單的 `name=value` 背後，隱藏著生命週期控制、作用域隔離、安全防禦、性能優化、編碼規範、存儲選型等工程細節。實戰中踩過的坑，總結成這份完整屬性圖譜與避坑指南。
核心屬性詳解
1. expires / max-age —— 生命週期控制器
| 屬性 | 單位 | 行為 | 優先級 |
|---|
expires | GMT 日期字符串 | 指定過期絕對時間，舊標準 | 低（被 max-age 覆蓋） |
max-age | 秒 | 指定相對生存秒數，現代標準 | 高 |
- max-age > 0： 持久化 Cookie，寫入硬盤，關閉瀏覽器/電腦仍有效，直至秒數耗盡。
- max-age < 0（默認 -1）： 會話級 Cookie，僅內存存儲，關閉當前瀏覽器窗口及其子窗口即失效。（注意：IE6 下新開窗口/標籤仍共享 Session，現代瀏覽器進程級共享）
- max-age = 0： 立即刪除 Cookie（無刪除 API，通過即時失效實現）。
- 未設置： 默認 Session Cookie（max-age=-1）。
2. domain —— 跨域共享的鑰匙
- 默認值：創建 Cookie 頁面的主機名（如 `a.example.com`）。
- 設置為 `.example.com`（前綴點可選，現代瀏覽器均支援），則 `a.example.com`、`b.example.com`、以及 `example.com` 下所有子域可共享。
- 安全限制： 不能設置為當前域之外的域（無法將 `example.com` Cookie 設置為 `other.com`）。
3. path —— 路徑級作用域
- 默認：創建頁面所在目錄及其子目錄（如 `/blog/` 則 `/blog/post/1` 可訪問）。
- 設置 `/` 可讓全站訪問。注意： Path 不是安全邊界，同域下 JS 可讀取任意 Path Cookie。
4. Secure —— 傳輸加密強制
- Boolean，`true` 時僅 HTTPS 傳輸，HTTP 請求不攜帶。
- 必須配合 HTTPS 站點使用，否則 Cookie 永不發送。
5. HttpOnly —— XSS 防線
- Boolean，`true` 時 JS (`document.cookie`) 無法讀寫，僅 HTTP 請求頭自動攜帶。
- 核心作用： 緩解 XSS 攻擊竊取 Session ID。實戰慘痛教訓： 曾花 2 小時排查 JS 讀不到 Cookie，最終發現後端設置了 HttpOnly。
- 獨立於 Secure：可單獨 HttpOnly、單獨 Secure、或雙重保障。
6. SameSite —— CSRF 終結者（現代必加）
| 值 | 行為 | 適用場景 |
|---|
Strict | 僅第一方請求攜帶（地址欄跳轉/書籤），任何第三方鏈接/表單/iframe 不攜帶 | 高安全需求：銀行轉賬、修改密碼 |
Lax（現代默認） | 第一方 + 安全跨站請求（GET 鏈接跳轉、預加載），POST 表單/iframe 不攜帶 | 大多數業務 Cookie，平衡安全與體驗 |
None | 所有跨站請求攜帶，**必須配合 Secure=true** | 第三方嵌入場景：SSO、廣告追蹤、嵌入式 Widget |
傳輸性能：Cookie 體積即延遲
每次 HTTP 請求自動攜帶同域 Cookie。**Web 性能鐵律：單域 Cookie 總量 < 4KB，關鍵域 < 1KB**。
- 超限風險：請求頭過大導致 431 錯誤、增加 RTT、擠佔頻寬。
- 優化：非必要數據改用 `localStorage`/`sessionStorage`/`IndexedDB`；域名拆分靜態資源域（無 Cookie 域）；定期清理過期/無用 Cookie。
編碼規範：別讓特殊字符搞壞解析
- Cookie 值禁止：分號 `;`、逗號 `,`、空格 ` `、等號 `=`。
- 統一編碼：`encodeURIComponent(value)` 存儲，`decodeURIComponent(value)` 讀取。
- 封裝工具函數 `setCookie(name, value, options)` / `getCookie(name)` 統一處理編碼、屬性默認值、錯誤兜底。
存儲選型：Cookie 不是萬能倉庫
| 特性 | Cookie | localStorage | sessionStorage | IndexedDB |
|---|
| 容量 | ~4KB | 5-10MB | 5-10MB | 數百 MB |
| 隨請求發送 | ✅ 自動 | ❌ 否 | ❌ 否 | ❌ 否 |
| 過期控制 | max-age/expires | 手動清理/永久 | 標籤頁關閉清空 | 手動/版本控制 |
| 同源策略 | Domain/Path 靈活 | 嚴格同源 | 嚴格同源+標籤頁隔離 | 嚴格同源 |
| 適用場景 | 身份認證、CSRF Token、少量狀態同步 | 客戶端緩存、偏好設定、離線數據 | 表單暫存、多步驟向導中間態 | 複雜結構化數據、離線優先應用 |
同名 Cookie 覆蓋規則
- 同名 + 同 Domain + 同 Path = 同一 Cookie（後寫入覆蓋前值，`expires/max-age` 同步更新）。
- 同名 + 不同 Domain 或 不同 Path = 不同 Cookie（並存，瀏覽器按 Path 長度優先發送最具體者）。
調試技巧
- DevTools Application → Cookies：查看/編輯/刪除、過濾 Domain/Path、查看 Size/Expires/HttpOnly/SameSite。
- Network → Request Headers → Cookie：實際發送內容驗證。
- `document.cookie` 控制台快速查看當前頁可訪問 Cookie 字符串。
結語：細節決定安全與體驗
Cookie 屬性配置不是樣板代碼，每一個屬性都是對安全邊界、生命週期、作用域、傳輸性能的精確宣告。下次設置 Cookie 時，請逐項核對：`max-age` 合理？`Domain/Path` 最小化？`Secure; HttpOnly; SameSite=Lax` 全上了嗎？這才是專業前端的標配。
文章來源：搜道 UED