蘋(píng)果公司前不久對(duì) Safari 瀏覽器進(jìn)行一次重大更新，這次更新完全禁用了第三方 Cookie，這意味著，默認(rèn)情況下，各大廣告商或網(wǎng)站將無(wú)法對(duì)你的個(gè)人隱私進(jìn)行追蹤。而微軟和 Mozilla 等也紛紛采取了措施禁用第三方 Cookie，但是由于這些瀏覽器市場(chǎng)份額較小，并沒(méi)有給市場(chǎng)帶來(lái)巨大的沖擊。

從 2017 年截至 2019 年底， Google 面臨的罰款總額已經(jīng)超過(guò) 93 億歐元，其中一大原因便是侵犯用戶數(shù)據(jù)隱私。迫于巨大壓力，Google Chrome 官方團(tuán)隊(duì)前不久也宣布，為了提升用戶隱私和安全，未來(lái)兩年將完全禁用第三方 Cookie。

在完全不能寫(xiě)入三方 Cookie 的情況下，將會(huì)對(duì)前端的數(shù)據(jù)讀寫(xiě)方式，甚至是整個(gè)廣告行業(yè)帶來(lái)巨大影響。

Cookie 的意義

眾所周知，HTTP 協(xié)議是無(wú)狀態(tài)的協(xié)議，如果你在同一個(gè)客戶端向服務(wù)器發(fā)送多次請(qǐng)求，服務(wù)器不會(huì)知道這些請(qǐng)求來(lái)自同一客戶端。

這正是 HTTP 協(xié)議得以廣泛應(yīng)用的原因，試想一下，如果它是有狀態(tài)協(xié)議，你必須要時(shí)刻與服務(wù)器建立鏈接，那么如果連接意外斷開(kāi)，整個(gè)會(huì)話就會(huì)丟失，重新連接之后一般需要從頭開(kāi)始；而如果是無(wú)狀態(tài)協(xié)議，使得會(huì)話與連接本身獨(dú)立起來(lái)，這樣即使連接斷開(kāi)了，會(huì)話狀態(tài)也不會(huì)受到嚴(yán)重傷害，保持會(huì)話也不需要保持連接本身。

如果 HTTP 協(xié)議只是用來(lái)訪問(wèn)靜態(tài)文件，那不會(huì)有任何問(wèn)題，但是如果你要為廣大用戶提供更好的服務(wù)，服務(wù)器就需要知道每個(gè)請(qǐng)求具體來(lái)自于哪個(gè)用戶，比如你在逛淘寶的時(shí)候你只需要登錄一次，當(dāng)你發(fā)起一次購(gòu)買(mǎi)請(qǐng)求，服務(wù)器就已經(jīng)知道你登錄過(guò)了，不會(huì)再讓你進(jìn)行登錄。

所以 HTTP 協(xié)議需要占用瀏覽器的一小塊存儲(chǔ)，存儲(chǔ)當(dāng)前訪問(wèn)用戶的一些 ”狀態(tài)“，然后每次發(fā)起 HTTP 請(qǐng)求，請(qǐng)求中就會(huì)攜帶這些狀態(tài)，從而讓服務(wù)器知道你是誰(shuí)。Cookie 出現(xiàn)的的意義就是為了解決這個(gè)問(wèn)題，讓無(wú)狀態(tài)的 HTTP 協(xié)議擁有一小塊記憶。

但是， Cookie 一經(jīng)出現(xiàn)，就成了各大廣告和購(gòu)物網(wǎng)站窺探用戶隱私的利器，他們使用第三方 Cookie 不斷獲取你的數(shù)據(jù)，那么什么第三方 Cookie 呢？

第三方 Cookie

如果是你正常的正在逛著天貓，天貓會(huì)把你的信息寫(xiě)入一些 Cookie 到 .tmall.com 這個(gè)域下，然而打開(kāi)控制臺(tái)你會(huì)看到，并不是所有 Cookie 都是 .tmall.com 這個(gè)域下的，里面還有很多其他域下的 Cookie ，這些所有非當(dāng)前域下的 Cookie 都屬于第三方 Cookie，雖然你可能從來(lái)沒(méi)訪問(wèn)過(guò)這些域，但是他們已經(jīng)悄悄的通過(guò)這些第三方 Cookie來(lái)標(biāo)識(shí)你的信息，然后把你的個(gè)人信息發(fā)送過(guò)去了。

