瀏覽器指紋簡(jiǎn)介

這個(gè)網(wǎng)站在我沒(méi)登錄的情況下，就能生成一個(gè)用戶ID。即使我打開(kāi)了瀏覽器的無(wú)痕模式，生成出來(lái)的ID也是一模一樣。這背后的技術(shù)就是瀏覽器指紋。即使用戶沒(méi)有登錄，甚至開(kāi)啟了無(wú)痕模式，網(wǎng)站通過(guò)瀏覽器指紋，依然能夠準(zhǔn)確的知道用戶身份。

本期視頻，我們來(lái)看一下什么是瀏覽器指紋，為什么網(wǎng)站要搜集瀏覽器指紋，以及這背后的技術(shù)實(shí)現(xiàn)原理。

瀏覽器指紋的組成元素

每當(dāng)我們?cè)L問(wèn)一些網(wǎng)站的時(shí)候，這些網(wǎng)站都會(huì)悄悄收集著關(guān)于瀏覽器的相關(guān)各種細(xì)節(jié)，比如IP地址、USER AGENT、用戶時(shí)區(qū)、瀏覽器插件，甚至你電腦上安裝的字體。這些看似無(wú)關(guān)緊要的信息，當(dāng)匯聚到一起時(shí)，就形成了一個(gè)瀏覽器指紋。這個(gè)指紋在大多數(shù)情況下都是獨(dú)一無(wú)二的，就像現(xiàn)實(shí)生活中的指紋一樣，它能讓網(wǎng)站識(shí)別出一個(gè)個(gè)獨(dú)立的訪客。

即使清除了cookie或者使用了隱私模式，網(wǎng)站也能使用技術(shù)手段收集到用戶瀏覽器指紋，精準(zhǔn)的識(shí)別訪客。無(wú)痕模式僅僅是清空了cookie，并且不保存cookie，但是并不能阻止網(wǎng)站追蹤用戶。

Fingerprintjs項(xiàng)目介紹

https://github.com/fingerprintjs/fingerprintjs

fingerprintjs，這是github上面的一個(gè)開(kāi)源項(xiàng)目，可以看到這個(gè)倉(cāng)庫(kù)有2萬(wàn)多的star數(shù)量。這個(gè)項(xiàng)目包含了大部分瀏覽器指紋的相關(guān)技術(shù)，并且有完整的源代碼實(shí)現(xiàn)。

我們往下找，找到這里的Demo，點(diǎn)擊這個(gè)鏈接，就可以進(jìn)入視頻開(kāi)頭的那個(gè)演示網(wǎng)站。這里顯示出根據(jù)瀏覽器指紋計(jì)算出來(lái)的訪客ID。除了ID以外，下面還有一系列計(jì)算訪客ID所需要的特征值。

視頻的后半段，我會(huì)講一下這些特征值都是什么，以及背后的實(shí)現(xiàn)原理。

網(wǎng)站收集瀏覽器指紋的目的

瀏覽器指紋一般會(huì)用于廣告。我們?yōu)g覽一些沒(méi)登錄的網(wǎng)站的時(shí)候，廣告聯(lián)盟的廣告推送服務(wù)都會(huì)默默地收集這些瀏覽器指紋，并且與你正在瀏覽的網(wǎng)頁(yè)進(jìn)行一個(gè)綁定。這樣廣告商就能更精準(zhǔn)地識(shí)別你喜歡什么樣的東西，方便廣告商更精準(zhǔn)地推送廣告。

第二個(gè)用法是網(wǎng)站防刷。電商網(wǎng)站和社交平臺(tái)都希望自己的用戶是真實(shí)的，他們通常不愿意看到一個(gè)人掌握著大量的用戶。通過(guò)瀏覽器指紋，網(wǎng)站就可以識(shí)別出哪些賬號(hào)是同一個(gè)人操作的，從而設(shè)置相應(yīng)的安全政策，保護(hù)網(wǎng)站防止被爬蟲(chóng)，防止被刷數(shù)據(jù)。

IP地址的作用

每個(gè)接入互聯(lián)網(wǎng)中的設(shè)備，都需要一個(gè)唯一的地址來(lái)進(jìn)行通訊，這個(gè)地址稱為IP地址。網(wǎng)站可以通過(guò)解析網(wǎng)絡(luò)層的數(shù)據(jù)報(bào)文，就可以得知源IP地址，也就是用戶測(cè)的IP地址。網(wǎng)站獲取到的IP地址，一般是用戶的公網(wǎng)IP地址。

