你的瀏覽器，獨一無二 --解讀瀏覽器指紋

若是技術有罪，那人類可真是罪大惡極。--- 沃·鎡基爍德

咱們在平常網絡衝浪的時候，確定都有過這樣的經歷：
在某東/某寶上瀏覽過電動牙刷後，再訪問其餘網站時總會在邊角看到大大小小相似的商品廣告。
這樣讓咱們在感覺到被大數據包圍的沉浸感的同時卻又細思恐極，咱們還有隱私麼？
這個問題咱們放到後面再來討論，先來講說爲何會有這樣的狀況。

1、 瀏覽器指紋

是的你沒有看錯，和人有指紋同樣，Web客戶端（這裏主要指瀏覽器）也有本身的指紋信息。將這些信息綜合分析計算後，可對客戶端進行惟一性識別，進而鎖定、追蹤、瞭解網民行爲和隱私數據， 進而作到精準廣告投放，反薅羊毛等功效。

1. 基本指紋

基本指紋是任何瀏覽器都具備的特徵標識，好比硬件類型（Apple）、操做系統（Mac OS）、用戶代理（User agent）、系統字體、語言、屏幕分辨率、瀏覽器插件 (Flash, Silverlight, Java, etc)、瀏覽器擴展、瀏覽器設置 (Do-Not-Track, etc)、時區差（Browser GMT Offset）等衆多信息，這些指紋信息「相似」人類的身高、年齡等，有很大的衝突機率，只能做爲輔助識別。

2. 行爲指紋

這裏拿電商網站舉例，咱們瀏覽任意商品，停留頁面的時長，常常購買的品類，商品的尺碼大小等等均可以被記錄在本地的cookie裏做爲行爲指紋，幫助廣告商精準投放廣告，也能夠幫助電商網站訓練推薦模型爲你作到精準推薦。因此「大數據可能比你還要了解你本身」可不是說說而已。

3. 高級指紋

基本指紋就像人的外貌、身高、體重、性別，很難從肉眼的角度去區分瀏覽器，那麼高級指紋對於瀏覽器來講，就像DNA通常精準（不要懼怕，也是有極限的）這裏會着重介紹目前普遍使用的三大高級指紋：canvas指紋/WebGL指紋/Audio音頻指紋。

1）canvas指紋

Canvas（畫布）是HTML5中一種動態繪圖的標籤，可使用其生成甚至處理高級圖片，2014年9月，ProPublica報道：新型的Canvas指紋追蹤正在被用到「上到白宮，下到YouPorn」等衆多網站，其高級指紋的地位，可見一斑。
canvas指紋的生成過程大體以下：

• 利用畫布繪製指定圖案
• 使用canvas.toDataURL()的方法得到圖片內容的base64編碼
• 將其CRC校驗碼做爲惟一性標識（對於PNG格式的圖片，以塊(chunk)劃分，最後一塊是32位CRC校驗）

在衆多博客中對canvas原理的介紹基本上是一句帶過：
相同的HTML5 Canvas元素繪製操做，在不一樣操做系統、不一樣瀏覽器上，產生的圖片內容不徹底相同。在圖片格式上，不一樣瀏覽器使用了不一樣的圖形處理引擎、不一樣的圖片導出選項、不一樣的默認壓縮級別等。在像素級別來看，操做系統各自使用了不一樣的設置和算法來進行抗鋸齒和子像素渲染操做。即便相同的繪圖操做，產生的圖片數據的CRC檢驗也不相同。

可是好像理解的仍是不那麼直觀？

讓咱們稍微花一點篇幅來儘量通俗的解釋一下，例如:

咱們在瀏覽器上看到的字體都是通過了字體微調才能在肉眼下表現一致，所謂字體微調其實就是一種特殊指令，讓渲染算法在屏幕上繪出文字。由於電腦裏的文字不是圖像格式儲存而是是像數學公式同樣被儲存的。

當電腦在屏幕上將數學公式繪成文字時，須要將數學公式渲染成由像素點組成的實際圖像，並根據屏幕分辨率、像素點大小等參數生成，因此結果可能存在差別。這個時候不一樣的操做系統/瀏覽器會有不一樣的微調算法，使得一樣的字母m在肉眼下表現一致，可是當咱們放大到像素級別，就會看出細微的差異，以下圖所示。