而 .tmall.com 這個(gè)域下的 Cookie 都屬于第一方 Cookie，那么為什么還需要第三方Cookie 呢？再打開(kāi) taobao.com，你會(huì)發(fā)現(xiàn)你已經(jīng)不需要再登錄了，因?yàn)樘詫?、天貓都屬于阿里旗下的產(chǎn)品，阿里為他們提供統(tǒng)一的登錄服務(wù)，同時(shí)，你的登錄信息也會(huì)存到這個(gè)統(tǒng)一登錄服務(wù)的域下，所以存到這個(gè)域下的 Cookie 就成了三方 Cookie。

我們?cè)俅蜷_(kāi)已經(jīng)完全禁用了第三方 Cookie 的 Safari，發(fā)現(xiàn)只剩下 .tmall.com 這個(gè)域下的Cookie 了。

這時(shí)你會(huì)發(fā)現(xiàn)即使你已經(jīng)登錄了天貓，再訪問(wèn)淘寶也還是需要登錄的，你已經(jīng)無(wú)法享用這樣的功能了，而三方 Cookie 可不僅僅就這么點(diǎn)用途，在 Web 開(kāi)發(fā)中，三方 Cookie 的應(yīng)用非常之廣，下面我們?cè)賮?lái)具體看幾個(gè)應(yīng)用場(chǎng)景：

三方Cookie的用途

前端日志打點(diǎn)

大多數(shù) Web 站點(diǎn)都會(huì)引用一些第三方 SDK 來(lái)進(jìn)行前端異常或性能監(jiān)控，這些 SDK 會(huì)通過(guò)一些接口將監(jiān)控到的信息上傳到他們的服務(wù)器。一般它們都需要標(biāo)識(shí)每個(gè)用戶來(lái)方便排查問(wèn)題或者統(tǒng)計(jì) UV 數(shù)據(jù)，所以當(dāng)你一此請(qǐng)求這個(gè)站點(diǎn)的時(shí)候，它們可能會(huì)在你的站點(diǎn)上 set 一個(gè) Cookie，后續(xù)所有的日志上報(bào)請(qǐng)求都會(huì)帶上這個(gè) Cookie 。

由于一般這些第三方 SDK 都是用于監(jiān)控的通用服務(wù)，它們肯定會(huì)擁有自己獨(dú)立的域名，比如 log.com，它在你的域名 mysite.com 下種下的 Cookie 就屬于第三方 Cookie。

廣告營(yíng)銷(xiāo)神器 - Facebook Pixel

在電商業(yè)務(wù)中，追蹤流量、導(dǎo)流量、轉(zhuǎn)換率、銷(xiāo)售額這些都是商家最關(guān)心的問(wèn)題。這時(shí)候你就可以使用 Facebook Pixel，簡(jiǎn)單來(lái)說(shuō) Facebook Pixel 像素就是一串 JavaScript 代碼，可以追蹤廣告的轉(zhuǎn)化量、改進(jìn)受眾定位、使廣告花費(fèi)回報(bào)最大化。

當(dāng)訪客進(jìn)入到被設(shè)有 Facebook Pixel 的頁(yè)面時(shí)，便會(huì)觸發(fā)這段代碼。比如，查看了商品或者加入購(gòu)物車(chē)， Facebook Pixel 便會(huì)向系統(tǒng)發(fā)送請(qǐng)求來(lái)記錄這些行為，系統(tǒng)可以利用這些收到的行為信息進(jìn)一步的做追蹤和優(yōu)化。

舉一個(gè)實(shí)際例子，我們進(jìn)入一個(gè)國(guó)外的電商網(wǎng)站 Brava Fabrics ，你會(huì)發(fā)現(xiàn)已經(jīng)被寫(xiě)入了一堆 facebook.com 下的三方 cookie：

我猜測(cè)這個(gè) fr 應(yīng)該就是用來(lái)標(biāo)識(shí)我身份信息的 cookie，然后點(diǎn)擊幾個(gè)頁(yè)面，在 network里面找到了幾個(gè) facebook 發(fā)送的請(qǐng)求，下面是其中一個(gè)：

https://www.facebook.com/tr/?id=382444918612794&ev=PageView&dl=https%3A%2F%2Fbravafabrics.com%2Fcollections%2Fa-moment-of-bliss&rl=https%3A%2F%2Fbravafabrics.com%2F&if=false&ts=1586868288778&sw=1680&sh=1050&ud[ct]=eb045d78d273107348b0300c01d29b7552d622abbc6faf81b3ec55359aa9950c&ud[country]=eb045d78d273107348b0300c01d29b7552d622abbc6faf81b3ec55359aa9950c&v=2.9.15&r=stable&ec=0&o=30&fbp=fb.1.1586867082370.951509876&it=1586868284974&coo=false&rqm=GET