爬爬蝦之前有一個(gè)完整視頻，介紹了什么是公網(wǎng)IP，什么是內(nèi)網(wǎng)IP，還有典型的家庭網(wǎng)絡(luò)的拓?fù)浣Y(jié)構(gòu)，感興趣的觀眾可以找來(lái)看一下。

比如，百度就提供查看自己IP地址的服務(wù)。我們?cè)谒阉鳈谒阉鱅P地址，就可以看到自己的公網(wǎng)IP地址。網(wǎng)站可以通過(guò)這個(gè)信息來(lái)定位用戶、定制內(nèi)容，并且進(jìn)行安全檢查，比如識(shí)別異常登錄行為或者防止欺詐。網(wǎng)站可以通過(guò)IP地址對(duì)訪問(wèn)進(jìn)行過(guò)濾，比如屏蔽掉一部分地區(qū)的網(wǎng)絡(luò)請(qǐng)求。

IP地址與地理位置信息

通過(guò)IP地址，網(wǎng)站可以了解用戶的國(guó)家、地區(qū)、城市、經(jīng)緯度等等。有時(shí)候甚至可以獲得郵政編碼或者社區(qū)等更具體的地理位置信息。

網(wǎng)上有很多這種通過(guò)IP地址來(lái)查找地理位置的數(shù)據(jù)庫(kù)。這個(gè)網(wǎng)站https://ip-api.com就提供了一個(gè)IP地址查找地理位置的服務(wù)。

我們往下找，這里可以輸入一個(gè)IP地址，通過(guò)這個(gè)IP地址就可以查找它對(duì)應(yīng)的地理位置。

我們可以看到，這個(gè)IP地址的歸屬地是安徽，并且右邊給出了一個(gè)地圖，顯示出了大概位置。這里還有對(duì)應(yīng)的經(jīng)緯度，isp也就是運(yùn)營(yíng)商的名字，這里顯示出的是江蘇電信。

時(shí)區(qū)信息的獲取

有了IP地址提供的位置信息，網(wǎng)站也可以推算出用戶的時(shí)區(qū)。這里的timezone顯示出了用戶的時(shí)區(qū)，是亞洲上海。

同樣的，網(wǎng)站也可以通過(guò)用戶瀏覽器的js代碼來(lái)得知對(duì)應(yīng)的時(shí)區(qū)。這里我在瀏覽器上點(diǎn)擊F12，我們切換到控制臺(tái)這里，輸入這段代碼回車。這里通過(guò)js代碼獲取到了我瀏覽器本地的時(shí)區(qū)，還有本地的時(shí)間。

console.log(`本地時(shí)間: ${new Date().toLocaleString()}`);console.log(`時(shí)區(qū): ${Intl.DateTimeFormat().resolvedOptions().timeZone}`);

這里獲取到的時(shí)區(qū)還有時(shí)間，其實(shí)就是我操作系統(tǒng)的時(shí)區(qū)還有時(shí)間。一般來(lái)說(shuō)，通過(guò)js代碼獲取出來(lái)的時(shí)區(qū)應(yīng)該能跟用戶IP地址對(duì)應(yīng)出來(lái)的時(shí)區(qū)對(duì)應(yīng)上。如果網(wǎng)站檢測(cè)到這兩個(gè)信息的不一致，可能會(huì)引起網(wǎng)站的注意，特別是那種帶有防欺詐系統(tǒng)的網(wǎng)站，他們可能會(huì)尋找到這種不匹配，作為用戶異常行為的指標(biāo)。

Canvas指紋技術(shù)

canvas是網(wǎng)頁(yè)上一個(gè)可以讓程序繪制圖形的區(qū)域。

網(wǎng)站可以通過(guò)在canvas上繪制復(fù)雜的圖形跟文字，然后分析這些內(nèi)容在電腦上的具體顯示方式。

因?yàn)槊颗_(tái)電腦顯示這些圖形和文字的細(xì)節(jié)都有微小的不同，比如輪廓、陰影、顏色和像素排列方式都有細(xì)微的差異。這些微小的差異反映了電腦上的一系列設(shè)置和硬件特性，比如屏幕分辨率、使用的字體、還有顯卡等等。

