大家好，我是若川。持續(xù)組織了8個(gè)月源碼共讀活動(dòng)，感興趣的可以點(diǎn)此加我微信 ruochuan12?參與，每周大家一起學(xué)習(xí)200行左右的源碼，共同進(jìn)步。同時(shí)極力推薦訂閱我寫(xiě)的《學(xué)習(xí)源碼整體架構(gòu)系列》?包含20余篇源碼文章。歷史面試系列

Cookie 是什么？

Fortune cookie

Cookie，它的名字源自一種叫 Fortune cookie 的餅干，這種餅干里面有一張寫(xiě)著精辟句子的小紙條。

在瀏覽器中，Cookie 是服務(wù)器讓瀏覽器幫忙攜帶信息的手段，就像餅干里的紙條，瀏覽器會(huì)儲(chǔ)存它，并且在后續(xù)的 HTTP 請(qǐng)求中再次發(fā)送給服務(wù)器。

Cookie 應(yīng)用

主要用于以下三個(gè)方面：

• 會(huì)話(huà)狀態(tài)管理（如用戶(hù)登錄狀態(tài)、購(gòu)物車(chē)、游戲分?jǐn)?shù)或其它需要記錄的信息）

• 個(gè)性化設(shè)置（如用戶(hù)自定義設(shè)置、主題等）

• 瀏覽器行為跟蹤（如跟蹤分析用戶(hù)行為等）

因?yàn)?HTTP 是無(wú)狀態(tài)的，所以為了協(xié)助 Web 保持狀態(tài)，Cookie 誕生了。在 HTML5 的 localStorage、sessionStorage 出現(xiàn)之前，它作為當(dāng)時(shí)唯一的儲(chǔ)存手段也曾一度被用于客戶(hù)端儲(chǔ)存。

隨著瀏覽器儲(chǔ)存機(jī)制的完善，為了減小不必要的性能開(kāi)銷(xiāo)（因?yàn)槊看握?qǐng)求瀏覽器都會(huì)攜帶 Cookie 數(shù)據(jù)），一些客戶(hù)端需要而服務(wù)器不需要的數(shù)據(jù)的場(chǎng)景漸漸被其他儲(chǔ)存方式替代，例如記住用戶(hù)的主題信息，Cookie 的應(yīng)用場(chǎng)景也漸漸回歸初心。

目前 Cookie 主要用于會(huì)話(huà)狀態(tài)管理，以用戶(hù)登錄-退出登陸為例，Cookie 的生命周期如下：

前端通過(guò)用戶(hù)登錄 API 向后端傳遞用戶(hù)信息，后端核對(duì)與數(shù)據(jù)庫(kù)信息是否匹配。

匹配后在登錄 API 返回頭部 set-cookie 返回記錄用戶(hù)狀態(tài)的 cookie 值 userToken：

瀏覽器按照 set-cookie 的規(guī)則解析后存入瀏覽器

后續(xù)瀏覽器會(huì)自動(dòng)將 userToken 加到滿(mǎn)足條件（域名、路徑）的 API 的 請(qǐng)求頭部 cookie 中

如果退出登陸，返回頭部的 set-cookie 會(huì)拜托瀏覽器幫忙刪除 userToken，瀏覽器的 cookie 儲(chǔ)存庫(kù)就會(huì)將 userToken 字段刪除，后續(xù)的 API 請(qǐng)求頭部 cookie 也不會(huì)發(fā)送它

如何設(shè)置 Cookie

服務(wù)端和瀏覽器有不同設(shè)置 Cookie 的方式。

速查表

平臺(tái)操作示例說(shuō)明

服務(wù)端	set-cookie: <cookie-name>=<cookie-value>	服務(wù)端通過(guò)設(shè)置 set-cookie 控制 Cookie
瀏覽器 document.cookie	document.cookie = "name=scar";	獲取并設(shè)置與當(dāng)前文檔相關(guān)聯(lián)的 cookie，操作不靈活。
瀏覽器 Cookie Store API	cookieStore.set("name", "scar")	新特性，僅支持在 HTTPS 使用，目前還在實(shí)驗(yàn)階段。

詳細(xì)說(shuō)明

服務(wù)端：Set-Cookie

服務(wù)端以 Node.js 為例，不同語(yǔ)言有不同的用法，但 Cookie 設(shè)置邏輯是一樣的

