[轉]取代cookie的網站追蹤技術：」帆布指紋識別」初探

【前言】

通常狀況下，網站或者廣告聯盟都會很是想要一種技術方式能夠在網絡上精肯定位到每個個體，這樣能夠經過收集這些個體的數據，經過分析後更加精準的去推送廣告（精準化營銷）或其餘有針對性的一些活動。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瀏覽器，不管正常模式仍是隱身模式，獲得的crc值始終一致。而對於不一樣機器獲得的值是不一樣的，追蹤效果顯而易見。

看到這裏，相信不少人想問，Why？爲何會出現這樣的狀況？一樣的js代碼，在不一樣設備的瀏覽器上，結果是惟一而且各不相同的。這究竟是爲何？其實緣由很簡單，一樣的HTML5 Canvas元素繪製操做，在不一樣的操做系統不一樣的瀏覽器上，產生的圖片內容實際上是不徹底相同的。出現這種狀況多是有幾個緣由：

一、 在圖片格式上，不一樣web瀏覽器使用了不一樣的圖形處理引擎、不一樣的圖片導出選項、不一樣的默認壓縮級別等。

二、 在像素級別來看，操做系統各自使用了不一樣的設置和算法來進行抗鋸齒和子像素渲染操做。

所以，即便是相同的繪圖操做，最終產生的圖片數據在hash層面上依然是不一樣的。這個具體代碼層面，恐怕要去搞懂各個主流瀏覽器的實現和以及操做系統的渲染。筆者精力所限，短時間很難給出。你們能夠自行摸索下，歡迎交流 J

【後話】

HTML5 變幻無窮，利用canvas 這一特性來實現用戶追蹤，目前並無好的對抗方案，將來也只能依靠廣大瀏覽器廠商自行了斷，實現canvas繪圖機制的隨機化或許能夠很好的保護用戶隱私，防止被追蹤。

文中涉及到的代碼和技術細節，只限用於技術交流，切勿用於非法用途。另外，若是想要研究更多的用戶追蹤技術，推薦去研究下大名鼎鼎的專一於訪客追蹤的開源項目：evercookie【附錄5】，這個猥瑣的小工具，經過幾乎全部你想到和想不到的方式（Cookie、Flash、Silverlight、Web History、HTTP ETags、Web cache、window.name caching、userData storage、HTML五、甚至是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

@via 騰訊安全