查看詳情你會(huì)發(fā)現(xiàn)，有下面幾個(gè)主要的參數(shù)：

dl: https://bravafabrics.com/collections/a-moment-of-bliss
rl: https://bravafabrics.com/

這時(shí) facebook 已經(jīng)知道了我從 https://bravafabrics.com/ 來(lái)到了 https://bravafabrics.com/collections/a-moment-of-bliss 這個(gè)頁(yè)面，同時(shí)，這個(gè)請(qǐng)求會(huì)攜帶 fr=09wX7ui8MrvCh2SIa..BdNoGz.f.F6R.0.0.Belanb.AWXCDx 這個(gè) Cookie。

來(lái)到 facebook，當(dāng)你登錄后，facebook 會(huì)把剛剛這些 Cookie 和你的 facebook Id 關(guān)聯(lián)起來(lái)，然后他就可以好好的分析你的行為了：

• 有人在你的網(wǎng)站上完成了購(gòu)買(mǎi)。
• 有人注冊(cè)進(jìn)行試用，或者以其他方式將自己標(biāo)識(shí)為你網(wǎng)站上的潛在客戶。
• 有人在你網(wǎng)站上的購(gòu)買(mǎi)過(guò)程中輸入他們的付款信息。
• 有人將產(chǎn)品添加你網(wǎng)站上的購(gòu)物車(chē)中。
• 有人選擇特定版本的產(chǎn)品，例如選擇某種顏色。
• 有人發(fā)起了結(jié)賬，但沒(méi)有付款
• ...

而如此強(qiáng)大的追蹤能力，只需要你復(fù)制一段 Facebook Pixel 的 JavaScript 腳本到你的頁(yè)面上就可以了。而這一切能力就建立在一個(gè)小小的 Cookie 的基礎(chǔ)上，因?yàn)橛辛诉@個(gè) Cookie ，F(xiàn)acebook 才能將這些行為與它的賬號(hào)體系進(jìn)行關(guān)聯(lián)。

無(wú)處不在的的 mmstat

再來(lái)看一個(gè)我們國(guó)內(nèi)的例子，平時(shí)我們?cè)趪?guó)內(nèi)的搜索引擎或視頻網(wǎng)站上搜索到一些東西，然后打開(kāi)購(gòu)物網(wǎng)站就可以收到各種你興趣的相關(guān)推薦，這已經(jīng)是大眾習(xí)以為常的事情了，各大購(gòu)物網(wǎng)站、廣告商，會(huì)通過(guò)第三方 Cookie 收集你的年齡、性別、瀏覽歷史等從而判斷你的興趣喜好，然后帶給你精準(zhǔn)的信息推薦。

比如，我們?cè)跒g覽百度、優(yōu)酷、天貓等網(wǎng)站時(shí)，都能看到幾個(gè) .mmstat.com 這個(gè)域下的 Cookie

百度：

優(yōu)酷：

天貓：

當(dāng)你在百度、優(yōu)酷、淘寶等進(jìn)行一系列的操作時(shí)，.mmstat.com 已經(jīng)悄悄的通過(guò)三方Cookie 把你的個(gè)人信息運(yùn)送到了他們那邊。.mmstat.com 應(yīng)該就是阿里旗下的大數(shù)據(jù)營(yíng)銷(xiāo)平臺(tái)阿里媽媽旗下的域名（只是個(gè)人猜測(cè)）。打開(kāi)阿里媽媽首頁(yè)，可以看到，其號(hào)稱(chēng)是更懂消費(fèi)者的數(shù)據(jù)金礦，已經(jīng)建立起5億用戶的身份識(shí)別體系。你的每一次搜索、每一次購(gòu)買(mǎi)、都會(huì)讓它變的更精準(zhǔn)，下一次你就收到更精準(zhǔn)的推薦。

當(dāng)然，三方 Cookie 只是眾多獲取你喜好信息的一種方式，只不過(guò)這種方式更便捷，成本更低。

瀏覽器的策略

最近幾大瀏覽器針對(duì) Cookie 策略的頻繁改動(dòng)，意味著三方 Cookie 被全面禁用已經(jīng)不遠(yuǎn)了：

Firefox、Safari —— 默認(rèn)禁用