再好比抗鋸齒渲染（邊緣柔化技術），抗鋸齒渲染是爲了使兩個對比明顯的對象間交接平滑，這麼作就避免了兩個對象間的像素不夠美觀。在黑白圖片中邊緣加入了不一樣色調的灰色像素做爲緩衝達到平滑效果。不一樣顯卡驅動運行抗鋸齒，結果也會不同。這些差異肉眼一樣分辨不出來，若是你仔細比對這些小像素點就能發現色會有輕微的差異。
跟前面同樣肉眼沒法分辨的差異計算機能夠輕鬆識別。這就是爲何不一樣的電腦會產生不一樣的指紋。

2）WebGL指紋

有了canvas指紋的理解基礎，WebGL就更好理解一些了，基本上是一樣的原理，只不過這裏會將畫好的3D圖像內容和WebGL的某些屬性值綁定在一塊兒（好比渲染圖片用到的顯卡提供商以及顯卡型號，壓縮等級等等）拼接成一個很長的字符串，哈希事後取得一個縮減過信息量卻又保留了信息差的的字符串做爲WebGL指紋

3）AudioContext指紋

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

• 生成特定的音頻信息流，對其進行一系列操做後，計算SHA值做爲指紋，音頻輸出到音頻設備以前進行清除，用戶毫無察覺。
• 生成特定的音頻信息流，直接進行動態壓縮，MD5哈希處理後獲得音頻指紋

之因此不一樣設備不一樣瀏覽器其音頻指紋會有差別是由於主機/瀏覽器的硬件/軟件的細微差異，致使音頻信號的處理上的差別，相同機器上的同款瀏覽器產生相同的音頻輸出，不一樣機器或不一樣瀏覽器產生的音頻輸出會存在差別。

能夠看出這三類高級指紋都是利用硬件或軟件的差別，有的生成圖片有的生成音頻，而後計算不一樣的哈希值做爲參考指紋.

4. 綜合指紋

在互聯網世界裏，各類指紋的碰撞比比皆是，尤爲是想mac這樣的量產機，同一批次同一型號的mac，使用相同的瀏覽器就頗有可能產生相同的「高級指紋」，存在必定的重複率，這個時候就須要結合上述的全部指紋，通過分析，計算最終的綜合指紋做爲判斷。這樣就能夠大大下降碰撞率，極大提升客戶端惟一性識別的準確性。

2、 瀏覽器指紋到底該不應被使用

介紹完了瀏覽器指紋，你們應該也對以前說的廣告精準投放的方式有了必定的瞭解，下面我們就談談你們對瀏覽器指紋的顧慮吧

1. 用戶會很是介意被無感知採集我的信息，這一點上，隨着愈來愈多的人對隱私的看重，各大公司瀏覽器廠商，甚至手機廠商都對此作了限制和約定，咱們所理解的姓名/PC的mac地址/地理位置/電話號碼之類的我的隱私，除非用戶受權，第三方沒法採集，上面所說的全部指紋，基本上都是屬於非我的隱私的範疇。
2. 瀏覽器指紋在用戶受權的狀況下，能夠爲用戶提供精準的廣告投放和推薦
3. 對於一些商家來講，瀏覽器指紋能夠做爲他們判斷設備惟一性的重要標識，以此達到反薅羊毛，同一設備綁定惟一帳號等等諸如此類的目的，減小公司的損失。

因此，從我我的的角度講，無論是什麼技術，都有可能被投入到不正確的使用領域或場景，關鍵在於咱們是否設置並遵照了公衆承認的規定。

咱們能夠經過設置瀏覽器的諸多權限配置，拒絕瀏覽器指紋這樣的東西，也能夠享受此類技術帶給咱們生活上的便利。

公司廠商能夠經過收集用戶非隱私信息來得到設備的惟一標識，也能夠經過用戶受權收集信息創建更好的推薦模型爲人們帶來無微不至的服務。

這樣和諧的願景都創建在一個「度」字上。咱們可以看到這個度在一步步的修訂（由於瀏覽器指紋能獲取的未受權信息愈來愈少，說多了都是淚T_T），因此咱們也有理由相信隱私這塊蛋糕終究會有你好我好你們好的這麼一天。

以上就是我對瀏覽器指紋的一些理解，若有不當之處，歡迎指正。

參考資料

• Canvas,WebGL以及AudioContext指紋原理
• Web客戶端追蹤—瀏覽器指紋追蹤