一、什么是 Cookie？

• 簡(jiǎn)單說(shuō)：Cookie 是網(wǎng)站為了記住你，存放在你瀏覽器里的一小段文本信息，就像一張“臨時(shí)身份證”或“便簽條”。
• 工作原理：
• • 訪問(wèn)網(wǎng)站時(shí)，服務(wù)器可以生成一個(gè) Cookie 并發(fā)送給你的瀏覽器；
• • 瀏覽器會(huì)把它保存下來(lái)；
• • 下次再訪問(wèn)同一個(gè)網(wǎng)站時(shí)，瀏覽器會(huì)自動(dòng)把這個(gè) Cookie 帶上，發(fā)給服務(wù)器；
• • 服務(wù)器通過(guò)讀取 Cookie 就知道“哦，又是你”，從而提供個(gè)性化內(nèi)容（比如保持登錄狀態(tài)）。
• 特點(diǎn)：
• • 大小有限，一般每個(gè) Cookie 不超過(guò) 4KB；
• • 有有效期，可以是“會(huì)話級(jí)”（關(guān)閉瀏覽器就消失），也可以是“持久化”（比如 7 天后過(guò)期）；
• • 遵循同源策略（但有一些放寬機(jī)制，后面會(huì)講到）。

二、Cookie 的結(jié)構(gòu)與屬性

• 一個(gè) Cookie 由“鍵值對(duì)”和若干“元數(shù)據(jù)屬性”組成，如下所示，HTTP 響應(yīng)頭中的 Set-Cookie：

Set-Cookie: sessionId=abc123; Domain=.example.com; Path=/shop; Expires=Wed, 21 Oct 2026 07:28:00 GMT; Secure; HttpOnly; SameSite=Lax

• 必選部分：Name=Value：例如 sessionId=abc123，存儲(chǔ)實(shí)際數(shù)據(jù)。
• 可選屬性（控制行為）：

三、Cookie 的作用域

• 瀏覽器發(fā)送 Cookie 的規(guī)則（必須同時(shí)滿足）：
• • 域名匹配：如果 Domain 顯式設(shè)置，則請(qǐng)求的域名必須與該 Domain（或其子域）完全匹配；如果未設(shè)置 Domain，則只對(duì)當(dāng)前設(shè)置的域名（不含子域）發(fā)送。如：在 login.example.com 設(shè)置 Cookie 且未指定 Domain，則 api.example.com 不會(huì)收到該 Cookie。
• • 路徑匹配：請(qǐng)求的 URL 路徑必須是 Cookie Path 或其子路徑，例：Path=/app 的 Cookie，在請(qǐng)求 /app/user 時(shí)會(huì)發(fā)送，但請(qǐng)求 /admin 時(shí)不發(fā)送。
• • 協(xié)議匹配（Secure 屬性）：帶 Secure 的 Cookie 只在 HTTPS 請(qǐng)求中發(fā)送。
• • SameSite 校驗(yàn)；
• • 未過(guò)期（Expires / Max-Age）。

四、Cookie 的實(shí)際使用場(chǎng)景

① 用戶登錄（會(huì)話管理）

• 用戶 POST 用戶名密碼 → 服務(wù)器驗(yàn)證成功 → 生成一個(gè)隨機(jī)的 sessionId → 通過(guò) Set-Cookie 下發(fā)（HttpOnly; Secure; SameSite=Lax）；
• 后續(xù)請(qǐng)求瀏覽器自動(dòng)攜帶該 Cookie → 服務(wù)器根據(jù) sessionId 查到用戶信息 → 保持登錄狀態(tài)。

② 記住“7 天免登錄”

• 登錄時(shí)勾選“記住我” → 服務(wù)器除了下發(fā)會(huì)話 Cookie，再設(shè)置一個(gè) remember_token，Max-Age=604800（7天）；
• 下次訪問(wèn)時(shí)，若會(huì)話過(guò)期但 remember_token 有效，服務(wù)器自動(dòng)重建會(huì)話。

