From：Arkteam

作者：Wellee

前文：http://www.bjnorthway.com/227/

隨著互聯網絡的廣泛普及，數以億計網民的網絡行為數據早已成為最寶貴的資源，企業通過五花八門的各種手段了解網民的行為和隱私數據，用于廣告投遞、用戶興趣分析等，進而作為決策的依據。利用Web客戶端對用戶行為進行收集和追蹤是重要手段之一。

本文繼《淺談Web客戶端追蹤（上）》繼續對主流的Web客戶端追蹤技術進行分析，主要介紹典型的指紋追蹤技術和WebRTC技術，介紹一些簡單的防跟蹤的方法，并給出相關參考供感興趣的朋友深入研究。

一、 典型追蹤技術

1. 瀏覽器指紋追蹤

類似人的外貌和指紋，Web客戶端（這里主要指瀏覽器）也有多種“外貌”信息和“指紋”信息，將這些信息綜合分析計算后，可對客戶端進行唯一性識別，進而鎖定、追蹤、了解網民行為和隱私數據。

1) 基本指紋

基本指紋是任何瀏覽器都具有的特征標識，比如硬件類型（Apple）、操作系統（Mac OS）、用戶代理（User agent）、系統字體、語言、屏幕分辨率、瀏覽器插件 (Flash, Silverlight, Java, etc)、瀏覽器擴展、瀏覽器設置 (Do-Not-Track, etc)、時區差（Browser GMT Offset）等眾多信息，這些指紋信息“類似”人類的身高、年齡等，有很大的沖突概率，只能作為輔助識別。可以在該網址進行查看本地瀏覽器的基本特征，https://www.whatismybrowser.com/

圖片 1

2) 高級指紋

基本指紋就像是人的外貌特征，外貌可以用男女、身高、體重區分，然而這些特征不能對某個人進行唯一性標識，僅使用基本指紋也無法對客戶端進行唯一性判定，基于HTML5的諸多高級指紋對此提供了新思路。

①、Canvas指紋

說到高級指紋，不得不提Canvas指紋，Canvas（畫布）是HTML5中一種動態繪圖的標簽，可以使用其生成甚至處理高級圖片。2014年9月，ProPublica報道：新型的Canvas指紋追蹤正在被用到“上到白宮，下到YouPorn”等眾多網站，事實上早在2012年已有研究報告[6]分析稱canvas指紋被用于跟蹤用戶。

圖片 2

利用Canvas進行追蹤的一般過程大致如下：

圖片 3

基于Canvas標簽繪制特定內容的圖片，使用canvas.toDataURL()方法獲得圖片內容的base64編碼（對于PNG格式的圖片，以塊(chunk)劃分，最后一塊是32位CRC校驗）作為唯一性標識，如下圖。

圖片 4

圖片 5

Canvas指紋的原理大致如下：

相同的HTML5 Canvas元素繪制操作，在不同操作系統、不同瀏覽器上，產生的圖片內容不完全相同。在圖片格式上，不同瀏覽器使用了不同的圖形處理引擎、不同的圖片導出選項、不同的默認壓縮級別等。在像素級別來看，操作系統各自使用了不同的設置和算法來進行抗鋸齒和子像素渲染操作。即使相同的繪圖操作，產生的圖片數據的CRC檢驗也不相同。

在線測試地址：https://www.browserleaks.com/canvas，可查看瀏覽器的Canvas唯一性字符串。

圖片 6

Canvas的兼容情況：幾乎已被所有主流瀏覽器支持，可以通過大部分的PC、平板、智能手機訪問！

圖片 7

②、AudioContext指紋

HTML5提供給JavaScript編程用的Audio API則讓開發者有能力在代碼中直接操作原始的音頻流數據，對其進行任意生成、加工、再造，諸如提高音色，改變音調，音頻分割等多種操作，甚至可稱為網頁版的Adobe Audition。

AudioContext指紋原理大致如下：

方法一：生成音頻信息流(三角波)，對其進行FFT變換，計算SHA值作為指紋，音頻輸出到音頻設備之前進行清除，用戶毫無察覺。

圖片 8

方法二：生成音頻信息流（正弦波），進行動態壓縮處理，計算MD5值。

圖片 9

AudioContext指紋基本原理：

主機或瀏覽器硬件或軟件的細微差別，導致音頻信號的處理上的差異，相同器上的同款瀏覽器產生相同的音頻輸出，不同機器或不同瀏覽器產生的音頻輸出會存在差異。

從上可以看出AudioContext和Canvas指紋原理很類似，都是利用硬件或軟件的差異，前者生成音頻，后者生成圖片，然后計算得到不同哈希值來作為標識。音頻指紋測試地址：https://audiofingerprint.openwpm.com/

