一、應(yīng)用場景：

場景一：在網(wǎng)站上瀏覽某個(gè)商品霸琴，了解了相關(guān)的商品信息，但并沒有下單購買拣宏，甚至沒有進(jìn)行登錄操作沈贝。過兩天用同臺(tái)電腦訪問其他網(wǎng)站的時(shí)候卻發(fā)現(xiàn)很多同類商品的廣告。

場景二：在未登錄視頻賬號的情況下勋乾，去瀏覽一些二次元的長視頻或短視頻宋下，通過瀏覽器指紋將這一行為記錄下來，下次登錄時(shí)的個(gè)性化推薦辑莫，直接推送用戶大概率喜歡的二次元內(nèi)容学歧，獲得用戶好感，轉(zhuǎn)變?yōu)榫W(wǎng)站會(huì)員各吨。

前提條件：大多數(shù)瀏覽器都啟用了 JavaScript 功能枝笨，它向外部公開了大量關(guān)于你的瀏覽器的信息。

好壞要辯證的看：

壞處-泄露用戶隱私信息? ：我的瀏覽器在任何地方和時(shí)間都能被識(shí)別出來嗎揭蜒？

這里有幾個(gè)網(wǎng)站横浑，比如 AmIUnique 和 Panopticlick，它們會(huì)基于數(shù)據(jù)庫內(nèi)大約 100 萬個(gè)指紋信息屉更，來確定你的瀏覽器指紋信息是否唯一徙融。然而，45 天和 2 年的時(shí)間足夠讓你的瀏覽器指紋發(fā)生改變瑰谜，而這不需要你做任何事情欺冀。導(dǎo)致這種變化的可能是瀏覽器自動(dòng)更新、調(diào)整窗口大小萨脑、安裝新字體隐轩，甚至調(diào)整夏令時(shí)。所有這些都會(huì)讓你的瀏覽器在很長一段時(shí)間內(nèi)很難再次被唯一識(shí)別渤早。這些網(wǎng)站將你的指紋與他們的整個(gè)數(shù)據(jù)庫進(jìn)行比較职车，該數(shù)據(jù)庫包含了至少兩到三年（或 Panopticlick 則是 45 天）收集的數(shù)據(jù)。

好處-完善風(fēng)控機(jī)制

（比如一般情況下只需要通過郵箱和密碼就可以登錄鹊杖。如果有一天小偷盜取了你的登錄憑證并試圖從他的設(shè)備上登錄提鸟，銀行或社交網(wǎng)絡(luò)是可以檢測到這種異常行為的，因?yàn)闉g覽器指紋發(fā)生了變化仅淑。為了防止被詐騙称勋，平臺(tái)可能會(huì)要求你做出進(jìn)一步的授權(quán)，比如短信驗(yàn)證碼涯竟。）

二赡鲜、什么是瀏覽器指紋

就像人的身份證號一樣空厌，瀏覽器指紋就是瀏覽器唯一不變的身份證明，

概念解釋：“瀏覽器指紋”是一種通過瀏覽器對網(wǎng)站可見的配置和設(shè)置信息來跟蹤Web瀏覽器的方法

通過獲取瀏覽器具有辨識(shí)度的信息银酬，進(jìn)行一些計(jì)算得出一個(gè)值嘲更，那么這個(gè)值就是瀏覽器指紋。辨識(shí)度的信息可以是UA揩瞪、時(shí)區(qū)赋朦、地理位置或者是你使用的語言等等，你所選取的信息決定了瀏覽器指紋的準(zhǔn)確性李破。

三宠哄、瀏覽器指紋技術(shù)發(fā)展

1.第一代是狀態(tài)化的，主要集中在用戶的cookie和evercookie上嗤攻，需要用戶登錄才可以得到有效的信息毛嫉。

注：evercookie解釋

2.第二代才有了瀏覽器指紋的概念，通過不斷增加瀏覽器的特征值從而讓用戶更具有區(qū)分度妇菱，例如（UA承粤、瀏覽器插件信息）

3.第三代已經(jīng)將目光放在人身上了，通過收集用戶的行為闯团、習(xí)慣來為用戶建立特征值甚至模型辛臊，可以實(shí)現(xiàn)真正的追蹤技術(shù)，（這部分目前實(shí)現(xiàn)比較復(fù)雜房交，依然在探索中蟋定。）

四嫩海、指紋采集

瀏覽器指紋也可以進(jìn)行簡單的分為普通指紋和高級指紋雏门，普通指紋可以理解為容易被發(fā)現(xiàn)并且容易修改的部分

普通指紋：

例如http header

https://httpbin.org/headers

瀏覽器的Accept-Language岸梨、User-Agent冬骚，通過前者可以拿到瀏覽器的語言信息矾踱，這個(gè)http頭部實(shí)體信息可能是通過你當(dāng)前的操作系統(tǒng)語言蓬推，或者瀏覽器設(shè)置的語言信息所生成的婴渡。User-Agent包含了瀏覽器和操作系統(tǒng)的信息