③ 記錄用戶偏好（如主題顏色）

• 用戶點(diǎn)擊“深色模式” → JS 執(zhí)行 document.cookie = “theme=dark; max-age=31536000; path=/”；
• 下次訪問(wèn)時(shí)，JS 讀取 document.cookie 中的 theme 值，直接應(yīng)用深色模式（無(wú)需請(qǐng)求服務(wù)器）。

④ 購(gòu)物車（未登錄狀態(tài)）

• 用戶添加商品時(shí)，前端將商品 ID 和數(shù)量存入 Cookie（如 cart=[{“id”:1,“qty”:2}] 編碼后）；
• 結(jié)賬時(shí)，JS 讀取 Cookie 中的購(gòu)物車數(shù)據(jù)發(fā)給服務(wù)器；
• 缺點(diǎn)：Cookie 大小受限，只適合少量商品；登錄后可遷移到服務(wù)端存儲(chǔ)。

⑤ A/B 測(cè)試分組

• 用戶首次訪問(wèn)時(shí)，服務(wù)器隨機(jī)分配一個(gè)分組（如 group=A）并設(shè)置 Cookie，有效期 1 個(gè)月；
• 后續(xù)該用戶始終看到 A 版本的界面，保證實(shí)驗(yàn)一致性。

五、Cookie 的生成、讀取、修改、刪除

• 服務(wù)器端生成（最常用），通過(guò) HTTP 響應(yīng)頭 Set-Cookie 下發(fā)，Node.js (Express) 示例：

res.cookie('username', 'Alice', { maxAge: 900000, httpOnly: true, secure: true });

• 客戶端通過(guò) JavaScript 生成（不常用，且受 HttpOnly 限制），設(shè)置的 Cookie 無(wú)法加 HttpOnly，且不能跨域：

document.cookie = "color=blue; path=/; max-age=86400";

• 讀取 Cookie：
• • 服務(wù)端：通過(guò) HTTP 請(qǐng)求頭 Cookie 獲??；

Cookie: sessionId=abc123; color=blue

• • 客戶端 JS：console.log(document.cookie) 得到所有非 HttpOnly 的 Cookie，以分號(hào)分隔的字符串。
• 修改 Cookie：使用相同的 Name、Domain、Path 重新設(shè)置一次即可覆蓋舊值：

// 修改名為 color 的值
document.cookie = "color=red; path=/";

• 刪除 Cookie，設(shè)置過(guò)期時(shí)間為過(guò)去的時(shí)間：

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

六、客戶端可以修改 Cookie 嗎？

• 客戶端是可以修改 Cookie 的，因?yàn)?Cookie 就存儲(chǔ)在用戶自己的瀏覽器里，用戶有完全的控制權(quán)。
• 可以通過(guò)瀏覽器開(kāi)發(fā)者工具修改：
• • 按 F12 打開(kāi)開(kāi)發(fā)者工具 → 選擇 Application（或“存儲(chǔ)”）標(biāo)簽 → 左側(cè)找到 Cookies → 選中當(dāng)前網(wǎng)站；
• • 你會(huì)看到所有 Cookie 的列表（名稱、值、域名、路徑等）；
• • 雙擊“值”那一列直接編輯，或者新增/刪除。
• 通過(guò) JavaScript（前提是 Cookie 沒(méi)有設(shè)置 HttpOnly 屬性）：

// 查看所有 cookie
console.log(document.cookie);

// 修改一個(gè) cookie（直接覆蓋）
document.cookie = "username=newValue; path=/";

// 添加新 cookie
document.cookie = "theme=dark; max-age=3600";

// 刪除 cookie（設(shè)置過(guò)期時(shí)間為過(guò)去的時(shí)間）
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

• 如果服務(wù)器在設(shè)置 Cookie 時(shí)加了 HttpOnly 標(biāo)記，那么 document.cookie 是讀不到也改不了這個(gè) Cookie 的（目的是防止 XSS 攻擊）。但用戶依然可以通過(guò)開(kāi)發(fā)者工具直接修改它，因?yàn)槟鞘菫g覽器提供的原生界面。