因?yàn)槊總€(gè)人電腦上的配置都是獨(dú)一無(wú)二的，這使得canvas繪制出來(lái)的圖形成為一種特殊的數(shù)字指紋。網(wǎng)站可以利用這個(gè)指紋來(lái)識(shí)別和追蹤用戶。

比如我們可以通過(guò)這一段js代碼來(lái)生成上面這一個(gè)小的canvas區(qū)域。

這里面是一個(gè)gif動(dòng)畫，但是根據(jù)統(tǒng)計(jì)，調(diào)查了總共35個(gè)用戶，他們電腦上生成出來(lái)的圖片呈現(xiàn)方式都是不同的，雖然下面的js代碼是一樣的。

有了圖片以后，我們可以調(diào)用這個(gè)方法toDataURL函數(shù)把圖片提取出像素，并且返回一個(gè)二進(jìn)制圖像文件的base64編碼。然后我們可以計(jì)算這個(gè)編碼的MD5哈希值，從而得到canvas的指紋。

這里我通過(guò)網(wǎng)站測(cè)試了一下，他通過(guò)canvas計(jì)算生成了一個(gè)canvas的簽名。

僅僅依靠這一個(gè)canvas指紋的區(qū)分，就可以做到10萬(wàn)個(gè)用戶里面僅僅有兩個(gè)人的指紋是重復(fù)的。配合上其他的瀏覽器指紋，可以非常精準(zhǔn)的識(shí)別和追蹤用戶。

WebGL指紋技術(shù)

WebGL是一種JavaScript API，它可以在瀏覽器里面利用顯卡繪制3D圖形。

這樣網(wǎng)站就可以收集用戶的顯卡詳細(xì)信息，從而創(chuàng)建獨(dú)一無(wú)二的瀏覽器指紋。

這個(gè)收集用戶瀏覽器指紋的方式跟那個(gè)canvas有點(diǎn)像。網(wǎng)站首先繪制這么一個(gè)3D圖像，然后他分析這個(gè)圖像細(xì)節(jié)上的微小不同，生成一個(gè)哈希值。這個(gè)哈希值就可以精確的反映我電腦顯卡的一些硬件特性還有一些細(xì)微的硬件設(shè)置。

音頻指紋技術(shù)

Audio Context是瀏覽器提供的一組工具，它能夠生成跟處理音頻，讓網(wǎng)站能夠播放跟修改聲音。

每個(gè)設(shè)備處理聲音的細(xì)微差異都可以被網(wǎng)站捕捉到，形成一種特殊的聲音指紋。它反映了每個(gè)人電腦上的不同音頻硬件和軟件的設(shè)置，所以它也就成為了瀏覽器指紋之一。

我們可以在這個(gè)頁(yè)面測(cè)試一下自己的音頻指紋。這里有一個(gè)可視化的圖形，紅色部分是標(biāo)準(zhǔn)的音頻，可以看到我電腦生成出來(lái)的跟標(biāo)準(zhǔn)音頻還是有一些細(xì)微差異的。通過(guò)計(jì)算這些細(xì)微的差異，最終得到一個(gè)哈希值，這個(gè)哈希值也就是我電腦上的音頻指紋。

User Agent信息

User Agent是一個(gè)瀏覽器發(fā)送給網(wǎng)站的字符串，它包含了瀏覽器的類型、版本、操作系統(tǒng)等信息。我們?cè)跒g覽器按F12，找到這里的網(wǎng)絡(luò)選項(xiàng)卡，我們?cè)L問(wèn)任意一個(gè)網(wǎng)站，這里我們找到一個(gè)網(wǎng)絡(luò)請(qǐng)求，在網(wǎng)絡(luò)請(qǐng)求的Header RequestHeader里面，我們往下找，最下面就有一個(gè)User Agent。

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36 Edg/129.0.0.0

在我電腦上，這個(gè)User Agent長(zhǎng)這個(gè)樣子：

首先這里有我操作系統(tǒng)的版本，就是Windows 64。可能有的觀眾會(huì)好奇，爬爬蝦我這明明是Edge瀏覽器，為什么User Agent里面有一堆Mozilla，還有蘋果，包括這個(gè)Safari的內(nèi)容呢？

這一大串冗余的字符串都是新誕生的瀏覽器，為了不被其他老牌瀏覽器排擠，不得不假扮成其他人，從而留下的歷史遺留問(wèn)題。等以后有機(jī)會(huì)我會(huì)專門出一期視頻講講這部分的內(nèi)容。