3) 硬件指紋

硬件指紋主要通過檢測硬件模塊獲取信息，作為對基于軟件的指紋的補充，主要的硬件模塊有：GPU’s clock frequency、Camera、Speakers/Microphone、Motion sensors、GPS、Battery等。更多細節請參考：https://arxiv.org/pdf/1503.01408v3.pdf

4) 綜合指紋

Web世界的指紋碰撞不可避免，將上述所有的基本指紋和多種高級指紋綜合利用，進行分析、計算哈希值作為綜合指紋，可以大大降低碰撞率，極大提高客戶端唯一性識別的準確性。測試地址：https://panopticlick.eff.org/

圖片 10

2. 跨瀏覽器指紋

上述指紋都是基于瀏覽器進行的，同一臺電腦的不同瀏覽器具有不同的指紋信息。這樣造成的結果是，當同一用戶使用同一臺電腦的不同瀏覽器時，服務方收集到的瀏覽器指紋信息不同，無法將該用戶進行唯一性識別，進而無法有效分析改用戶的的行為。

近期有學者研究了一種跨瀏覽器的瀏覽器指紋，其依賴于瀏覽器與操作系統和硬件底層進行交互進而分析計算出指紋，這種指紋對于同一臺電腦的不同瀏覽器也是相同的。更多技術細節請參考：

http://yinzhicao.org/TrackingFree/crossbrowsertracking_NDSS17.pdf

3. WebRTC

WebRTC（網頁實時通信，Web Real Time Communication），是一個開源項目，旨在使得瀏覽器能為實時通信（RTC）提供簡單的JavaScript接口，說的簡單明了一點就是讓瀏覽器提供JS的即時通信接口，讓瀏覽器實時獲取和交換視頻、音頻和數據。WebRTC實現了三個API，分別是:

MediaStream：通過MediaStream的API能夠通過設備的攝像頭及麥克風獲得視頻、音頻的同步流。

RTCPeerConnection：RTCPeerConnection是WebRTC用于構建點對點之間穩定、高效的流傳輸的組件。

RTCDataChannel：RTCDataChannel使得瀏覽器之間（點對點）建立一個高吞吐量、低延時的信道，用于傳輸任意數據。

基于WebRTC的實時通訊功能，可以獲取客戶端的IP地址，包括本地內網地址和公網地址。其原理是利用到RTCPeerConnection 的API，大致函數如下：

圖片 11

利用WebRTC能做的事情還遠不止這些，比如使用其探測掃描內網信息，進行語音、視頻交流，更多技術細節請參考：

http://net.ipcalf.com

https://diafygi.github.io/webrtc-ips/

圖片 12

二、 防客戶端追蹤措施

1. 瀏覽器設置

基于上述客戶端追蹤技術和原理，對瀏覽器設置提出一些簡單的防御措施，大致如下：

①、使用隱身模式，目前主流的瀏覽器都支持該模式。

②、禁用Cookie和JavaScript（此項可能導致頁面顯示不正常，慎用）

③、禁用WebRTC，如Firefox瀏覽器：打開about:config，找到media.peerconnection.enabled的項，設置成 false

④、禁用Geolocation，Firefox瀏覽器：打開about:config，找到geo.enabled 的值，設置其值為 false。Chrome 點擊設置（Settings），從顯示高級設置（Show advanced settings）上，找到隱私（Privacy）并且點擊內容設置（Content settings）， 在窗口里找到定位（Location）并設置選項不允許任何網站追蹤你的物理位置（Do not allow any site to track your physical location）

⑤、限制API訪問文件資源時序信息，惡意網站會通過檢測瀏覽器緩存的時序信息，包括訪問和忽略第三方網站的資源，來判斷使用者是否訪問過第三方網站。Firefox瀏覽器：打開about:config，將dom.enable_resource_timing, dom.enable_user_timing 和dom.performance.enable_user_timing_logging 設置為 false，來阻止這些 API 運行。

2. 插件

推薦幾個較好的插件來阻止第三方廣告追蹤和廣告：

①、Ghostery，個人使用推薦，官網地址：

https://www.ghostery.com/try-us/download-browser-extension

②、Privacy Badger，官網地址：

https://www.eff.org/privacybadger/

③、uMatrix（僅Chrome和FireFox）：

https://addons.mozilla.org/en-us/firefox/addon/umatrix/

④、NoScript（僅FireFox）：

https://addons.mozilla.org/en-US/firefox/addon/noscript/#

⑤、Chameleon（僅Chrome）：

https://github.com/ghostwords/chameleon

三、 參考資料

Paper 本文由 Seebug Paper 發布，如需轉載請注明來源。本文地址：http://www.bjnorthway.com/229/