博文作者：rices
發(fā)布日期：2014-07-28
閱讀次數(shù)：4120
博文內(nèi)容：
?
【前言】
一 般情況下，網(wǎng)站或者廣告聯(lián)盟都會(huì)非常想要一種技術(shù)方式可以在網(wǎng)絡(luò)上精確定位到每一個(gè)個(gè)體，這樣可以通過收集這些個(gè)體的數(shù)據(jù)，通過分析后更加精準(zhǔn)的去推送廣 告（精準(zhǔn)化營(yíng)銷）或其他有針對(duì)性的一些活動(dòng)。Cookie技術(shù)是非常受歡迎的一種。當(dāng)用戶訪問一個(gè)網(wǎng)站時(shí)，網(wǎng)站可以在用戶當(dāng)前的瀏覽器Cookie中永久 植入一個(gè)含有唯一標(biāo)示符（UUID）的信息，并通過這個(gè)信息將用戶所有行為（瀏覽了哪些頁(yè)面？搜索了哪些關(guān)鍵字？對(duì)什么感興趣？點(diǎn)了哪些按鈕？用了哪些功 能？看了哪些商品？把哪些放入了購(gòu)物車等等）關(guān)聯(lián)起來(lái)。
而 隨著網(wǎng)民對(duì)個(gè)人隱私的重視，Cookie越來(lái)越不受待見。不少安全工具甚至是瀏覽器都開始允許或引導(dǎo)用戶關(guān)閉Cookie功能，比如很多主流瀏覽器都有一 個(gè)“隱私模式瀏覽”功能。這樣以來(lái)，網(wǎng)站就很難追蹤用戶行為了。但仍然有一些方法可以讓網(wǎng)站去追蹤每一個(gè)訪問者的行為，比如通過flash cookie的方式也可以達(dá)到唯一標(biāo)識(shí)和追蹤的目的。
筆 者近期注意到，國(guó)外媒體報(bào)道了一種非常難以擺脫的新型在線追蹤工具被用來(lái)尾隨從白宮官網(wǎng)到xx網(wǎng)站xx.com的熱門網(wǎng)站的訪問者。經(jīng)過分析， 這個(gè)就是另一種比較新的訪客追蹤技術(shù)：“帆布指紋識(shí)別”技術(shù)，具體代碼見附錄6。這個(gè)技術(shù)的獨(dú)特之處是：它不像通過Cookie或者Flash Cookie等之類的方式，你基本是無(wú)法屏蔽它的。
?
【原理分析】
筆 者收集整理了很多知名站點(diǎn)上的類似代碼，詳見附錄4，從這些“帆布指紋識(shí)別”代碼可以看出，均使用到了HTML5專屬標(biāo)簽<canvas>的 一個(gè)現(xiàn)狀：在繪制canvas圖片時(shí)，同樣的canvas繪制代碼，不同機(jī)器和瀏覽器繪制的圖片特征是相同并且獨(dú)一無(wú)二的，這樣以來(lái)，提取最簡(jiǎn)單的md5 值便可以唯一標(biāo)識(shí)和跟蹤這個(gè)用戶。
?
一段產(chǎn)生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);
獲取繪畫的內(nèi)容，需要使用到canvas.toDataURL()方法，該方法返回的是圖片內(nèi)容的base64編碼字符串。對(duì)于PNG文件格式，以塊(chunk)劃分，最后一塊是一段32位的CRC校驗(yàn)，提取這段CRC校驗(yàn)碼便可以用于用戶的唯一標(biāo)識(shí)：
var b64 = canvas.toDataURL().replace("data:image/png;base64,","");
var bin = atob(b64);
var crc = bin2hex(bin.slice(-16,-12));
console.log(crc);
?
chrome
隱身模式測(cè)試：
同一機(jī)器的chrome瀏覽器，無(wú)論正常模式還是隱身模式，得到的crc值始終一致。而對(duì)于不同機(jī)器得到的值是不同的，追蹤效果顯而易見。
看 到這里，相信很多人想問，Why？為什么會(huì)出現(xiàn)這樣的情況？同樣的js代碼，在不同設(shè)備的瀏覽器上，結(jié)果是唯一并且各不相同的。這到底是為什么？其實(shí)原因 很簡(jiǎn)單，同樣的HTML5 Canvas元素繪制操作，在不同的操作系統(tǒng)不同的瀏覽器上，產(chǎn)生的圖片內(nèi)容其實(shí)是不完全相同的。出現(xiàn)這種情況可能是有幾個(gè)原因：
1、
在圖片格式上，不同web瀏覽器使用了不同的圖形處理引擎、不同的圖片導(dǎo)出選項(xiàng)、不同的默認(rèn)壓縮級(jí)別等。
2、 在像素級(jí)別來(lái)看，操作系統(tǒng)各自使用了不同的設(shè)置和算法來(lái)進(jìn)行抗鋸齒和子像素渲染操作。
因此，即使是相同的繪圖操作，最終產(chǎn)生的圖片數(shù)據(jù)在hash層面上依然是不同的。這個(gè)具體代碼層面，恐怕要去搞懂各個(gè)主流瀏覽器的實(shí)現(xiàn)和以及操作系統(tǒng)的渲染。筆者精力所限，短期很難給出。大家可以自行摸索下，歡迎交流
J
?
【后話】
HTML5
千變?nèi)f化，利用canvas 這一特性來(lái)實(shí)現(xiàn)用戶追蹤，目前并沒有好的對(duì)抗方案，未來(lái)也只能依靠廣大瀏覽器廠商自行了斷，實(shí)現(xiàn)canvas繪圖機(jī)制的隨機(jī)化或許可以很好的保護(hù)用戶隱私，防止被追蹤。
文 中涉及到的代碼和技術(shù)細(xì)節(jié)，只限用于技術(shù)交流，切勿用于非法用途。另外，如果想要研究更多的用戶追蹤技術(shù)，推薦去研究下大名鼎鼎的專注于訪客追蹤的開源項(xiàng) 目：evercookie【附錄5】，這個(gè)猥瑣的小工具，通過幾乎所有你想到和想不到的方式（Cookie、Flash、Silverlight、Web History、HTTP ETags、Web cache、window.name caching、userData storage、HTML5、甚至是java的漏洞等）來(lái)跟蹤訪問網(wǎng)站的用戶行為。
?
【附錄】
[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 官網(wǎng) http://samy.pl/evercookie/
[6]? 使用帆布指紋識(shí)別技術(shù)的庫(kù)fingerprintjs 官網(wǎng) https://github.com/Valve/fingerprintjs
[7]? https://www.browserleaks.com/canvas#how-does-it-work
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
