瀏覽器指紋追蹤技術簡述

NO IMAGE

什麼是瀏覽器指紋

“瀏覽器指紋”是一種通過瀏覽器對網站可見的配置和設置信息來跟蹤Web瀏覽器的方法

瀏覽器指紋就像我們人手上的指紋一樣,通過瀏覽器指紋拿到該瀏覽器的基本信息(UA、時區、地理位置等),可以通過記錄或者共享該瀏覽器指紋相關的操作記錄,網站可能會創建您的個人資料類型,並將其與與您的瀏覽器相關聯的特徵模式聯繫在一起,而不是與特定的跟蹤Cookie聯繫在一起。用戶的隱私就有暴露的風險。

通過修改http上的頭部信息想要偽造瀏覽器指紋或者開啟瀏覽器的私密模式也是遠遠不夠的。

場景一:在網站上瀏覽了某個商品,並沒有下單購買甚至沒有登錄,過兩天用同臺電腦訪問其他網站的時候卻發現很多同類商品的廣告。

場景二:在一個論壇中你有多個小號,這些小號的存在就是為了刷某個帖子的熱度,或者為了提高你大號的知名度,即便你在切換賬號的時候清空了cookie、本地緩存,重開路由器甚至使用vpn來進行操作,你覺得自己足夠小心,但是管理人員可能還是知道這是同一個人在操作

如果遇到過以上類似的場景,這時候就要考慮是不是瀏覽器指紋在其中發揮作用。

瀏覽器指紋背景

瀏覽器指紋追蹤技術到目前已經進入2.5代。

  • 第一代是狀態化的,主要集中在用戶的cookie和evercookie上。
  • 第二代才有了瀏覽器指紋的概念,通過不斷增加瀏覽器的特徵值從而讓用戶更具有區分度,例如(UA、瀏覽器插件信息)
  • 第三代是已經將目光放在人身上了,通過收集用戶的行為、習慣來為用戶建立特徵值,可以實現真正的追蹤技術,這部分目前實現比較複雜,依然在探索中。

目前處於2.5代是因為現在需要解決的問題是如何解決跨瀏覽器識別指紋的問題上,稍後會介紹下這方面所取得的成果。

指紋採集

信息熵(entropy)是接收的每條消息中包含的信息的平均量,熵越高,則能傳輸越多的信息,熵越低,則意味著傳輸的信息越少。

瀏覽器指紋是由許多瀏覽器的特徵信息綜合起來的,其中特徵值的信息熵也是不盡相同。不幸的是上訴說到的http頭部信息所含的信息熵不夠大,即便偽造也並不能決定你瀏覽器指紋是否也成功偽造。

可以點擊這裡查看自己的瀏覽器指紋ID和基本信息。

瀏覽器指紋追蹤技術簡述

瀏覽器指紋也可以進行簡單的分為普通指紋和高級指紋,普通指紋可以理解為容易被發現並且容易修改的部分,例如http的header

{
"headers": {
"Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3", 
"Accept-Encoding": "gzip, deflate, br", 
"Accept-Language": "zh-CN,zh;q=0.9,en;q=0.8", 
"Host": "httpbin.org", 
"Sec-Fetch-Mode": "navigate", 
"Sec-Fetch-Site": "none", 
"Sec-Fetch-User": "?1", 
"Upgrade-Insecure-Requests": "1", 
"User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36"
}
}

可以點擊這個網址查看你的http頭部信息。

在上面我們可以看到瀏覽器的Accept-LanguageUser-Agent,通過前者可以拿到瀏覽器的語言信息,這個http頭部實體信息可能是通過你當前的操作系統語言,或者瀏覽器設置的語言信息所生成的。這個頭部也不一定準確,一些網站會直接忽略掉這個頭部,通過用戶的ip判斷地區再決定呈現網頁的語言。

User-Agent包含了瀏覽器和操作系統的信息,例如我當前使用的是MacOS,並且使用77版本的chrome。假如在頭部刻意偽造了UA,網頁也可以通過navigator.userAgent來拿到真實的UA。

其他的基本信息,例如ip,物理地址、地理位置等也可以拿到:

瀏覽器指紋追蹤技術簡述

點擊這裡可以查看自己瀏覽器的基本信息。