在 Safari 13.1、Firefox 79 版本中，三方 Cookie 已經(jīng)被默認(rèn)禁用，但是由于這些游覽器市場(chǎng)份額較小，并沒(méi)有給市場(chǎng)帶來(lái)巨大的沖擊。因?yàn)榘⒗锏牡卿浶畔⑹墙y(tǒng)一存在一個(gè)三方Cookie 下的，淘寶剛開(kāi)始的處理方式，甚至是彈個(gè)框出來(lái)，告訴用戶手動(dòng)開(kāi)啟三方 Cookie：

但是這樣的處理方式對(duì)于龐大的用戶來(lái)講肯定體驗(yàn)是極低的，解決方案可能是先將 Cookie種在當(dāng)前域下，所有就有了我們上面的測(cè)試結(jié)果，淘寶、天貓兩個(gè)網(wǎng)站需要登錄兩次。

但是三方 Cookie做的事情遠(yuǎn)不止這些，等到 Chrome 全面禁用之前，一定要提前作出改變。

Chrome —— SameSite Cookie

還好由于三方 Cookie 對(duì) Google 的廣告業(yè)務(wù)影響較大，所以其沒(méi)有立即進(jìn)行禁用，而是一直陸續(xù)修改一些小的策略來(lái)對(duì)三方 Cookie 進(jìn)行限制，比如 SameSite

SameSite 是 Chrome 51 版本為瀏覽器的 Cookie 新增的了一個(gè)屬性， SameSite 阻止瀏覽器將此 Cookie 與跨站點(diǎn)請(qǐng)求一起發(fā)送。其主要目標(biāo)是降低跨源信息泄漏的風(fēng)險(xiǎn)。同時(shí)也在一定程度上阻止了 CSRF 攻擊。

SameSite 可以避免跨站請(qǐng)求發(fā)送 Cookie，有以下三個(gè)屬性：

Strict

Strict 是最嚴(yán)格的防護(hù)，將阻止瀏覽器在所有跨站點(diǎn)瀏覽上下文中將 Cookie 發(fā)送到目標(biāo)站點(diǎn)，即使在遵循常規(guī)鏈接時(shí)也是如此。因此這種設(shè)置可以阻止所有 CSRF 攻擊。然而，它的用戶友好性太差，即使是普通的 GET 請(qǐng)求它也不允許通過(guò)。

例如，對(duì)于一個(gè)普通的站點(diǎn)，這意味著如果一個(gè)已經(jīng)登錄的用戶跟蹤一個(gè)發(fā)布在公司討論論壇或電子郵件上的網(wǎng)站鏈接，這個(gè)站點(diǎn)將不會(huì)收到 Cookie ，用戶訪問(wèn)該站點(diǎn)還需要重新登陸。

不過(guò)，具有交易業(yè)務(wù)的網(wǎng)站很可能不希望從外站鏈接到任何交易頁(yè)面，因此這種場(chǎng)景最適合使用 strict 標(biāo)志。

Lax

對(duì)于允許用戶從外部鏈接到達(dá)本站并使用已有會(huì)話的網(wǎng)站站，默認(rèn)的 Lax 值在安全性和可用性之間提供了合理的平衡。Lax 屬性只會(huì)在使用危險(xiǎn) HTTP 方法發(fā)送跨域 Cookie 的時(shí)候進(jìn)行阻止，例如 POST 方式。同時(shí)，使用 JavaScript 腳本發(fā)起的請(qǐng)求也無(wú)法攜帶 Cookie。

例如，一個(gè)用戶在 A 站點(diǎn) 點(diǎn)擊了一個(gè) B 站點(diǎn)（GET請(qǐng)求），而假如 B 站點(diǎn) 使用了Samesite-cookies=Lax，那么用戶可以正常登錄 B 站點(diǎn)。相對(duì)地，如果用戶在 A 站點(diǎn)提交了一個(gè)表單到 B站點(diǎn)（POST請(qǐng)求），那么用戶的請(qǐng)求將被阻止，因?yàn)闉g覽器不允許使用 POST 方式將Cookie 從A域發(fā)送到Ｂ域。

None

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

策略更新

在舊版瀏覽器，如果 SameSite 屬性沒(méi)有設(shè)置，或者沒(méi)有得到運(yùn)行瀏覽器的支持，那么它的行為等同于 None，Cookies 會(huì)被包含在任何請(qǐng)求中——包括跨站請(qǐng)求。