const?http?=?require("http"); http.createServer((req,?res)?=>?{if?(req.url?===?"/read")?{//?讀取?Cookieres.end(`Read?Cookie:?${req.headers.cookie?||?""}`);}?else?if?(req.url?===?"/write")?{//?設(shè)置?Cookieres.setHeader("Set-Cookie",?[`name=scar;`,//set-cookie?屬性大小寫(xiě)不敏感，你可以寫(xiě)成?path=/?或者?Path=/`language=javascript;Path=/;?HttpOnly;Expires=${new?Date(Date.now()?+?1000).toUTCString()};`,]);res.end("Write?Success");}?else?if?(req.url?===?"/delete")?{//?刪除?cookieres.setHeader("Set-Cookie",?[//?設(shè)置過(guò)期時(shí)間為過(guò)去的時(shí)間`name=;expires=${new?Date(1).toUTCString()}`,//?有效期?max-age?設(shè)置成?0?或?-1?這種無(wú)效秒，讓?cookie?當(dāng)場(chǎng)去世//?有些瀏覽器不支持?max-age?屬性，所以用此方法需要考慮兼容性"language=javascript;?max-age=0",]);res.end("Delete?Success");}?else?{res.end("Not?Found");}}).listen(3000);

客戶(hù)端：document.cookie

客戶(hù)端通過(guò)瀏覽器方法 document.cookie 讀寫(xiě)當(dāng)前界面的 Cookie。

//?編輯?ookie document.cookie?=?"name=scar"; document.cookie?=?"language=javascript"; //?讀取?Cookie console.log(document.cookie); //name=scar;?language=javascript//?刪除?Cookie document.cookie?=?"name=scar;expires=Thu,?01?Jan?1970?00:00:01?GMT";

客戶(hù)端：Cookie Store API

Cookie Store API 目前正在試驗(yàn)階段，Firefox、Safari 瀏覽器 還不支持，所以不建議在生產(chǎn)環(huán)境使用，相信在將來(lái)我們會(huì)用上它更方便地操作 Cookie。

//?讀取?Cookie await?cookieStore.get("enName"); await?cookieStore.getAll();//?設(shè)置?Cookie const?day?=?24?*?60?*?60?*?1000; cookieStore.set({name:?"enName",value:?"scar",expires:?Date.now()?+?day,domain:?"scar.site?",}).then(function?()?{console.log("It?worked!");},function?(reason)?{console.error("It?failed:?",?reason);});//?刪除?Cookie await?cookieStore.delete("session_id");//?監(jiān)聽(tīng)?Cookie?變化 cookieStore.addEventListener("change",?(event)?=>?{for?(const?cookie?of?event.changed)?{if?(cookie.name?===?"name")?sessionCookieChanged(cookie.value);}for?(const?cookie?of?event.deleted)?{if?(cookie.name?===?"enName")?sessionCookieChanged(null);} });

除了更方便的用法，他還有以下特性：

異步操作

它可以異步訪(fǎng)問(wèn) Cookie，不阻塞主進(jìn)程，document.cookie 是同步操作。

錯(cuò)誤拋出機(jī)制

Cookie Store API 有一個(gè)明確的機(jī)制來(lái)報(bào)告 Cookie 存儲(chǔ)錯(cuò)誤，而 document.cookie 如果設(shè)置失敗也不會(huì)提醒，所以需要輪詢(xún)查 Cookie 的方法來(lái)確保設(shè)置成功。

service workers 支持

因?yàn)?document.cookie 的同步設(shè)計(jì)，所以 service workers 不支持。Cookie Store API 的異步特性更適合，所以 service workers 支持通過(guò)它訪(fǎng)問(wèn) Cookie。

Set-Cookie 詳解

從語(yǔ)法可以看出，Set-Cookie 由前綴、鍵值對(duì)、屬性三部分組成。

Set-Cookie: <cookie-name>=<cookie-value> Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>// 同時(shí)指定多個(gè)屬性 Domain、Secure、HttpOnly Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly// cookie 前綴，值可能性為 __Secure-、__Host- Set-Cookie: <cookie-prefix><cookie-name>=<cookie-value>

• 前綴[非必須]

  • 示例：Set-cookie: __Secure-lol=foo;Domain=example.xxx， _Sercure- 就是前綴

  • Cookie 前綴需配合屬性使用，使 Cookie 更安全

• 鍵值對(duì)（名稱(chēng)=值）

  • 示例：Set-cookie: __Secure-lol=foo。

  • Cookie 攜帶信息

• 屬性[非必須]

  • 示例：Domain=somecompany.co.uk; Path=/; Expires=Wed, 30 Aug 2019 00:00:00 GMT

  • Cookie 的設(shè)置，告訴客戶(hù)端如何使用 Cookie 信息，可以設(shè)置 Cookie 生效的時(shí)間、域名等等信息。

Cookie 前綴

Cookie 前綴是一種在 Cookie 名稱(chēng)中攜帶信息的方式，它必須和某些屬性同時(shí)出現(xiàn)，否則 Cookie 無(wú)法設(shè)置成功。

名稱(chēng)說(shuō)明

__Secure-	必須同時(shí)設(shè)置 Secure 屬性
__Host-	必須同時(shí)設(shè)置 Path=/ 和 Secure 屬性，且不能設(shè)置 Domain 屬性。 限制來(lái)自安全域的 Cookie 被作用在不安全的域上

例子：

//?支持?Cookie?前綴的收到下面設(shè)置的時(shí)候會(huì)拒絕，因?yàn)闆](méi)有同時(shí)設(shè)置?Secure?屬性 document.cookie?=?"__Secure-invalid-without-secure=1"; //?這樣設(shè)置才能成功！ document.cookie?=?"__Secure-valid-with-secure=1;?Secure";// 當(dāng)響應(yīng)來(lái)自于一個(gè)安全域（HTTPS）的時(shí)候，二者都可以被客戶(hù)端接受 Set-Cookie: __Secure-ID=123; Secure; Domain=example.com Set-Cookie: __Host-ID=123; Secure; Path=/// 缺少 Secure 屬性，會(huì)被拒絕 Set-Cookie: __Secure-id=1// 缺少 Path=/ ，會(huì)被拒絕 Set-Cookie: __Host-id=1; Secure

說(shuō)實(shí)話(huà)這個(gè)前綴我之前從沒(méi)見(jiàn)過(guò)，孤陋寡聞了。

除了 IE 不支持，其他各大瀏覽器基本支持。不同瀏覽器限制可能不同，例如：Set-Cookie: __Host-id=1; Secure設(shè)置 __Host-前綴的時(shí)候，即使缺少 Path=/，FireFox 可以設(shè)置成功，而 Chrome 會(huì)拒絕。

但為什么有 Secure 屬性還要加個(gè) __Secure- 前綴呢？

因?yàn)?Secure 屬性設(shè)置后是可以被人惡意移除的，而 Cookie 名稱(chēng)被人移除前綴，服務(wù)器不會(huì)認(rèn)它，所以更加安全。

Cookie 鍵值對(duì)

<cookie-name>=<cookie-value>

真正攜帶信息的部分，例如：

id=38afes7a8

<cookie-name>? 可以是除了控制字符 (CTLs)、空格 (spaces) 或制表符 (tab)之外的任何 US-ASCII 字符。同時(shí)不能包含以下分隔字符：( ) < > @ , ; : \ " /? [ ] ? = { }。

<cookie-value>? 非必填，如果有值，那么需要包含在雙引號(hào)里面。支持除了控制字符（CTLs）、空格（whitespace）、雙引號(hào)（double quotes）、逗號(hào)（comma）、分號(hào)（semicolon）以及反斜線(xiàn)（backslash）之外的任意 US-ASCII 字符。

Cookie 屬性

Cookie 屬性可以理解為 Cookie 的配置項(xiàng)，告訴瀏覽器 Cookie 的一些額外信息，例如什么時(shí)候失效

速查表

Cookie 屬性說(shuō)明類(lèi)型默認(rèn)值示例

Domain	生效域名	String	當(dāng)前訪(fǎng)問(wèn)地址中的 host 部分	scar.site
Path	生效路徑	String	/	/docs
Expires	過(guò)期時(shí)間	Date	瀏覽器會(huì)話(huà)關(guān)閉時(shí)間	Thu, 22 Jul 2021 00:53:13 GMT
Max-Age	有效期，單位秒	Number		1000
Secure	僅 HTTPS 可用			無(wú)值，出現(xiàn)即設(shè)置
HttpOnly	設(shè)置了 HttpOnly 屬性的 cookie 不能使用 JavaScript 進(jìn)行訪(fǎng)問(wèn)			無(wú)值，出現(xiàn)即設(shè)置
SameSite	允許服務(wù)器設(shè)定 Cookie 不隨著跨站請(qǐng)求一起發(fā)送	string	Lax	值可能性為: Lax Strict None
SameParty	允許特定條件跨域共享 Cookie			無(wú)值，出現(xiàn)即設(shè)置
Priority	優(yōu)先級(jí)，僅 Chrome 支持		Medium	值可能性為: Low Medium High

詳細(xì)說(shuō)明

Domain

Domain?指定了哪些主機(jī)地址可以接收 Cookie。來(lái)看看如下設(shè)置：

Set-Cookie: __Secure-ID=123; Secure; Domain=example.com

表示只要請(qǐng)求的目標(biāo)地址匹配 Domain 規(guī)則，那 Cookie 就會(huì)被發(fā)送過(guò)去，所即使scar.site 向 example.com 發(fā)起的請(qǐng)求，Cookie 會(huì)被發(fā)送過(guò)去。所以不要再誤會(huì) Domain是發(fā)起請(qǐng)求的域名啦，其實(shí)是接受請(qǐng)求的域名。

如果不設(shè)置，默認(rèn)為?origin，不包含子域名，如果指定了Domain，則一般包含子域名，例如，如果設(shè)置?Domain=mozilla.org，則 Cookie 也包含在子域名中（如developer.mozilla.org）。

當(dāng)前大多數(shù)瀏覽器遵循?RFC 6265，設(shè)置 Domain 時(shí) 不需要加前導(dǎo)點(diǎn)。瀏覽器不遵循該規(guī)范，則需要加前導(dǎo)點(diǎn)，例如：Domain=.mozilla.org

Path

Path?標(biāo)識(shí)指定了主機(jī)下的哪些路徑可以接受 Cookie（該 URL 路徑必須存在于請(qǐng)求 URL 中）。以字符?%x2F?("/") 作為路徑分隔符，子路徑也會(huì)被匹配。

例如，設(shè)置?Path=/docs，則以下地址都會(huì)匹配：

• /docs

• /docs/Web/

• /docs/Web/HTTP

Expires

設(shè)置過(guò)期時(shí)間，可以傳一個(gè)符合 HTTP-Date 格式的值，例如：expires=Mon, 14 Mar 2022 15:39:34 GMT;

如果不設(shè)置 Expires，則默認(rèn)為會(huì)話(huà)關(guān)閉時(shí)間;

會(huì)話(huà)是瀏覽器的一個(gè)概念，一般是一個(gè)瀏覽器 Tab 窗口。

如果瀏覽器提供了會(huì)話(huà)恢復(fù)功能，恢復(fù)回話(huà)之時(shí)，Cookie 也會(huì)一起恢復(fù)，就好像會(huì)話(huà)從來(lái)沒(méi)有關(guān)閉一樣。

Max-Age

在 Cookie 失效之前需要經(jīng)過(guò)的秒數(shù)。秒數(shù)為 0 或 -1 將會(huì)使 cookie 直接過(guò)期。一些老的瀏覽器（IE 6、IE 7 和 IE 8）不支持這個(gè)屬性。

如果 Expires?和Max-Age 同時(shí)存在時(shí)，Max-Age優(yōu)先級(jí)更高。

HttpOnly

設(shè)置了 HttpOnly 屬性的 cookie 不能使用 JavaScript 經(jīng)由 ?Document.cookie?屬性、XMLHttpRequest?和 ?Request?APIs、Cookie Store APIs 進(jìn)行訪(fǎng)問(wèn)。

Secure

標(biāo)記為?Secure?的 Cookie 只應(yīng)通過(guò)被 HTTPS 協(xié)議加密過(guò)的請(qǐng)求發(fā)送給服務(wù)端，因此可以預(yù)防 man-in-the-middle 攻擊。

但即便設(shè)置了?Secure?標(biāo)記，敏感信息也不應(yīng)該通過(guò) Cookie 傳輸，因?yàn)?Cookie 固有的不安全性，Secure?標(biāo)記也無(wú)法提供確實(shí)的安全保障，例如：可以訪(fǎng)問(wèn)客戶(hù)端硬盤(pán)的人可以讀取它。