其他的基本信息济炎，例如ip川抡，物理地址、地理位置等也可以拿到：

查看自己的二代指紋

https://fingerprintjs.com/demo须尚，https://www.whatismybrowser.com/

指紋可以包括如下信息：

下圖是數(shù)個(gè)特征值的信息熵崖堤、重復(fù)概率和具體的值

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

https://www.whatismybrowser.com/

將上面的指紋信息綜合起來撩轰，可以大大降低碰撞率胯甩，提高客戶端uuid的準(zhǔn)確性昧廷。指紋的也有權(quán)重之分，某些信息熵較大的特征值會(huì)有的更大的權(quán)重

計(jì)算方式：https://www.eff.org/deeplinks/2010/01/primer-information-theory-and-privacy

高級指紋

canvas指紋

Canvas是HTML5中的動(dòng)態(tài)繪圖標(biāo)簽偎箫，也可以用它生成圖片或者處理圖片木柬。即便使用Canvas繪制相同的元素，但是由于系統(tǒng)的差別淹办，字體渲染引擎不同眉枕，對抗鋸齒、次像素渲染等算法也不同怜森，canvas將同樣的文字轉(zhuǎn)成圖片速挑，得到的結(jié)果也是不同的。

function getCanvasFingerprint () {

? ? var canvas = document.getElementById("anchor-uuid");

? ? var context = canvas.getContext("2d");

? ? context.font = "18pt Arial";

? ? context.textBaseline = "top";

? ? context.fillText("Hello, user.", 2, 2);

? ? return canvas.toDataURL("image/jpeg");

}

測試指紋https://browserleaks.com/canvas

AudioContex指紋

AudioContext指紋和Canvas類似也是基于硬件設(shè)備或者軟件的差別塔插，來產(chǎn)生不同的音頻輸出梗摇，然后計(jì)算得到不同的hash來作為標(biāo)志，當(dāng)然這里的音頻并沒有直接在瀏覽器中播放出來想许，只需要拿到播放前的處理數(shù)據(jù)就行伶授，音頻指紋測試地址

WebRTC

WebRTC（網(wǎng)頁實(shí)時(shí)通信，Web Real Time Communication）流纹，是可以讓瀏覽器有音視頻實(shí)時(shí)通信的能力糜烹，它提供了三個(gè)主要的API來讓JS可以實(shí)時(shí)獲取和交換音視頻數(shù)據(jù)，MediaStream漱凝、RTCPeerConnection和RTCDataChannel疮蹦。當(dāng)然如果要使用WebRTC獲得通信能力，用戶的真實(shí)ip就得暴露出來（NAT穿透）茸炒，所以RTCPeerConnection就提供了這樣的API愕乎，直接使用JS就可以拿到用戶的IP地址。

現(xiàn)階段難點(diǎn)：

跨瀏覽器指紋

跨瀏覽器指紋就是即便是在不同瀏覽器上也可以取得相同或者近似值的穩(wěn)定瀏覽器特征壁公。

常規(guī)的特征值很難滿足在信息量足夠的情況下還保持高穩(wěn)定性感论。（canvas穩(wěn)定性8%）

挑選幾個(gè)表中和硬件有關(guān)的特征值Task(a)~Task(r)、List of fonts（JS）紊册、TimeZone和CPU Vritual cores比肄、

Task(a)~Task(r)，它是一種顯卡渲染(Rendering Tasks)圖片的特征值囊陡。例如Task（a）Texture芳绩，它是測試常規(guī) 片段著色器中的紋理功能，通過渲染一個(gè)隨機(jī)的三基色值的像素撞反，片段著色器需要在紋理中插入點(diǎn)妥色，以便將紋理映射到模型上的每個(gè)點(diǎn)，這個(gè)插入算法在不同的顯卡又是不一致的遏片。如果紋理變化較大嘹害，那么差異也就越明顯鳍侣，我們可以通過記錄這種差異來為這個(gè)顯卡作出區(qū)分度。

List of fonts（JS）吼拥，通過js獲取頁面支持的字體情況倚聚。獲取頁面支持的字體分為兩種方式，F(xiàn)lash和JS凿可，現(xiàn)在Flash漸漸退出了舞臺(tái)就不考慮它了惑折。List of fonts是值通過js拿到頁面支持的字體情況以及如何繪制字體，是通過測量不同字體的文本HTML元素的填充尺寸枯跑，來和其他設(shè)備做區(qū)分惨驶。

TimeZone，時(shí)區(qū)敛助，這個(gè)比較好理解粗卜，既然是同一臺(tái)設(shè)備那么時(shí)區(qū)應(yīng)該也是一致的。

CUP Vritual cores即為CPU的內(nèi)核數(shù)量纳击，最簡單的方法就是通過一個(gè)navigator.hardwareConcurrency來拿到续扔。

盡管在低版本瀏覽器是不支持這個(gè)API的，但也可以通過這個(gè)polyfill拿到焕数。實(shí)現(xiàn)原理大致為借用Web Worker的能力纱昧，監(jiān)聽payload的時(shí)間，計(jì)算量達(dá)到硬件最大并發(fā)的時(shí)候就可以得到內(nèi)核的數(shù)量（有點(diǎn)硬核）堡赔。