除開從http中拿到的指紋,也可以通過其他方式拿到瀏覽器的特性信息,在這篇文檔中就陳列了一些可行的特徵值

  • 每個瀏覽器的用戶代理字符串
  • 瀏覽器發送的HTTP ACCEPT標頭
  • 屏幕分辨率和色彩深度
  • 系統設置為時區
  • 瀏覽器中安裝的瀏覽器擴展/插件,例如Quicktime,Flash,Java或Acrobat,以及這些插件的版本
  • 計算機上安裝的字體,由Flash或Java報告。
  • 瀏覽器是否執行JavaScript腳本
  • 瀏覽器是否能種下各種cookie和“超級cookie(super cookies)”
  • 通過Canvas指紋生成的圖像的哈希
  • WebGL指紋生成的圖像的哈希
  • 是否瀏覽器設置為“Do Not Track”
  • 系統平臺(例如Win32,Linux x86)
  • 系統語言(例如,cn,en-US)
  • 瀏覽器是否支持觸摸屏

拿到這些值後可以進行一些運算,得到瀏覽器指紋具體的信息熵以及瀏覽器的uuid。計算方式

瀏覽器指紋追蹤技術簡述

將上面的指紋信息綜合起來,可以大大降低碰撞率,提高客戶端uuid的準確性。指紋的也有權重之分,某些信息熵較大的特徵值會有的更大的權重:

VariableEntropy (bits)
user agent10.0
plugins15.4
fonts13.9
video4.83
supercookies6.09
timezone3.04
cookies enabled0.353

普通指紋描述的信息依然不夠獨特,畢竟在深圳使用MacOS的人依然非常非常多。高級指紋可以將這個範圍進一步縮小,幾乎可以直接確定一個獨一無二的瀏覽器身份。

Cavans指紋

Cavans是HTML5中的動態繪圖標籤,也可以用它生成圖片或者處理圖片。即便使用Cavans繪製相同的元素,但是由於系統的差別,字體渲染引擎不同,對抗鋸齒、次像素渲染等算法也不同,canvas將同樣的文字轉成圖片,得到的結果也是不同的。流程如下

瀏覽器指紋追蹤技術簡述

具體代碼實現為:

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");
}

在畫布上渲染一些文字,再用toDataURL轉換出來,即便開啟了隱私模式一樣可以相同的值

瀏覽器指紋追蹤技術簡述

可以在這裡測試一下你cavans指紋。從下面的報告中Uniqueness中看到在47萬份數據中,只有兩個人的canvas指紋和我的相同。

瀏覽器指紋追蹤技術簡述

AudioContex指紋

AudioContext指紋和Cavans類似也是基於硬件設備或者軟件的差別,來產生不同的音頻輸出,然後計算得到不同的hash來作為標誌,當然這裡的音頻並沒有直接在瀏覽器中播放出來,只需要拿到播放前的處理數據就行,音頻指紋測試地址:audiofingerprint.openwpm.com/

WebRTC

WebRTC(網頁實時通信,Web Real Time Communication),是可以讓瀏覽器有音視頻實時通信的能力,它提供了三個主要的API來讓JS可以實時獲取和交換音視頻數據,MediaStream、RTCPeerConnection和RTCDataChannel。當然如果要使用WebRTC獲得通信能力,用戶的真實ip就得暴露出來(NAT穿透),所以RTCPeerConnection就提供了這樣的API,直接使用JS就可以拿到用戶的IP地址。

跨瀏覽器指紋

綜上提到的瀏覽器指紋都是從同一個瀏覽器上獲得。但是很多特徵值都是不穩定的,例如UA、cavans指紋在相同設備的不同瀏覽器打開會完全不一樣。
同一套瀏覽器指紋算法在不同瀏覽器(本小結所說的不同瀏覽器是指同一臺設備上的不同瀏覽器)上也就不可用了。

跨瀏覽器指紋就是即便是在不同瀏覽器上也可以取得相同或者近似值的穩定瀏覽器特徵。

跨瀏覽器指紋也有對應的研究成果

這篇paper中列了一個這樣的表

瀏覽器指紋追蹤技術簡述

列舉了瀏覽器特徵值的在單瀏覽器和跨瀏覽器的信息熵以及穩定性,上訴說到的cavas指紋穩定性僅有8.17%。

常規的特徵值很難滿足在信息量足夠的情況下還保持高穩定性。

挑選幾個表中符合這些特徵的值Task(a)~Task(r)、List of fonts(JS)、TimeZone和CPU Vritual cores、

Task(a)~Task(r),它是一種顯卡渲染(Rendering Tasks)圖片的特徵值。例如Task(a)Texture,它是測試常規
片段著色器中的紋理功能,通過渲染一個隨機的三基色值的像素,片段著色器需要在紋理中插入點,以便將紋理映射到模型上的每個點,這個插入算法在不同的顯卡又是不一致的。如果紋理變化較大,那麼差異也就越明顯,我們可以通過記錄這種差異來為這個顯卡作出區分度。