SameSite

服務(wù)器要求某個(gè) Cookie 在跨站請(qǐng)求時(shí)不會(huì)被發(fā)送，從而可以阻止跨站請(qǐng)求偽造攻擊。

SameSite 可以有下面三種值：

• **None**：瀏覽器會(huì)在同站請(qǐng)求、跨站請(qǐng)求下繼續(xù)發(fā)送 Cookies，不區(qū)分大小寫(xiě)。

• **Strict**：瀏覽器將只在訪(fǎng)問(wèn)站點(diǎn)與 Cookie 生效的域相同時(shí)發(fā)送 Cookie。

• **Lax**：新版本瀏覽器默認(rèn)設(shè)置為 Lax。與?Strict?類(lèi)似，但是特定條件也可以發(fā)送跨域請(qǐng)求：

  舉個(gè)例子，用戶(hù)從 a.com 跳轉(zhuǎn)到 b.com，URL 發(fā)生了變化的同時(shí)請(qǐng)求方式為 GET，所以 設(shè)置了 Lax的 Cookie 會(huì)被發(fā)送過(guò)去 ，除此之外還有圖片加載、iframe 調(diào)用等等。

  • URL 必須發(fā)生變化

  • HTTP 請(qǐng)求方式必須是安全的，例如 GET、HEAD、OPTIONS，它們不改變數(shù)據(jù)。