所以這個(gè)User Agent里面真正有價(jià)值的只有我操作系統(tǒng)的信息，還有最后這一部分標(biāo)明我是Edge瀏覽器，使用的是Chromium內(nèi)核129。

網(wǎng)站可以利用User Agent提供的信息為用戶提供與設(shè)備和瀏覽器兼容的內(nèi)容和功能。比如網(wǎng)站可以利用操作系統(tǒng)信息來(lái)判斷提供手機(jī)版還是網(wǎng)頁(yè)版的網(wǎng)站。當(dāng)然User Agent也是瀏覽器指紋的重要組成部分，因?yàn)檫@里表明了操作系統(tǒng)還有瀏覽器版本等重要信息。

瀏覽器語(yǔ)言設(shè)置

瀏覽器語(yǔ)言通常指的是用戶在瀏覽器里設(shè)置的首選語(yǔ)言。這決定了用戶在訪問(wèn)多語(yǔ)言網(wǎng)站時(shí)看到的默認(rèn)語(yǔ)言版本。

我們還是從剛才的那個(gè)請(qǐng)求里，在Header的RequestHeader里面，這里有一個(gè)Accept-Language，里面有這么一串的內(nèi)容。這里面是許多語(yǔ)言的類型，通常按照用戶設(shè)置的偏好進(jìn)行排列。

瀏覽器語(yǔ)言可以通過(guò)瀏覽器的設(shè)置進(jìn)行更改。我們以這個(gè)Edge瀏覽器舉例，這里點(diǎn)擊設(shè)置，找到設(shè)置，在左側(cè)找到語(yǔ)言，這里就可以設(shè)置瀏覽器的偏好語(yǔ)言。用戶可以列出多個(gè)語(yǔ)言，以便網(wǎng)站從中選擇一個(gè)最適合的語(yǔ)言來(lái)顯示內(nèi)容。當(dāng)然我這個(gè)語(yǔ)言的順序列表也是瀏覽器指紋的重要組成部分。

字體信息收集

每臺(tái)計(jì)算機(jī)上安裝的字體集合可能會(huì)因?yàn)橛脩舻膫€(gè)人選擇、操作系統(tǒng)等等的因素有所不同。比如在我的電腦上，我就安裝過(guò)思源黑體等等的開(kāi)源免費(fèi)字體。我之前有個(gè)視頻，介紹如何在github上面下載開(kāi)源免費(fèi)的字體。

瀏覽器可以通過(guò)一些復(fù)雜的JavaScript腳本列出用戶設(shè)備上所有可用的字體。我們找到視頻開(kāi)頭說(shuō)的這個(gè)Fingerprint js這個(gè)庫(kù)，我們?cè)谒脑创a里面可以找到這個(gè)fonts.ts文件。

fingerprintjs/src/sources/fonts.ts at master · fingerprintjs/fingerprintjs (github.com)

這套代碼通過(guò)這個(gè)span的方式逐個(gè)繪制上面字體列表里面的字體，然后通過(guò)這個(gè)方法來(lái)判斷這些字體是否繪制成功。如果繪制成功，那代表用戶的計(jì)算機(jī)上安裝過(guò)這個(gè)字體。

即使兩個(gè)用戶使用了相同版本的瀏覽器和相同版本的操作系統(tǒng)，他們安裝過(guò)的字體很可能不同。這也成為了使用瀏覽器指紋區(qū)分用戶的另外一種重要方式。

屏幕分辨率信息

屏幕分辨率不僅包括物理屏幕的實(shí)際像素?cái)?shù)，還包括瀏覽器窗口的當(dāng)前視圖大小，也就是瀏覽器內(nèi)部除去工具欄、標(biāo)簽欄、滾動(dòng)條等等內(nèi)部實(shí)際可用窗口的大小。每個(gè)人窗口設(shè)置不同，它的可視區(qū)域大小也是不同的，所以通過(guò)屏幕分辨率的取值也能取得一個(gè)相對(duì)獨(dú)特的指紋。

我們來(lái)演示一下如何使用js代碼獲取用戶的分辨率。這里點(diǎn)擊F12，打開(kāi)一個(gè)新的控制臺(tái)窗口，切換到控制臺(tái)，然后我把這段代碼粘過(guò)來(lái)。