但是，在 Chrome 80+ 版本中，SameSite 的默認(rèn)屬性是 SameSite=Lax。換句話說(shuō)，當(dāng) Cookie 沒(méi)有設(shè)置 SameSite 屬性時(shí)，將會(huì)視作 SameSite 屬性被設(shè)置為L(zhǎng)ax 。如果想要指定 Cookies 在同站、跨站請(qǐng)求都被發(fā)送，那么需要明確指定 SameSite 為 None。具有 SameSite=None 的 Cookie 也必須標(biāo)記為安全并通過(guò) HTTPS 傳送。這意味著所有使用 JavaScript 腳本收集用戶信息的請(qǐng)求默認(rèn)將不能攜帶三方 Cookie。

然而這個(gè)改動(dòng)并不會(huì)造成太大的影響，它只是給各大網(wǎng)站提了一個(gè)信號(hào)，因?yàn)槟阒恍枰涯阆胍l(fā)送的 Cookie 的屬性手動(dòng)設(shè)置為 none 即可：

真正可怕的是我們將無(wú)法直接指定 SameSite 為 None，只能用戶自己去選擇，這才是真正的默認(rèn)禁用。

Chrome 也宣布，將在下個(gè)版本也就是 Chrome 83 版本，在訪客模式下禁用三方 Cookie，在 2022 年全面禁用三方 Cookie，到時(shí)候，即使你能指定 SameSite 為 None 也沒(méi)有意義，因?yàn)槟阋呀?jīng)無(wú)法寫(xiě)入第三方 Cookie 了。

當(dāng)三方 Cookie 被全面禁止

現(xiàn)在，我們想象一下，當(dāng)瀏覽器禁用了三方 Cookie，而我們又沒(méi)有作出任何改變的情況下，會(huì)發(fā)生什么：

前端日志異常

可能有一天你會(huì)突然發(fā)現(xiàn)，你的 UV 暴漲，但是 PV 卻沒(méi)有什么變化，那可能是你的打點(diǎn)SDK 使用的三方 Cookie 被禁用掉了。

這時(shí)這個(gè) SDK 將無(wú)法在你的域下寫(xiě)入一個(gè)三方 Cookie，導(dǎo)致你的每次刷新頁(yè)面它都會(huì)帶一個(gè)新的 Cookie 回來(lái)，后端接受到的信號(hào)就是這些都是不同用戶的請(qǐng)求，所以都會(huì)計(jì)入 UV。同時(shí)你在排查問(wèn)題時(shí)，你也無(wú)法將用戶的行為串聯(lián)起來(lái)，導(dǎo)致排查非常困難。

智能廣告推薦消失

上面我們提到，廣告服務(wù)通過(guò)你的年齡、性別、行為來(lái)推斷你的喜好，從而推送給你精準(zhǔn)的廣告，使用了三方 Cookie 來(lái)進(jìn)行信息追蹤的廣告主將無(wú)法獲得你的這些喜好，從而無(wú)法推薦給你感興趣的廣告。

這時(shí)，廣告主只能在你當(dāng)時(shí)的訪問(wèn)環(huán)境進(jìn)行預(yù)定義廣告，比如你正在訪問(wèn)寵物網(wǎng)站，就給你推薦寵物用品等等。

同時(shí)，可能之前廣告主還會(huì)通過(guò) Cookie 判斷你閱讀某個(gè)廣告的次數(shù)，一旦你閱讀同一個(gè)廣告多次但是沒(méi)有發(fā)生轉(zhuǎn)化，其就會(huì)停止向你推送該廣告?；蛘吣阋呀?jīng)購(gòu)買(mǎi)過(guò)了這個(gè)商品，那你也不會(huì)再看到這個(gè)廣告了。如果沒(méi)有了頻率控制，那么你可能要連續(xù)很多天盯著一個(gè)你永遠(yuǎn)也不會(huì)去點(diǎn)的廣告，或者你會(huì)持續(xù)看到一個(gè)你已經(jīng)購(gòu)買(mǎi)過(guò)的產(chǎn)品廣告。

無(wú)法追蹤轉(zhuǎn)化率

當(dāng)你查看一則廣告時(shí)，該廣告會(huì)在你的瀏覽器中放置一個(gè) Cookie，表示你已經(jīng)看到它。如果隨后你進(jìn)入轉(zhuǎn)化階段（購(gòu)買(mǎi)、下載等），廣告主們需要能追蹤每一個(gè)他們投放到你網(wǎng)站上的轉(zhuǎn)化率，這樣他們才能計(jì)算投放的效果，從而作出優(yōu)化策略，如果你無(wú)法再追蹤廣告轉(zhuǎn)化率了，那么也很難再進(jìn)行投放了。