SameSite 和 Domain 的區(qū)別

上面提到過(guò)，Domain 可以指定 Cookie 生效的域名，那它和 Domain的區(qū)別是什么呢？

Domain 屬性限制了接收 Cookie 的域名，而 SameSite屬性限制了發(fā)送 Cookie 的域名

舉個(gè)例子：

Set-Cookie: Foo=bar; Path=/; Secure; Domain=scar.site;

無(wú)論是從 scar.site 還是 foo.example.com 發(fā)起的請(qǐng)求，只要被發(fā)送到了 scar.site 或者它的子域名，那 Cookie 就能發(fā)過(guò)去。

Set-Cookie: name=scar; Path=/; Secure; Domain=scar.site;SameSite=strict;

如果設(shè)置了 SameSite=strict,那么這個(gè)請(qǐng)求只能從 scar.site 發(fā)起 Cookie 才能帶過(guò)去。

SameParty

目前還在實(shí)驗(yàn)階段

配合 ?First-Party Sets 實(shí)現(xiàn)跨域共享屬性，詳細(xì)可以訪(fǎng)問(wèn)：詳解 Cookie 新增的 SameParty 屬性。

Priority

目前只有 Chrome 實(shí)現(xiàn)了這個(gè)提案

因?yàn)?Cookie 有數(shù)量限制，所以在 Cookie 超過(guò)一定數(shù)量時(shí)，瀏覽器會(huì)清除最早過(guò)期的 Cookie。