List of fonts(JS),通過js獲取頁面支持的字體情況。獲取頁面支持的字體分為兩種方式,Flash和JS,現在Flash漸漸退出了舞臺就不考慮它了。List of fonts是值通過js拿到頁面支持的字體情況以及如何繪製字體,是通過測量不同字體的文本HTML元素的填充尺寸,來和其他設備做區分。

TimeZone,時區,這個比較好理解,既然是同一臺設備那麼時區應該也是一致的。CUP Vritual cores即為CPU的內核數量,最簡單的方法就是通過一個navigator.hardwareConcurrency來拿到。

瀏覽器指紋追蹤技術簡述

但是在低版本瀏覽器是不支持這個API的,也可以通過這個polyfill拿到,實現原理大致為借用Web Worker的能力,監聽payload的時間,計算量達到硬件最大併發的時候就可以得到內核的數量(硬核)。

如何防範

如果你沒有足夠專業的知識或者非常頻繁更換瀏覽器信息的話,幾乎100%可以通過瀏覽器指紋定位到一個用戶,當然這也不見得全是壞事。

  • 洩露的隱私非常片面,只能說洩露了用戶部分瀏覽網頁時的行為。
  • 價值不夠,用戶行為並未將實際的賬戶或者具體的人對應起來,產生的價值有限。
  • 有益利用,利用瀏覽器指紋可以隔離部分黑產用戶,防止刷票或者部分惡意行為。

但是即便如此,瀏覽器指紋也有一些可以防止的措施。

Do Not Track

在http頭部可以聲明這樣一個標誌“DNT”意味“Do Not Track”,如果值為1表示為不要追蹤我的網頁行為,0則為可以追蹤。
即便沒有cookie也可以通過這個標誌符告訴服務器我不想被追蹤到,不要記錄我的行為。

不好的消息是大多數網站目前並沒有遵守這個約定,完全忽略了“Do Not Track”這個信號。

EFF提供了這樣一個工具Privacy Badger,它是一個瀏覽器插件形式的廣告攔截器,對於那些遵守這個約定的公司會在這個廣告攔截器的白名單上,允許顯示廣告,從而激勵更多的公司遵守“Do Not Track”,以便完全展示廣告。

個人覺得這一個方向很不錯的做法,如果用戶使用這個工具,網站在拿用戶行為之前會抉擇兩邊的利益,從而減輕用戶對於隱私洩露的風險。

Privacy Badger的更多信息可以點擊這裡查看。

Tor Browser

通過上述我們對瀏覽器指紋的瞭解,不難發現,如果你瀏覽器的特徵越多,越容易被追蹤到。相反如果你想要刻意將某些瀏覽器特徵隱藏或者進行魔改,那麼恭喜你,你的瀏覽器可能就擁有了一個獨一無二的瀏覽器指紋,都不需要刻意去計算,直接就可以將你和其他用戶區分開。

所以有效的方法是儘量將特徵值進行大眾化,例如目前市面最廣泛的搭配是Window 10 + Chrome,那麼你將UA改為這個組合就是一個有效的方法,同時儘量避免網站獲取信息熵非常高的特徵值,例如cavans指紋。

Tor 瀏覽器在這上面做了很多工作,以防止它們被用來跟蹤Tor用戶,為了響應Panopticlick和其他指紋識別實驗,Tor瀏覽器現在包含一些補丁程序,以防止字體指紋(通過限制網站可以使用的字體)和Canvas指紋(通過檢測對HTML5 Canvas對象的讀取並要求用戶批准)來防止,例如上面獲取Cavans指紋的代碼,在Tor上允許會彈出警告

瀏覽器指紋追蹤技術簡述

同時還可以將Tor瀏覽器配置為主動阻止JavaScript。

綜上所述,這些措施使Tor瀏覽器成為抵抗指紋的強大防禦工具。
但是這樣有安全感的瀏覽器犧牲的是它的速度,使用Tor瀏覽器訪問頁面會比市面的瀏覽器慢得多。感興趣的同學可以嘗試一下Tor Browser

禁用JS

這是一個比較暴力的方法,直接禁止網站使用JavaScript可以非常有效得防禦瀏覽器指紋追蹤,但是這樣會導致非常多的頁面不可用。

而且非常不幸的是,即便禁止了JS但是還可以通過CSS來採取瀏覽器的信息,例如:

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

可以在服務器中看1080.png圖片的請求日誌,就可以得知哪些用戶的屏幕是1920px的,
在 Mozilla Firefox 中,甚至曾經存在過可以直接查詢 Windows 系統版本和 Windows 主題的 CSS 查詢。現在這個問題已經被修復了

參考資料

相關文章

immer.js實戰講解文檔

試用React語法的多端框架Taro問題彙總

mixin配合class實現多繼承的絕佳妙用

Axios源碼深度剖析AJAX新王者