使用HTML5 -Canvas追蹤使用者，Chrome隱藏模式陣亡

標籤：style   blog   http   os   使用   java   ar   strong   檔案   

　　中國的一些精準營銷公司又要偷著樂了= =從之前追蹤Cookie到後面追蹤FlashCookie，某些商家總在永無止境的追蹤使用者行為甚至是隱私，將其轉化為所謂的“商業價值”。我們被迫面臨“世風日下、道德淪亡”之窘境，不過筆者後來又釋懷了，反正在中國迷你筆記型電腦來就沒有隱私嘛。畢竟國家機器還在合法工作呢......

　　話說回來，HTML5-Canvas追蹤使用者的核心原理其實就是一句話：在繪製canvas圖片時，同樣的canvas繪製代碼，不同機器和瀏覽器繪製的圖片特徵是相同並且獨一無二的，這樣以來，提取最簡單的crc值便可以唯一標識和跟蹤這個使用者。原因嘛，其實是當HTML5 Canvas元素繪製操作時，在不同的作業系統不同的瀏覽器上，產生的圖片內容其實是不完全相同的。當然，既然是不完全相同那就是有碰撞重複的情況，不過看起來經過一些最佳化可以顯著降低重複率，比如驗證更多的項目比如瀏覽器外掛程式、加入UID之類的。

　　無心插柳柳成蔭，本來用來校正圖片的功能居然被用於追蹤使用者，現實就是這麼有趣~

 

原文rices 【http://security.tencent.com/index.php/blog/msg/59】

【前言】

一般情況下，網站或者廣告聯盟都會非常想要一種技術方式可以在網路上精確定位到每一個個體，這樣可以通過收集這些個體的資料，通過分析後更加精準的去推送廣告（精準化營銷）或其他有針對性的一些活動。Cookie技術是非常受歡迎的一種。當使用者訪問一個網站時，網站可以在使用者當前的瀏覽器Cookie中永久植入一個含有唯一標示符（UUID）的資訊，並通過這個資訊將使用者所有行為（瀏覽了哪些頁面？搜尋了哪些關鍵字？對什麼感興趣？點了哪些按鈕？用了哪些功能？看了哪些商品？把哪些放入了購物車等等）關聯起來。

而隨著網民對個人隱私的重視，Cookie越來越不受待見。不少安全工具甚至是瀏覽器都開始允許或引導使用者關閉Cookie功能，比如很多主流瀏覽器都有一個“隱私模式瀏覽”功能。這樣以來，網站就很難追蹤使用者行為了。但仍然有一些方法可以讓網站去追蹤每一個訪問者的行為，比如通過flash cookie的方式也可以達到唯一標識和追蹤的目的。

筆者近期注意到，國外媒體報道了一種非常難以擺脫的新型線上追蹤工具被用來尾隨從白宮官網到色情網站YouPorn.com的熱門網站的訪問者。經過分析，這個就是另一種比較新的訪客追蹤技術：“帆布指紋識別”技術，具體代碼見附錄6。這個技術的獨特之處是：它不像通過Cookie或者Flash Cookie等之類的方式，你基本是無法屏蔽它的。

 

【原理分析】

筆者收集整理了很多知名網站上的類似代碼，詳見附錄4，從這些“帆布指紋識別”代碼可以看出，均使用到了HTML5專屬標籤<canvas>的一個現狀：在繪製canvas圖片時，同樣的canvas繪製代碼，不同機器和瀏覽器繪製的圖片特徵是相同並且獨一無二的，這樣以來，提取最簡單的md5值便可以唯一標識和跟蹤這個使用者。

 

一段產生canvas元素的javascript代碼：

var canvas = document.createElement(‘canvas‘);var ctx = canvas.getContext(‘2d‘);var txt = ‘http://security.tencent.com/‘;ctx.textBaseline = "top";ctx.font = "14px ‘Arial‘";ctx.textBaseline = "tencent";ctx.fillStyle = "#f60";ctx.fillRect(125,1,62,20);ctx.fillStyle = "#069";ctx.fillText(txt, 2, 15);ctx.fillStyle = "rgba(102, 204, 0, 0.7)";ctx.fillText(txt, 4, 17);

 