如果設(shè)置了 Priority，Chrome 會(huì)先將優(yōu)先級(jí)低的清除，并且每種優(yōu)先級(jí) Cookie 至少保留一個(gè)。可以有下面三種值：

• Low：低優(yōu)先級(jí)

• Medium：默認(rèn)值，中優(yōu)先級(jí)

• High：高優(yōu)先級(jí)

Q&A

一些關(guān)于 Cookie 的疑問(wèn)和新特性，以 Q&A 形式記錄。比較雜、比較散，可以說(shuō)沒(méi)什么知識(shí)點(diǎn)全是感情，屬于那種你知道了可能沒(méi)什么用但是就是想把它弄懂。

1. Cookie 的限制

大小限制

大多數(shù)瀏覽器支持最大為 4KB 的 Cookie，4KB 是針對(duì) Cookie 單條記錄的 Value 值。

數(shù)量限制

Cookie 有數(shù)量限制，而且只允許每個(gè)站點(diǎn)存儲(chǔ)一定數(shù)量的 Cookie，當(dāng)超過(guò)時(shí)，最早過(guò)期的 Cookie 便被刪除。

不同瀏覽器支持的數(shù)量可能不同, 基于 Webkit 內(nèi)核的是 180 個(gè)，基于 gecko 內(nèi)核的是 150 個(gè)，感興趣可以訪(fǎng)問(wèn)江濤學(xué)編程-編寫(xiě)的 Cookie 實(shí)驗(yàn) 試試自己的瀏覽器 Cookie 數(shù)量限制