當(dāng)然，以上只是建立在你沒(méi)有進(jìn)行任何改變的基礎(chǔ)上，距離全面禁用三方 Cookie 還有一年多的時(shí)間，這應(yīng)該是一個(gè)足夠的時(shí)間讓你及時(shí)作出應(yīng)對(duì)。

是好是壞

雖然，這對(duì)你帶來(lái)的可能是糟糕的廣告體驗(yàn)，但是全面禁用三方 Cookie 對(duì)我們用戶來(lái)講肯定是一件好事，因?yàn)槟愕男畔⒉粫?huì)被輕而易舉的就被別人追蹤了，你的隱私信息也不會(huì)容易被泄漏。

然而事情真的那么簡(jiǎn)單么？貪婪的廣告商絕對(duì)不會(huì)直接放棄對(duì)你的信息追蹤，首先他們已經(jīng)對(duì)你掌握了足夠多的信息，而且三方 Cookie 只是眾多獲取你信息的一種手段，只不過(guò)這種方法更方便簡(jiǎn)單，為了利益，他們一定會(huì)找到更多的替代方案：

使用一方 Cookie 替代 三方 Cookie

如果我們引入了一個(gè)三方的 SDK，比如 google analytics ，說(shuō)明我們對(duì)其是信任的，它對(duì)我們的信息收集追蹤都是在允許范圍內(nèi)的。所以這些 SDK 依然可以使用第一方 Cookie 來(lái)完成用戶身份標(biāo)識(shí)符。

比如，gtag.js 和 analytics.js 會(huì)設(shè)置以下 Cookie 用戶標(biāo)識(shí)用戶信息：

但是，這些 Cookie 并不是第三方 Cookie，而是設(shè)在你的域下的第一方 Cookie，比如打開(kāi) twitter 的 Cookie 信息：

我們發(fā)現(xiàn) _ga 、_gid 這兩個(gè) Cookie 正是設(shè)置在其自己域下面的。

如果使用正常的 Set-Cookie 的形式，google analytics 是無(wú)法直接將 Cookie 設(shè)置到 twitter.com 這個(gè)域下面的，而且 google analytics 發(fā)起的日志收集請(qǐng)求也無(wú)法攜帶 twitter.com 這個(gè)域下的 Cookie。

打開(kāi) sdk 的代碼我發(fā)現(xiàn)里面有使用 js 設(shè)置 Cookie 的代碼：

并且，收集日志的請(qǐng)求中也又沒(méi)攜帶任何 Cookie，而是把這信息帶在了參數(shù)中：

這樣的方式就模擬了使用三方 Cookie 標(biāo)識(shí)用戶信息的過(guò)程，并且完全可以替代它?？偠灾萌?Cookie 對(duì)這種三方 SDK 的影響并不大，只要稍微改變一下思維即可。

當(dāng)然，由于 Safari 和 Firefox 已經(jīng)全面禁用了三方 Cookie，一些廣告營(yíng)銷(xiāo)服務(wù)也正在給出使用一方 Cookie 的替代方案，比如 Facebook Pixel：

你允許了其讀取一方 Cookie 就意味著它能獲取你更多的數(shù)據(jù)，這意味著你需要承擔(dān)更大的用戶信息泄漏的風(fēng)險(xiǎn)。而且使用一方 Cookie 也不像使用三方 Cookie 那樣靈活，在某些場(chǎng)景下也是有很大限制的。

瀏覽器指紋

三方 Cookie 的主要作用是標(biāo)識(shí)你的身份，從而在你下一次訪問(wèn)時(shí)知道你是誰(shuí)，那么如果有一種技術(shù)直接就可以獲取你的唯一標(biāo)識(shí)時(shí)，那么就不需要再存儲(chǔ) Cookie 了，這個(gè)技術(shù)就是 “瀏覽器指紋” 。

“瀏覽器指紋”是一種通過(guò)瀏覽器對(duì)網(wǎng)站可見(jiàn)的配置和設(shè)置信息來(lái)跟蹤 Web 瀏覽器的方法，瀏覽器指紋就像我們?nèi)耸稚系闹讣y一樣，每個(gè)人擁有一份接近于獨(dú)一無(wú)二的配置。

如果單單拿出一個(gè)配置來(lái)講可能很多人和你擁有一樣的配置，比如下面的：

• 系統(tǒng)版本：
  • 我的系統(tǒng)版本是 Mac OS X 10_14_6
  • 大約 11.91% 的人與我的配置相同
  • 大約每 8 個(gè)人中有一個(gè)和我配置相同