UUID的計(jì)算

綜合以上的指標(biāo)特征识脆，可以計(jì)算出一個(gè)屬于你自己的唯一的 uuid，這就是你的 "瀏覽器指紋" 了善已。

使用 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);

五、如何防范瀏覽器指紋采集

現(xiàn)狀：如果你沒有足夠?qū)I(yè)的知識(shí)或者非常頻繁更換瀏覽器信息的話换团，幾乎100%可以通過瀏覽器指紋定位到一個(gè)用戶

使用瀏覽器指紋的利弊：

1.泄露的隱私非常片面悉稠，只能說泄露了用戶部分瀏覽網(wǎng)頁時(shí)的行為。

2.價(jià)值不夠啥寇，用戶行為并未將實(shí)際的賬戶或者具體的人對應(yīng)起來偎球，產(chǎn)生的價(jià)值有限洒扎。

3.有益利用辑甜，利用瀏覽器指紋可以隔離部分黑產(chǎn)用戶，防止刷票或者部分惡意行為袍冷。

防范措施

1.Do Not Track

在http頭部可以聲明這樣一個(gè)標(biāo)志“DNT”意味“Do Not Track”磷醋，如果值為1表示為不要追蹤我的網(wǎng)頁行為，0則為可以追蹤胡诗。即便沒有cookie也可以通過這個(gè)標(biāo)志符告訴服務(wù)器我不想被追蹤到邓线，不要記錄我的行為淌友。

不好的消息是大多數(shù)網(wǎng)站目前并沒有遵守這個(gè)約定，完全忽略了“Do Not Track”這個(gè)信號骇陈。

工具Privacy Badger震庭，它是一個(gè)瀏覽器插件形式的廣告攔截器，對于那些遵守這個(gè)約定的公司會(huì)在這個(gè)廣告攔截器的白名單上你雌，允許顯示廣告器联，從而激勵(lì)更多的公司遵守“Do Not Track”，以便完全展示廣告婿崭。

2.Tor Browser

通過上述我們對瀏覽器指紋的了解拨拓，不難發(fā)現(xiàn)，如果你瀏覽器的特征越多氓栈，越容易被追蹤到渣磷。相反如果你想要刻意將某些瀏覽器特征隱藏或者進(jìn)行魔改，那么恭喜你授瘦，你的瀏覽器可能就擁有了一個(gè)獨(dú)一無二的瀏覽器指紋醋界，都不需要刻意去計(jì)算，直接就可以將你和其他用戶區(qū)分開提完。

所以有效的方法是盡量將特征值進(jìn)行大眾化物独，例如目前市面最廣泛的搭配是Window 10 + Chrome，那么你將UA改為這個(gè)組合就是一個(gè)有效的方法氯葬，同時(shí)盡量避免網(wǎng)站獲取信息熵非常高的特征值挡篓，例如canvas指紋。

Tor 瀏覽器在這上面做了很多工作帚称，以防止它們被用來跟蹤Tor用戶官研，為了響應(yīng)Panopticlick和其他指紋識(shí)別實(shí)驗(yàn)，Tor瀏覽器現(xiàn)在包含一些補(bǔ)丁程序闯睹，以防止字體指紋（通過限制網(wǎng)站可以使用的字體）和Canvas指紋（通過檢測對HTML5 Canvas對象的讀取并要求用戶批準(zhǔn)）來防止戏羽，例如上面獲取Canvas指紋的代碼，在Tor上會(huì)彈出如下警告

同時(shí)還可以將Tor瀏覽器配置為主動(dòng)阻止JavaScript楼吃。

3.禁用JS

這是一個(gè)比較暴力的方法始花，直接禁止網(wǎng)站使用JavaScript可以非常有效地防御瀏覽器指紋追蹤，但是這樣會(huì)導(dǎo)致頁面較大部分地功能不可用孩锡。

而且非常不幸的是酷宵，即便禁止了JS但是還可以通過CSS來采取瀏覽器的信息，例如：

@media(device-width: 1080px) {

? body {

? ? background: url("https://example.org/1080.png");

? }

}

可以在服務(wù)器中看1080.png圖片的請求日志躬窜，就可以得知哪些用戶的屏幕是1080px的浇垦， 在 Mozilla Firefox 中，甚至曾經(jīng)存在過可以直接查詢 Windows 系統(tǒng)版本和 Windows 主題的 CSS 查詢∪侔ぃ現(xiàn)在這個(gè)問題已經(jīng)被修復(fù)了

實(shí)驗(yàn)表明男韧，通過提取 3 個(gè)基本的瀏覽器特征朴摊，即日期格式、用戶代理字符集和屏幕可用大写寺恰（屏幕大小減去程序塢甚纲、窗口欄等的大小）朦前，我們可以實(shí)現(xiàn) 14.2 的熵贩疙，在某些情況下，這已經(jīng)足夠識(shí)別瀏覽器（以及用戶）况既。