Cookie是什麼? 🍪

當你訪問網站時，經常會看到「是否同意使用Cookie?」這樣的提示。我來為你詳細解釋Cookie到底是什麼、為什麼需要它，讓初學者也能輕鬆理解！

用日常生活比喻Cookie？

讓我們把Cookie比作收據。

咖啡店收據的故事 ☕

第一次光顧:
顧客: "請給我一杯美式咖啡"
咖啡店: "這是您的咖啡和收據"
      [收據: 顧客編號 #123, 喜歡的菜單: 美式咖啡]

下次光顧:
顧客: [出示收據]
咖啡店: "哦，#123號顧客! 給您來杯美式咖啡?"

Cookie也是一樣的!

第一次訪問:
瀏覽器: "這是我第一次訪問這個網站"
網站: "給你一個Cookie"
         [Cookie: 使用者ID, 偏好設定等]

下次訪問:
瀏覽器: [出示Cookie]
網站: "哦，歡迎回來! 保持您的登入狀態"

Cookie的定義

Cookie (Cookie)

網站在瀏覽器中儲存的小型文字檔案
網站「記住」你的方式
大小: 通常小於4KB

Cookie儲存在哪裡?

我的電腦/智慧型手機
└── 瀏覽器 (Chrome, Safari等)
    └── Cookie儲存位置
        ├── google.com Cookie
        ├── yahoo.com.tw Cookie
        └── github.com Cookie

Cookie的作用

1. 保持登入狀態 🔐

沒有Cookie:

登入
跳轉到其他頁面
登出了... 😭
再次登入
又跳轉到其他頁面
又登出了... 😭

使用Cookie:

登入
Cookie儲存登入資訊
跳轉到其他頁面仍然保持登入! ✅
關閉瀏覽器仍然保持登入! ✅

2. 記住購物車 🛒

在購物網站:
把商品A加入購物車
去看其他商品
購物車裡商品A還在! ✅

3. 個人化設定 ⚙️

網站設定:
- 語言: 繁體中文
- 主題: 暗黑模式
- 字型大小: 大

→ 下次訪問時自動套用! ✅

4. 追蹤和廣告 📊

你瀏覽過的商品:
- 鞋子A
- 包包B

→ 在其他網站顯示相關廣告

Cookie的結構

Cookie以名稱=值的形式儲存:

名稱: user_id
值: 12345
網域: example.com
路徑: /
過期時間: 2025-12-31
安全性: Secure, HttpOnly

實際Cookie範例

session_id=abc123xyz; Domain=example.com; Path=/; Expires=Fri, 31 Dec 2025 23:59:59 GMT; Secure; HttpOnly

Cookie的類型

關閉瀏覽器就刪除的Cookie

生命週期: 僅在瀏覽器執行期間
用途: 臨時登入、購物車
特點: 沒有過期時間

範例:

開啟瀏覽器 → 購物 → 關閉瀏覽器 → 購物車清空

保持到指定日期的Cookie

生命週期: 直到過期或手動刪除
用途: 「保持登入狀態」、個人化設定
特點: 指定了過期時間

範例:

勾選「保持登入狀態」
→ 30天內自動登入 ✅

訪問的網站直接建立的Cookie

訪問 example.com
→ example.com設定的Cookie
→ 僅在example.com使用

用途:

保持登入
購物車
網站設定

其他網站建立的Cookie (主要用於廣告)

訪問 example.com
→ 頁面中的廣告公司腳本執行
→ ads.com設定Cookie
→ 在多個網站追蹤你

用途:

廣告追蹤
使用者行為分析
客製化廣告

警告

第三方Cookie因隱私問題正在被逐漸封鎖! Chrome、Safari等瀏覽器正在封鎖第三方Cookie。

Cookie的工作流程

瀏覽器 → 向網站發送請求
網站 → 回應 + 發送Cookie

HTTP Response:
Set-Cookie: user_id=12345; Expires=...

2. 儲存Cookie

瀏覽器將Cookie儲存到儲存位置

3. 發送Cookie

瀏覽器 → 向網站再次請求 + 一起發送Cookie

HTTP Request:
Cookie: user_id=12345

4. 使用Cookie

網站讀取Cookie識別使用者
→ "哦，是12345號使用者!"

Cookie的屬性

Domain (網域)

example.com的Cookie
僅在example.com使用

Path (路徑)

Path=/shop
→ 僅在/shop路徑發送Cookie

Expires/Max-Age (過期時間)

Expires=2025-12-31
→ 保持到這個日期

Max-Age=3600
→ 3600秒(1小時)後刪除

Secure (安全)

Secure旗標
→ 僅在HTTPS發送Cookie
不在HTTP發送

HttpOnly

HttpOnly旗標
→ 無法透過JavaScript存取
防禦XSS攻擊

SameSite

SameSite=Strict
→ 僅在同一網站發送Cookie
防禦CSRF攻擊

Cookie的優點

✅ 改善使用者體驗

保持登入
個人化內容
便利購物

✅ 維持狀態

HTTP是無狀態的 (Stateless)
Cookie可以維持狀態

✅ 實作簡單

伺服器/用戶端都易於使用
幾乎不需要額外設定

Cookie的缺點

❌ 安全風險

可能被竊取 (XSS、CSRF攻擊)
不適合儲存敏感資訊

❌ 隱私問題

可以追蹤使用者
第三方Cookie用於廣告追蹤

❌ 大小限制

每個Cookie限制4KB
每個網域Cookie數量限制 (通常20~50個)

❌ 每次請求都發送

所有HTTP請求都包含Cookie
增加流量

特徵	Cookie	本機儲存	工作階段儲存
大小	4KB	5-10MB	5-10MB
生命週期	設定過期時間	永久	關閉分頁刪除
發送到伺服器	✅ 每次	❌ 不發送	❌ 不發送
存取	伺服器/JS	僅JS	僅JS
用途	認證、追蹤	大容量資料	臨時資料

什麼時候用什麼?

Cookie: 登入權杖、伺服器需要知道的資訊
本機儲存: 使用者設定、離線資料
工作階段儲存: 臨時表單資料、一次性資訊

Cookie安全

1. 使用Secure旗標 🔒

Set-Cookie: token=abc; Secure
→ 僅在HTTPS發送

2. 使用HttpOnly旗標 🛡️

Set-Cookie: session=xyz; HttpOnly
→ 阻止JavaScript存取
→ 防禦XSS攻擊

3. 使用SameSite旗標 🚫

Set-Cookie: id=123; SameSite=Strict
→ 防禦CSRF攻擊

4. 禁止儲存敏感資訊 ⚠️

❌ 密碼
❌ 信用卡號
❌ 身分證字號

✅ 工作階段ID (加密權杖)
✅ 使用者設定

管理Cookie

在瀏覽器中檢視Cookie

Chrome:

設定 → 隱私權和安全性 → Cookie及其他網站資料
→ 查看所有Cookie和網站資料

開發人員工具:

F12 → Application分頁 → Storage → Cookies

刪除Cookie

僅刪除特定網站的Cookie
刪除所有Cookie
設定Cookie自動刪除 (關閉瀏覽器時)

用JavaScript操作Cookie

設定Cookie:

document.cookie = "username=王小明; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

讀取Cookie:

console.log(document.cookie);
// "username=王小明; theme=dark; ..."

刪除Cookie:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

實際使用範例

範例1: 保持登入 🔐

// 登入成功時
Set-Cookie: auth_token=eyJhbGc...;
            Expires=Mon, 31 Jan 2025 23:59:59 GMT;
            Secure;
            HttpOnly;
            SameSite=Strict

// 下次請求時自動發送:
Cookie: auth_token=eyJhbGc...

範例2: 主題設定 🎨

// 使用者選擇暗黑模式
document.cookie = "theme=dark; max-age=31536000; path=/";

// 頁面載入時
if (document.cookie.includes("theme=dark")) {
  enableDarkMode();
}

範例3: 語言設定 🌏

// 選擇語言
Set-Cookie: lang=zh-TW; Max-Age=31536000; Path=/

// 伺服器讀取Cookie提供繁體中文內容

Cookie同意彈窗

為什麼需要Cookie同意?

GDPR (歐洲個人資料保護法):

網站在使用Cookie前
必須取得使用者同意

必需Cookie vs 可選Cookie:

必需: 登入、購物車 (不需要同意)
可選: 廣告追蹤、分析 (需要同意)

常見問題 (FAQ)

Q1: 如果封鎖Cookie會怎樣?

A: 許多網站無法正常運作。

無法登入
無法使用購物車
設定不儲存

Q2: Cookie安全嗎?

A: 正確使用就安全。

使用Secure、HttpOnly旗標
不儲存敏感資訊
使用HTTPS

Q3: Cookie會感染病毒嗎?

A: 不會! Cookie只是簡單的文字檔案。

無法執行程式碼
無法包含病毒

Q4: 需要經常刪除Cookie嗎?

A: 這是個人選擇。

優點: 提高隱私
缺點: 登出、設定重置

Q5: 無痕模式下的Cookie?

A: 臨時使用。

關閉無痕視窗時全部刪除
提高追蹤防護

Cookie的未來

1. 淘汰第三方Cookie

Chrome、Safari等正在封鎖第三方Cookie
→ 廣告公司正在尋找替代方案

2. 替代技術

- Privacy Sandbox (Google)
- FLoC (Federated Learning of Cohorts)
- 增強隱私保護的新標準

下一步 🚀

如果你理解了Cookie:

✅ 什麼是快取(Cache)? - 快速載入資料的另一種方法
✅ 什麼是VPN? - 線上隱私保護
✅ 理解HTTP請求/回應 - Cookie的傳輸方式

總結

Cookie是網站記住你的方式! 🍪

要記住的要點:

Cookie = 小型文字檔案
儲存在瀏覽器中
保持登入、購物車、設定儲存
注意安全 (使用Secure、HttpOnly)
第三方Cookie用於追蹤 (可以封鎖)

多虧了Cookie，我們可以方便地使用網路，但也要注意隱私保護! 🔐

用日常生活比喻Cookie？​

咖啡店收據的故事 ☕​

Cookie的定義​

Cookie儲存在哪裡?​

Cookie的作用​

1. 保持登入狀態 🔐​

2. 記住購物車 🛒​

3. 個人化設定 ⚙️​

4. 追蹤和廣告 📊​

Cookie的結構​

實際Cookie範例​

Cookie的類型​

1. 工作階段Cookie (Session Cookie) 🕐​

2. 持久Cookie (Persistent Cookie) 📅​

3. 第一方Cookie (First-party Cookie) 🏠​

4. 第三方Cookie (Third-party Cookie) 🕵️​

Cookie的工作流程​

1. 設定Cookie (Set-Cookie)​

2. 儲存Cookie​

3. 發送Cookie​

4. 使用Cookie​

Cookie的屬性​

Domain (網域)​

Path (路徑)​

Expires/Max-Age (過期時間)​

Secure (安全)​

HttpOnly​

SameSite​

Cookie的優點​

✅ 改善使用者體驗​

✅ 維持狀態​

✅ 實作簡單​

Cookie的缺點​

❌ 安全風險​

❌ 隱私問題​

❌ 大小限制​

❌ 每次請求都發送​

Cookie vs 本機儲存 vs 工作階段儲存​

什麼時候用什麼?​

Cookie安全​

1. 使用Secure旗標 🔒​

2. 使用HttpOnly旗標 🛡️​

3. 使用SameSite旗標 🚫​

4. 禁止儲存敏感資訊 ⚠️​

管理Cookie​

在瀏覽器中檢視Cookie​

刪除Cookie​

用JavaScript操作Cookie​

實際使用範例​

範例1: 保持登入 🔐​

範例2: 主題設定 🎨​

範例3: 語言設定 🌏​

Cookie同意彈窗​

為什麼需要Cookie同意?​

常見問題 (FAQ)​

Q1: 如果封鎖Cookie會怎樣?​

Q2: Cookie安全嗎?​

Q3: Cookie會感染病毒嗎?​

Q4: 需要經常刪除Cookie嗎?​

Q5: 無痕模式下的Cookie?​

Cookie的未來​

1. 淘汰第三方Cookie​

2. 替代技術​

下一步 🚀​

總結​