const screenWidth = window.screen.width*window.devicePixelRatio;const screenHeight = window.screen.height*window.devicePixelRatio;console.log(`屏幕分辨率為: ${screenWidth}x${screenHeight}`);const browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;console.log(`屏幕內(nèi)部寬度: ${browserWidth*window.devicePixelRatio}`);const browserHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;console.log(`屏幕內(nèi)部高度: ${browserHeight*window.devicePixelRatio}`);

這段代碼獲取的是用戶屏幕的實(shí)際分辨率，可以看到我的屏幕分辨率是2K。下面這段代碼可以獲取用戶瀏覽器里面實(shí)際可用窗口的大小，這里我再回車一下。這里顯示的是瀏覽器內(nèi)部的實(shí)際可用寬度跟高度。

Client Rects布局信息

Client Rects它是一種瀏覽器的API，它提供了網(wǎng)頁(yè)元素的布局信息，包括元素的位置跟大小，稱之為矩形，也就是RECT。兩臺(tái)設(shè)備打開(kāi)的即使是同一個(gè)頁(yè)面，由于它們的硬件配置、操作系統(tǒng)、瀏覽器版本、屏幕分辨率等等細(xì)微差異，渲染出來(lái)的網(wǎng)頁(yè)元素布局信息可能也會(huì)有所不同。這些差異可以被用來(lái)組裝成一個(gè)特殊的字符串，也就是瀏覽器指紋。

我們來(lái)看一下它的實(shí)現(xiàn)原理：

1. 首先選擇或者生成一個(gè)元素
   
2. 然后獲取元素的Client Rects
3. 第三步處理或者記錄這個(gè)Client Rects，比如網(wǎng)站可能會(huì)計(jì)算元素的面積或者比較元素的位置跟其他元素位置的相對(duì)信息
4. 最后通過(guò)這些信息生成瀏覽器指紋

語(yǔ)音合成與硬件信息

瀏覽器這里的大聲朗讀此頁(yè)面功能，這里面有一個(gè)語(yǔ)言選項(xiàng)，在這里可以選擇所有可供使用的AI語(yǔ)音列表。

這個(gè)列表同樣可以被網(wǎng)站獲取到，變成一個(gè)瀏覽器指紋。

我們還是進(jìn)入這個(gè)網(wǎng)站browserleaks.com：

?

這里往下找有一個(gè)Speech Voices，這里網(wǎng)站就可以通過(guò)js代碼獲取到這個(gè)列表。

當(dāng)然這個(gè)列表也是瀏覽器指紋，因?yàn)槊總€(gè)人的列表可能都是不一樣的。

網(wǎng)站可以通過(guò)js代碼獲取兩個(gè)硬件指標(biāo)，這兩個(gè)硬件指標(biāo)同樣可以作為瀏覽器指紋。我們還是打開(kāi)瀏覽器的控制臺(tái)，我們先輸入第一個(gè)命令，這個(gè)navigator.hardwareConcurrency，這里指的是你電腦一共有多少個(gè)線程。我的電腦是8核16線程的，這里顯示出了16。

第二個(gè)硬件參數(shù)是電腦的內(nèi)存，這里我們輸入這個(gè)代碼navigator.deviceMemory，這就是顯示我這臺(tái)電腦的內(nèi)存。這里顯示的是8GB，不過(guò)我這個(gè)電腦是16GB的，這個(gè)API最多只能獲取到8GB。

指紋瀏覽器的應(yīng)對(duì)方案

俗話說(shuō)魔高一尺道高一丈，為了應(yīng)對(duì)網(wǎng)站搜集瀏覽器指紋，一種專門定制的瀏覽器，也就是指紋瀏覽器被發(fā)明出來(lái)。它們的主要功能是讓用戶可以自由定制、改變并且偽裝自己的瀏覽器指紋。這種瀏覽器可以允許你在一臺(tái)電腦上登陸上百個(gè)賬戶，這些賬戶都擁有著各自不同的指紋，這樣就可以避免觸發(fā)網(wǎng)站的風(fēng)控。

現(xiàn)在市面上有很多這種品類的瀏覽器，不過(guò)呢他們大部分都是收費(fèi)的。為了避免恰飯嫌疑，爬爬蝦這里就不做推薦了，各位如果感興趣的話可以自己找來(lái)看一下。