七、Cookie 可以實(shí)現(xiàn)跨域訪問(wèn)嗎？

• 默認(rèn)情況是不可行的：Cookie 遵循同源策略，即一個(gè)域（如 a.com）設(shè)置的 Cookie 只能被 a.com 的請(qǐng)求自動(dòng)攜帶，不會(huì)發(fā)給 b.com，這是出于安全考慮。
• 但有限條件下可以，可以實(shí)現(xiàn)“跨域”訪問(wèn)：
• • 同一父域下的子域：可以通過(guò)設(shè)置 Domain 屬性實(shí)現(xiàn)“跨子域”共享。在 login.example.com 設(shè)置 Cookie 時(shí)，指定 Domain=.example.com（注意前面的點(diǎn)），那么 www.example.com、api.example.com 等所有子域都能訪問(wèn)到這個(gè) Cookie，這不算嚴(yán)格的跨域，但經(jīng)常被問(wèn)成“跨域”。
• • 真正不同域之間的跨域（比如 a.com 給 b.com 發(fā)請(qǐng)求時(shí)攜帶 Cookie），需要同時(shí)滿足三個(gè)條件：
• • • 服務(wù)器在設(shè)置 Cookie 時(shí)加上 SameSite=None 和 Secure（必須 HTTPS）。
• • • 前端發(fā)起請(qǐng)求時(shí)（比如用 fetch 或 XMLHttpRequest）加上 credentials: ‘include’ 選項(xiàng)。
• • • 目標(biāo)服務(wù)器（b.com）的響應(yīng)頭中必須包含 Access-Control-Allow-Origin（且值不能是 *，必須是明確的 a.com 或具體域名）以及 Access-Control-Allow-Credentials: true。
• • 這種方式有安全風(fēng)險(xiǎn)（CSRF），現(xiàn)代瀏覽器限制很嚴(yán)格，一般僅用于受信任的服務(wù)之間。

八、Cookie 的其他常見(jiàn)問(wèn)題

• Cookie 中能不能存儲(chǔ)中文？ Cookie 可以存儲(chǔ)中文，但最好進(jìn)行 encodeURIComponent 編碼，避免分號(hào)、逗號(hào)等特殊字符問(wèn)題：

document.cookie = `name=${encodeURIComponent('張三')}; path=/`;

• 如何讓 Cookie 只在當(dāng)前瀏覽器會(huì)話有效？ 不設(shè)置 Expires 和 Max-Age 即可（會(huì)話級(jí) Cookie）。
• 刪除一個(gè) Cookie 時(shí)為什么必須指定 Path 和 Domain？ 因?yàn)?Cookie 是通過(guò) Name + Domain + Path 三元組唯一標(biāo)識(shí)的，如果不提供相同的 Domain 和 Path，瀏覽器會(huì)認(rèn)為是在設(shè)置一個(gè)不同的 Cookie（而非刪除目標(biāo) Cookie）。假設(shè)原 Cookie 有 Path=/app），可能刪不掉，如下所示的錯(cuò)誤示例：

document.cookie = "color=; expires=..."

• 如何防止 Cookie 被 CSRF 讀?。ǖ?CSRF 不需要讀取，只需要利用）？ 設(shè)置 SameSite=Lax 或 Strict，Lax 允許從外部鏈接進(jìn)入時(shí)攜帶，但禁止 POST 表單等跨站請(qǐng)求攜帶，能防御絕大部分 CSRF。
• Cookie 的 Max-Age 和 Expires 同時(shí)出現(xiàn)時(shí)哪個(gè)優(yōu)先？ 現(xiàn)代瀏覽器中 Max-Age 優(yōu)先，如果兩者都未設(shè)置，則為會(huì)話級(jí)。

到此這篇關(guān)于Web中Cookie的安全防御與跨域?qū)嵺`的文章就介紹到這了,更多相關(guān)Web Cookie安全防御與跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論