• Chrome 版本：
  • 我使用的瀏覽器是 Chrome，并且版本是：81.0.4044.92
  • 大約 0.08% 的人與我的配置相同
  • 大約每 1250 個(gè)人中有一個(gè)和我配置相同
• UTC+8 時(shí)間：
  • 我的UTC+8 時(shí)間是 2020.4.15 23:00:00
  • 大約 2.30% 的人與我的配置相同
  • 大約每 43 個(gè)人中有一個(gè)和我配置相同

如果單獨(dú)看每個(gè)配置，那他們都不能作為你獨(dú)一無(wú)二的特征，但是綜合起來(lái)看呢？比如就看這三項(xiàng)，三項(xiàng)的配置與你都相同的人的概率就會(huì)大大減小了。以上只是一些簡(jiǎn)單的特征，比如系統(tǒng)版本，瀏覽器版本，這些只需要一個(gè)簡(jiǎn)單的 navigator.userAgent 屬性就可以拿到。

像這樣的屬性還有非常多個(gè)，他們可能來(lái)自 HTTP Header、Javascript attributes、瀏覽器插件 等等

HTTP Header

上面的 HTTP Header 中就包含了大量的定制化特性，可以看到每一項(xiàng)配置中與我相同的概率是非常低的，然而這些信息屬于普通的瀏覽器指紋，普通指紋可以理解為容易被發(fā)現(xiàn)并且容易修改的部分，而且你也可以輕易的篡改他們，有些配置比如 User-Agent 、language 使用 JavaScript 的 navigator 對(duì)象獲取是最準(zhǔn)確而且不會(huì)被篡改的。下面還有一些其他常見(jiàn)的 JavaScript 屬性：

Javascript attributes

這里面包含一些使用 Javascript 很容易獲取的一些配置：

• Screen width：屏幕寬度
• Screen height：屏幕高度
• Cookies enabled：是否允許 Cookie
• Content language：語(yǔ)言信息
• List of fonts：字體信息
• Timezone：時(shí)區(qū)信息
• Navigator properties：Navigator 對(duì)象中包含的屬性信息
• ...

以上這些信息非常容易獲取，而且?guī)в械男畔⑤^少，最后生成出來(lái)的指紋可能碰撞的概率就越大，實(shí)際上通過(guò) JS 能獲取的遠(yuǎn)不止這些，下面還有一些重復(fù)率非常低的指標(biāo)：

Canvas 指紋

Canvas 是 HTML5 中用于在網(wǎng)頁(yè)上繪制 2D 圖形元素。瀏覽器在繪制圖形時(shí)，會(huì)調(diào)用操作系統(tǒng)的繪圖接口，即便使用 Cavans 繪制相同的元素，但是由于系統(tǒng)的差別，不同瀏覽器使用了不同的圖形處理引擎、不同的圖片導(dǎo)出選項(xiàng)、不同的默認(rèn)壓縮級(jí)別、對(duì)抗鋸齒、次像素渲染等算法也不同。

具體獲取流程如下：在畫(huà)布上渲染一些文字，再用 toDataURL 轉(zhuǎn)換出來(lái)，你就會(huì)得到屬于你的 Cavans 指紋：   

 
 
 

  
  
  
const canvas = document.getElementById("canvas-fingerprint");
  
  
  
   const context = canvas.getContext("2d");
  
  
  
   context.font = "18pt Arial";
  
  
  
   context.textBaseline = "top";
  
  
  
   context.fillText("canvas-fingerprint-test", 2, 2);
  
  
  
   return canvas.toDataURL("image/jpeg");
 
 
 

上面的圖中可以看到，Canvas 指紋和我相同的概率是 <0.01% 的，可見(jiàn)這是一個(gè)在瀏覽器指紋中非常重要的指標(biāo)。

WebGL

WebGL 是一種用于在網(wǎng)頁(yè)上呈現(xiàn)3D圖像的 JavaScript 瀏覽器API。網(wǎng)站可利用 WebGL 來(lái)識(shí)別你的設(shè)備指紋：

• WebGL 報(bào)告 —— 完整的 WebGL 瀏覽器報(bào)告表是可獲取、可被檢測(cè)的。在一些情況下，它會(huì)被轉(zhuǎn)換成為哈希值以便更快地進(jìn)行分析。
• WebGL 圖像 —— 渲染和轉(zhuǎn)換為哈希值的隱藏3D圖像。由于最終結(jié)果取決于進(jìn)行計(jì)算的硬件設(shè)備，因此此方法會(huì)為設(shè)備及其驅(qū)動(dòng)程序的不同組合生成唯一值。這種方式為不同的設(shè)備組合和驅(qū)動(dòng)程序生成了唯一值。