實(shí)際上影響 Cookie 被刪除的要素不止是 Expires 和 Max-Age，還有 Priority、Secure，對(duì)移除策略感興趣的可以看：Cookie 知識(shí)二則

2. 和 Cookie 相關(guān)的不安全事件有哪些？

CSRF 攻擊

CSRF：跨站請(qǐng)求攻擊，簡(jiǎn)單地說(shuō)，是攻擊者通過(guò)一些技術(shù)手段欺騙用戶(hù)的瀏覽器去訪(fǎng)問(wèn)一個(gè)自己曾經(jīng)認(rèn)證過(guò)的網(wǎng)站并運(yùn)行一些操作（如發(fā)郵件，發(fā)消息，甚至財(cái)產(chǎn)操作如轉(zhuǎn)賬和購(gòu)買(mǎi)商品）。

舉個(gè)例子，一家銀行用以運(yùn)行轉(zhuǎn)賬操作的 URL 如下：

http://www.examplebank.com/withdraw?account=AccoutName&amount=1000&for=PayeeName

那么，一個(gè)惡意攻擊者可以在另一個(gè)網(wǎng)站上放置如下代碼：

<img?src="<http://www.examplebank.com/withdraw?account=scar&amount=1000&for=Badman>">

如果有賬戶(hù)名為 Alice 的用戶(hù)訪(fǎng)問(wèn)了惡意站點(diǎn)，而她之前剛訪(fǎng)問(wèn)過(guò)銀行不久，登錄信息尚未過(guò)期，導(dǎo)致發(fā)起請(qǐng)求后后端以為是用戶(hù)正常操作，于是進(jìn)行扣款操作，那么她就會(huì)損失 1000 資金。通過(guò)設(shè)置 sameSite 可以防止跨域發(fā)送 Cookie，抵御 CSRF。

XSS 攻擊

跨站腳本（Cross-site scripting）是一種網(wǎng)站應(yīng)用程序的安全漏洞攻擊，簡(jiǎn)稱(chēng)為 CSS, 但這會(huì)與層疊樣式表（Cascading Style Sheets）CSS的縮寫(xiě)混淆。因此，跨站腳本攻擊縮寫(xiě)為 XSS。

XSS 攻擊通常指的是通過(guò)利用網(wǎng)頁(yè)開(kāi)發(fā)時(shí)留下的漏洞，通過(guò)巧妙的方法注入惡意指令代碼到網(wǎng)頁(yè)，使用戶(hù)加載并執(zhí)行攻擊者惡意制造的網(wǎng)頁(yè)程序。攻擊成功后，攻擊者可能得到 Cookie 從而實(shí)現(xiàn)攻擊。

3. Floc 替代第三方 Cookie？

引用自：如果不用第三方 Cookie，Google FLoC 會(huì)是更好的替代者嗎？- 少數(shù)派

FLoC 是一種新的廣告追蹤技術(shù)，全稱(chēng)為 Federated Learning of Cohorts，即「同類(lèi)群組聯(lián)合學(xué)習(xí)」。FLoC 的工作原理是監(jiān)視你的瀏覽記錄，為訪(fǎng)客的匯總行為分配一個(gè) ID，然后將具有類(lèi)似瀏覽行為的瀏覽器分組在一起。這些群組的數(shù)據(jù)稱(chēng)為同類(lèi)群組，然后用于向人們展示針對(duì)性更強(qiáng)的廣告。

FLoC 在自身設(shè)計(jì)層面，是比 Cookie 隱私性更好的，但是首先它依然是一個(gè)廣告追蹤技術(shù)，其次才是一個(gè)相對(duì)保護(hù)隱私的廣告追蹤技術(shù)。

FLoC 由 Google 主導(dǎo)，所以三方團(tuán)體擔(dān)憂(yōu)：當(dāng)所有的瀏覽器開(kāi)始默認(rèn)屏蔽第三方 Cookie，廣告商轉(zhuǎn)向使用 FLoC 以后，Google 將在廣告追蹤市場(chǎng)一家獨(dú)大。

4. 同名 Cookie 發(fā)送時(shí)，優(yōu)先級(jí)如何判斷？