擷取繪畫的內容，需要使用到canvas.toDataURL()方法，該方法返回的是圖片內容的base64編碼字串。對於PNG檔案格式，以塊(chunk)劃分，最後一塊是一段32位的CRC校正，提取這段CRC校正碼便可以用於使用者的唯一標識：

var b64 = canvas.toDataURL().replace("data:image/png;base64,","");var bin = atob(b64);var crc = bin2hex(bin.slice(-16,-12));console.log(crc);

chrome隱藏模式測試：

同一機器的chrome瀏覽器，無論正常模式還是隱藏模式，得到的crc值始終一致。而對於不同機器得到的值是不同的，追蹤效果顯而易見。

看到這裡，相信很多人想問，Why？為什麼會出現這樣的情況？同樣的js代碼，在不同裝置的瀏覽器上，結果是唯一併且各不相同的。這到底是為什嗎？其實原因很簡單，同樣的HTML5 Canvas元素繪製操作，在不同的作業系統不同的瀏覽器上，產生的圖片內容其實是不完全相同的。出現這種情況可能是有幾個原因：

1、在圖片格式上，不同web瀏覽器使用了不同的圖形處理引擎、不同的圖片匯出選項、不同的預設壓縮層級等。

2、在像素層級來看，作業系統各自使用了不同的設定和演算法來進行消除鋸齒和子像素渲染操作。

因此，即使是相同的繪圖操作，最終產生的圖片資料在hash層面上依然是不同的。這個具體代碼層面，恐怕要去搞懂各個主流瀏覽器的實現和以及作業系統的渲染。筆者精力所限，短期很難給出。大家可以自行摸索下，歡迎交流J

 

【後話】

HTML5千變萬化，利用canvas 這一特性來實現使用者追蹤，目前並沒有好的對抗方案，未來也只能依靠廣大瀏覽器廠商自行了斷，實現canvas繪圖機制的隨機化或許可以很好的保護使用者隱私，防止被追蹤。

文中涉及到的代碼和技術細節，只限用於技術交流，切勿用於非法用途。另外，如果想要研究更多的使用者追蹤技術，推薦去研究下大名鼎鼎的專註於訪客追蹤的開源項目：evercookie【附錄5】，這個猥瑣的小工具，通過幾乎所有你想到和想不到的方式（Cookie、Flash、Silverlight、Web History、HTTP ETags、Web cache、window.name caching、userData storage、HTML5、甚至是java的漏洞等）來跟蹤訪問網站的使用者行為。

 

【附錄】

[1] http://cseweb.ucsd.edu/~hovav/dist/canvas.pdf

[2] https://securehomes.esat.kuleuven.be/~gacar/sticky/index.html

[3] https://panopticlick.eff.org/browser-uniqueness.pdf

[4] 部分“帆布指紋鑒別代碼”地址清單：

http://ct1.addthis.com/static/r07/core130.js 
http://i.ligatus.com/script/fingerprint.min.js
http://src.kitcode.net/fp2.js 
http://admicro1.vcmedia.vn/fingerprint/figp.js 
http://shorte.st/js/packed/smeadvert-intermediate-ad.js 
http://stat.ringier.cz/js/fingerprint.min.js 
http://cya2.net/js/STAT/89946.js 
http://images.revtrax.com/RevTrax/js/fp/fp.min.jsp 
http://rackcdn.com/mongoose.fp.js

[5]  evercookie官網 http://samy.pl/evercookie/

[6]  使用帆布指紋識別技術的庫fingerprintjs 官網 https://github.com/Valve/fingerprintjs

[7]  https://www.browserleaks.com/canvas#how-does-it-work

使用HTML5 -Canvas追蹤使用者，Chrome隱藏模式陣亡