WebRTC

WebRTC （網(wǎng)頁(yè)實(shí)時(shí)通信，Web Real Time Communication），是可以讓瀏覽器有音視頻實(shí)時(shí)通信的能力，通常被需要快速直接連接的網(wǎng)絡(luò)應(yīng)用程序所應(yīng)用。即便你使用了代理，網(wǎng)站也能借此獲取你真實(shí)的公共和本地IP地址。該插件可被用于泄漏你的本地 IP 地址或追蹤媒體設(shè)備。WebRTC 會(huì)暴露你的：

• 公共IP地址
• 本地IP地址
• 媒體設(shè)備的數(shù)量及其哈希值

CSS

就算用戶禁用了 JavaScript ，網(wǎng)站也可以通過(guò)純 CSS 來(lái)獲取到一些信息，比如這樣：

 
 
 

  
  
  
@media(device-width: 1920px) {
  
  
  
  body {
  
  
  
    background: url("https://example.org/1920.png");
  
  
  
  }
  
  
  
}
 
 
 

通過(guò)統(tǒng)計(jì) 1920.png 這個(gè)圖片的請(qǐng)求日志，便可知道有哪些用戶的窗口寬度是 1920px。

UUID 的計(jì)算

綜合以上的指標(biāo)特征，可以計(jì)算出一個(gè)屬于你自己的唯一的 uuid，這就是你的 "瀏覽器指紋" 了。當(dāng)然，計(jì)算時(shí)不能簡(jiǎn)單的將上述指標(biāo)進(jìn)行疊加，因?yàn)槟承┲笜?biāo)在一些場(chǎng)景下聚合度比較高，每個(gè)指標(biāo)帶來(lái)的信息量也不相同，一般每個(gè)指標(biāo)都擁有一個(gè)自己的 "信息熵" :

信息熵（entropy）是接收的每條消息中包含的信息的平均量，熵越高，則能傳輸越多的信息，熵越低，則意味著傳輸?shù)男畔⒃缴佟?/p>

在計(jì)算 uuid 時(shí)，一般信息熵較大的指標(biāo)會(huì)擁有較大的權(quán)重，這樣可以大大降低碰撞率，提高 uuid 的準(zhǔn)確性。

當(dāng)然，這些也不用你自己去挨個(gè)費(fèi)勁的去獲取了，使用 clientjs（https://github.com/jackspirou/clientjs） 可以輕而易舉的幫你獲取這些指標(biāo)，并最終獲取 uuid：

 
 
 

  
  
  
// Create a new ClientJS object
  
  
  
const client = new ClientJS();
  
  
  

  
  
  
// Get the client's fingerprint id
  
  
  
const fingerprint = client.getFingerprint();
  
  
  

  
  
  
// Print the 32bit hash id to the console
  
  
  
console.log(fingerprint);
  
  
  
你也可以單獨(dú)獲取這些信息：
  
  
  

  
  
  
  const client = new ClientJS();
  
  
  
  client.getBrowserData();
  
  
  
  client.getFingerprint();
  
  
  
  client.getCustomFingerprint(...);
  
  
  
  client.isCanvas();
  
  
  
  client.getCanvasPrint();
  
  
  
  client.getFlashVersion();
  
  
  
  client.isSilverlight();
  
  
  
  client.getSilverlightVersion();
  
  
  
  // 。。。
 
 
 

參考

• https://zhuanlan.zhihu.com/p/34591096
• https://mp.weixin.qq.com/s/5-oObFPiRP6a5O49YsS9wg
• https://juejin.im/post/5d97fb5ef265da5ba12cdea9

小結(jié)

作為一名普通用戶，我會(huì)感嘆，太難了，我很難保護(hù)我的個(gè)人隱私，收集我信息的平臺(tái)無(wú)處不在，收集我信息的手段也是各種各樣。。。

在現(xiàn)實(shí)世界里，沒(méi)有什么會(huì)保持不變的。

作為一名開(kāi)發(fā)者，你要時(shí)刻保持警惕，有危機(jī)意識(shí)，第一時(shí)間更新你的技術(shù)以應(yīng)對(duì)外部環(huán)境的變化，否則你就會(huì)被淘汰。

當(dāng)前題目：前端程序員注意了，瀏覽器即將全面禁用三方Cookie
文章轉(zhuǎn)載：http://www.5511xx.com/article/djeppsp.html