Cookie: a=2; a=1

首先來(lái)看看 Cookie 發(fā)送順序，RFC 6265提案提到：

• Path 屬性較長(zhǎng)的應(yīng)該在前面

• 如果 Path 路徑一樣，創(chuàng)建時(shí)間早的在前面

具體的瀏覽器表現(xiàn)我沒(méi)有去探究，但提案只是倡導(dǎo)，所以每個(gè)客戶(hù)端不一定會(huì)按照它實(shí)現(xiàn) Cookie 的發(fā)送順序。

除了考慮發(fā)送順序，還要考慮不同的服務(wù)器框架可能有不同的接收邏輯，所以筆者推薦盡量避免出現(xiàn)同名 Cookie，減少端表現(xiàn)不統(tǒng)一帶來(lái)的不確定性。

5. 如何快速調(diào)試 Cookie

F12 打開(kāi)控制臺(tái)可以快速看到本域下的所有 Cookie

通過(guò)分析 Cookie 屬性來(lái)定位問(wèn)題。

例如某個(gè) Cookie 導(dǎo)致了業(yè)務(wù)問(wèn)題，如果它設(shè)置了 HttpOnly，那么代表客戶(hù)端無(wú)法操作 Cookie，可以快速的把問(wèn)題定位到 API 層面。

總結(jié)

本來(lái)我在寫(xiě)：Cookie、Session、Token ，寫(xiě)著寫(xiě)著發(fā)現(xiàn) Cookie 的篇幅比較多，而那篇文章的重點(diǎn)不在于這些部分，所以摘了出來(lái)。如果對(duì) Cookie、Session、Token 感興趣的可以持續(xù)關(guān)注一下我，近期會(huì)發(fā)哦～

作為一名前端人員，平時(shí)用得少所以不熟悉，但了解后其實(shí)也沒(méi)有什么難點(diǎn)，相信你們看完這篇就可以徹底了解了。如果文章中還有關(guān)于 Cookie 你想知道但是我沒(méi)寫(xiě)的部分都可以評(píng)論，我會(huì)回復(fù)。

參考資料

• Cookies - mozilla

• Set-Cookies - mozilla

• Cookie 前綴如何讓 Cookie 更安全？- 阿里云社區(qū)

• What is a Session Cookie?

• View, edit, and delete cookies

• Correct way to delete cookies server-side

• Feature: Cookie Store API

• 面試：徹底理解 Cookie 以及 Cookie 安全

• 如果不用第三方 Cookie，Google FLoC 會(huì)是更好的替代者嗎？- 少數(shù)派

• FLoC 是什么？以及你為什么需要在 Chrome 瀏覽器中禁用它 · Ruby China

• 分享一個(gè)關(guān)于 Cookie 做的實(shí)驗(yàn)結(jié)果 - ataola - 博客園

• What are the security differences between cookies with Domain vs SameSite strict? - Stack Overflow

• What is difference between SameSite="Lax" and SameSite="Strict"? - Stack Overflow

• Cookie 知識(shí)二則

• How to handle multiple cookies with the same name? - Stack Overflow
  
  
  

  ---

·················?若川簡(jiǎn)介?·················

你好，我是若川，畢業(yè)于江西高校。現(xiàn)在是一名前端開(kāi)發(fā)“工程師”。寫(xiě)有《學(xué)習(xí)源碼整體架構(gòu)系列》20余篇，在知乎、掘金收獲超百萬(wàn)閱讀。
從2014年起，每年都會(huì)寫(xiě)一篇年度總結(jié)，已經(jīng)堅(jiān)持寫(xiě)了8年，點(diǎn)擊查看年度總結(jié)。
同時(shí)，最近組織了源碼共讀活動(dòng)，幫助3000+前端人學(xué)會(huì)看源碼。公眾號(hào)愿景：幫助5年內(nèi)前端人走向前列。

掃碼加我微信 ruochuan02、拉你進(jìn)源碼共讀群

今日話(huà)題

目前建有江西|湖南|湖北?籍 前端群，想進(jìn)群的可以加我微信 ruochuan12?進(jìn)群。分享、收藏、點(diǎn)贊、在看我的文章就是對(duì)我最大的支持~

總結(jié)

以上是生活随笔為你收集整理的​Cookie 从入门到进阶：一文彻底弄懂其原理以及应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。