瀏覽器指紋是什么？14種指紋的技術原理
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
瀏覽器指紋簡介這個網站在我沒登錄的情況下，就能生成一個用戶ID。即使我打開了瀏覽器的無痕模式，生成出來的ID也是一模一樣。這背后的技術就是瀏覽器指紋。即使用戶沒有登錄，甚至開啟了無痕模式，網站通過瀏覽器指紋，依然能夠準確的知道用戶身份。 本期視頻，我們來看一下什么是瀏覽器指紋，為什么網站要搜集瀏覽器指紋，以及這背后的技術實現原理。 瀏覽器指紋的組成元素每當我們訪問一些網站的時候，這些網站都會悄悄收集著關于瀏覽器的相關各種細節，比如IP地址、USER AGENT、用戶時區、瀏覽器插件，甚至你電腦上安裝的字體。這些看似無關緊要的信息，當匯聚到一起時，就形成了一個瀏覽器指紋。這個指紋在大多數情況下都是獨一無二的，就像現實生活中的指紋一樣，它能讓網站識別出一個個獨立的訪客。 即使清除了cookie或者使用了隱私模式，網站也能使用技術手段收集到用戶瀏覽器指紋，精準的識別訪客。無痕模式僅僅是清空了cookie，并且不保存cookie，但是并不能阻止網站追蹤用戶。 Fingerprintjs項目介紹https://github.com/fingerprintjs/fingerprintjs fingerprintjs，這是github上面的一個開源項目，可以看到這個倉庫有2萬多的star數量。這個項目包含了大部分瀏覽器指紋的相關技術，并且有完整的源代碼實現。
我們往下找，找到這里的Demo，點擊這個鏈接，就可以進入視頻開頭的那個演示網站。這里顯示出根據瀏覽器指紋計算出來的訪客ID。除了ID以外，下面還有一系列計算訪客ID所需要的特征值。
視頻的后半段，我會講一下這些特征值都是什么，以及背后的實現原理。 網站收集瀏覽器指紋的目的瀏覽器指紋一般會用于廣告。我們瀏覽一些沒登錄的網站的時候，廣告聯盟的廣告推送服務都會默默地收集這些瀏覽器指紋，并且與你正在瀏覽的網頁進行一個綁定。這樣廣告商就能更精準地識別你喜歡什么樣的東西，方便廣告商更精準地推送廣告。 第二個用法是網站防刷。電商網站和社交平臺都希望自己的用戶是真實的，他們通常不愿意看到一個人掌握著大量的用戶。通過瀏覽器指紋，網站就可以識別出哪些賬號是同一個人操作的，從而設置相應的安全政策，保護網站防止被爬蟲，防止被刷數據。 IP地址的作用每個接入互聯網中的設備，都需要一個唯一的地址來進行通訊，這個地址稱為IP地址。網站可以通過解析網絡層的數據報文，就可以得知源IP地址，也就是用戶測的IP地址。網站獲取到的IP地址，一般是用戶的公網IP地址。 爬爬蝦之前有一個完整視頻，介紹了什么是公網IP，什么是內網IP，還有典型的家庭網絡的拓撲結構，感興趣的觀眾可以找來看一下。 比如，百度就提供查看自己IP地址的服務。我們在搜索欄搜索IP地址，就可以看到自己的公網IP地址。網站可以通過這個信息來定位用戶、定制內容，并且進行安全檢查，比如識別異常登錄行為或者防止欺詐。網站可以通過IP地址對訪問進行過濾，比如屏蔽掉一部分地區的網絡請求。 IP地址與地理位置信息通過IP地址，網站可以了解用戶的國家、地區、城市、經緯度等等。有時候甚至可以獲得郵政編碼或者社區等更具體的地理位置信息。
網上有很多這種通過IP地址來查找地理位置的數據庫。這個網站https://ip-api.com就提供了一個IP地址查找地理位置的服務。 我們往下找，這里可以輸入一個IP地址，通過這個IP地址就可以查找它對應的地理位置。 我們可以看到，這個IP地址的歸屬地是安徽，并且右邊給出了一個地圖，顯示出了大概位置。這里還有對應的經緯度，isp也就是運營商的名字，這里顯示出的是江蘇電信。 時區信息的獲取有了IP地址提供的位置信息，網站也可以推算出用戶的時區。這里的timezone顯示出了用戶的時區，是亞洲上海。 同樣的，網站也可以通過用戶瀏覽器的js代碼來得知對應的時區。這里我在瀏覽器上點擊F12，我們切換到控制臺這里，輸入這段代碼回車。這里通過js代碼獲取到了我瀏覽器本地的時區，還有本地的時間。
這里獲取到的時區還有時間，其實就是我操作系統的時區還有時間。一般來說，通過js代碼獲取出來的時區應該能跟用戶IP地址對應出來的時區對應上。如果網站檢測到這兩個信息的不一致，可能會引起網站的注意，特別是那種帶有防欺詐系統的網站，他們可能會尋找到這種不匹配，作為用戶異常行為的指標。 Canvas指紋技術canvas是網頁上一個可以讓程序繪制圖形的區域。
網站可以通過在canvas上繪制復雜的圖形跟文字，然后分析這些內容在電腦上的具體顯示方式。 因為每臺電腦顯示這些圖形和文字的細節都有微小的不同，比如輪廓、陰影、顏色和像素排列方式都有細微的差異。這些微小的差異反映了電腦上的一系列設置和硬件特性，比如屏幕分辨率、使用的字體、還有顯卡等等。 因為每個人電腦上的配置都是獨一無二的，這使得canvas繪制出來的圖形成為一種特殊的數字指紋。網站可以利用這個指紋來識別和追蹤用戶。 比如我們可以通過這一段js代碼來生成上面這一個小的canvas區域。
這里面是一個gif動畫，但是根據統計，調查了總共35個用戶，他們電腦上生成出來的圖片呈現方式都是不同的，雖然下面的js代碼是一樣的。 有了圖片以后，我們可以調用這個方法toDataURL函數把圖片提取出像素，并且返回一個二進制圖像文件的base64編碼。然后我們可以計算這個編碼的MD5哈希值，從而得到canvas的指紋。 這里我通過網站測試了一下，他通過canvas計算生成了一個canvas的簽名。
僅僅依靠這一個canvas指紋的區分，就可以做到10萬個用戶里面僅僅有兩個人的指紋是重復的。配合上其他的瀏覽器指紋，可以非常精準的識別和追蹤用戶。 WebGL指紋技術WebGL是一種JavaScript API，它可以在瀏覽器里面利用顯卡繪制3D圖形。
這樣網站就可以收集用戶的顯卡詳細信息，從而創建獨一無二的瀏覽器指紋。 這個收集用戶瀏覽器指紋的方式跟那個canvas有點像。網站首先繪制這么一個3D圖像，然后他分析這個圖像細節上的微小不同，生成一個哈希值。這個哈希值就可以精確的反映我電腦顯卡的一些硬件特性還有一些細微的硬件設置。 音頻指紋技術Audio Context是瀏覽器提供的一組工具，它能夠生成跟處理音頻，讓網站能夠播放跟修改聲音。
每個設備處理聲音的細微差異都可以被網站捕捉到，形成一種特殊的聲音指紋。它反映了每個人電腦上的不同音頻硬件和軟件的設置，所以它也就成為了瀏覽器指紋之一。 我們可以在這個頁面測試一下自己的音頻指紋。這里有一個可視化的圖形，紅色部分是標準的音頻，可以看到我電腦生成出來的跟標準音頻還是有一些細微差異的。通過計算這些細微的差異，最終得到一個哈希值，這個哈希值也就是我電腦上的音頻指紋。
User Agent信息User Agent是一個瀏覽器發送給網站的字符串，它包含了瀏覽器的類型、版本、操作系統等信息。我們在瀏覽器按F12，找到這里的網絡選項卡，我們訪問任意一個網站，這里我們找到一個網絡請求，在網絡請求的Header RequestHeader里面，我們往下找，最下面就有一個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 在我電腦上，這個User Agent長這個樣子：
首先這里有我操作系統的版本，就是Windows 64。可能有的觀眾會好奇，爬爬蝦我這明明是Edge瀏覽器，為什么User Agent里面有一堆Mozilla，還有蘋果，包括這個Safari的內容呢？ 這一大串冗余的字符串都是新誕生的瀏覽器，為了不被其他老牌瀏覽器排擠，不得不假扮成其他人，從而留下的歷史遺留問題。等以后有機會我會專門出一期視頻講講這部分的內容。 所以這個User Agent里面真正有價值的只有我操作系統的信息，還有最后這一部分標明我是Edge瀏覽器，使用的是Chromium內核129。 網站可以利用User Agent提供的信息為用戶提供與設備和瀏覽器兼容的內容和功能。比如網站可以利用操作系統信息來判斷提供手機版還是網頁版的網站。當然User Agent也是瀏覽器指紋的重要組成部分，因為這里表明了操作系統還有瀏覽器版本等重要信息。 瀏覽器語言設置瀏覽器語言通常指的是用戶在瀏覽器里設置的首選語言。這決定了用戶在訪問多語言網站時看到的默認語言版本。 我們還是從剛才的那個請求里，在Header的RequestHeader里面，這里有一個Accept-Language，里面有這么一串的內容。這里面是許多語言的類型，通常按照用戶設置的偏好進行排列。
瀏覽器語言可以通過瀏覽器的設置進行更改。我們以這個Edge瀏覽器舉例，這里點擊設置，找到設置，在左側找到語言，這里就可以設置瀏覽器的偏好語言。用戶可以列出多個語言，以便網站從中選擇一個最適合的語言來顯示內容。當然我這個語言的順序列表也是瀏覽器指紋的重要組成部分。 字體信息收集每臺計算機上安裝的字體集合可能會因為用戶的個人選擇、操作系統等等的因素有所不同。比如在我的電腦上，我就安裝過思源黑體等等的開源免費字體。我之前有個視頻，介紹如何在github上面下載開源免費的字體。 瀏覽器可以通過一些復雜的JavaScript腳本列出用戶設備上所有可用的字體。我們找到視頻開頭說的這個Fingerprint js這個庫，我們在它的源代碼里面可以找到這個fonts.ts文件。
fingerprintjs/src/sources/fonts.ts at master · fingerprintjs/fingerprintjs (github.com) 這套代碼通過這個span的方式逐個繪制上面字體列表里面的字體，然后通過這個方法來判斷這些字體是否繪制成功。如果繪制成功，那代表用戶的計算機上安裝過這個字體。 即使兩個用戶使用了相同版本的瀏覽器和相同版本的操作系統，他們安裝過的字體很可能不同。這也成為了使用瀏覽器指紋區分用戶的另外一種重要方式。 屏幕分辨率信息屏幕分辨率不僅包括物理屏幕的實際像素數，還包括瀏覽器窗口的當前視圖大小，也就是瀏覽器內部除去工具欄、標簽欄、滾動條等等內部實際可用窗口的大小。每個人窗口設置不同，它的可視區域大小也是不同的，所以通過屏幕分辨率的取值也能取得一個相對獨特的指紋。 我們來演示一下如何使用js代碼獲取用戶的分辨率。這里點擊F12，打開一個新的控制臺窗口，切換到控制臺，然后我把這段代碼粘過來。
這段代碼獲取的是用戶屏幕的實際分辨率，可以看到我的屏幕分辨率是2K。下面這段代碼可以獲取用戶瀏覽器里面實際可用窗口的大小，這里我再回車一下。這里顯示的是瀏覽器內部的實際可用寬度跟高度。 Client Rects布局信息Client Rects它是一種瀏覽器的API，它提供了網頁元素的布局信息，包括元素的位置跟大小，稱之為矩形，也就是RECT。兩臺設備打開的即使是同一個頁面，由于它們的硬件配置、操作系統、瀏覽器版本、屏幕分辨率等等細微差異，渲染出來的網頁元素布局信息可能也會有所不同。這些差異可以被用來組裝成一個特殊的字符串，也就是瀏覽器指紋。 我們來看一下它的實現原理：
語音合成與硬件信息瀏覽器這里的大聲朗讀此頁面功能，這里面有一個語言選項，在這里可以選擇所有可供使用的AI語音列表。
這個列表同樣可以被網站獲取到，變成一個瀏覽器指紋。 我們還是進入這個網站browserleaks.com：
這里往下找有一個Speech Voices，這里網站就可以通過js代碼獲取到這個列表。
當然這個列表也是瀏覽器指紋，因為每個人的列表可能都是不一樣的。 網站可以通過js代碼獲取兩個硬件指標，這兩個硬件指標同樣可以作為瀏覽器指紋。我們還是打開瀏覽器的控制臺，我們先輸入第一個命令，這個navigator.hardwareConcurrency，這里指的是你電腦一共有多少個線程。我的電腦是8核16線程的，這里顯示出了16。 第二個硬件參數是電腦的內存，這里我們輸入這個代碼navigator.deviceMemory，這就是顯示我這臺電腦的內存。這里顯示的是8GB，不過我這個電腦是16GB的，這個API最多只能獲取到8GB。
指紋瀏覽器的應對方案俗話說魔高一尺道高一丈，為了應對網站搜集瀏覽器指紋，一種專門定制的瀏覽器，也就是指紋瀏覽器被發明出來。它們的主要功能是讓用戶可以自由定制、改變并且偽裝自己的瀏覽器指紋。這種瀏覽器可以允許你在一臺電腦上登陸上百個賬戶，這些賬戶都擁有著各自不同的指紋，這樣就可以避免觸發網站的風控。 現在市面上有很多這種品類的瀏覽器，不過呢他們大部分都是收費的。為了避免恰飯嫌疑，爬爬蝦這里就不做推薦了，各位如果感興趣的話可以自己找來看一下。 該文章在 2024/12/5 14:56:13 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
?
