探討帆布指紋識別 JavaScript

帆布指紋識別

canvas fingerpinting

• 廣告聯盟或許網站運營者都但願可以精準定位並標識每個個體，經過對用戶行爲的分析（瀏覽了哪些頁面？搜索了哪些關鍵字？對什麼感興趣？點了哪些按鈕？用了哪些功能？看了哪些商品？把哪些放入了購物車等等），爲用戶推送更加精準的廣告（精準化營銷）。同時，經過對用戶的標識，能夠將不一樣站點的用戶進行關聯。

• 在過去，實現上述cookie是最受歡迎的一種。但因爲移動互聯網的發展，移動設備限制、用戶禁用cookie。使得cookie越來越不受待見。伴隨着html5的成熟，經過canvas fingerprinting技術標識一個惟一的瀏覽器逐漸被接受。它的特色是不經過cookie，用戶基本沒法屏蔽它 。

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);
複製代碼

一些影響因素

• 瀏覽器http請求中的用戶代理－navigator.userAgent

• 瀏覽器的語言(中文、英文……)－navigator.language

• 設備屏幕的色彩信息－screen.colorDepth

• 設備屏幕的寬高－screen.height screen.width

• 格林威治時間和本地時間之間的時差－Date().getTimezoneOffset()

• 是否支持sessionStorage－window.sessionStorage

• 是否支持localStorage－window.localStorage

• 是否支持indexdDB－window.indexedDB

• 是否支持－docment.body.addBehavior(IE5的一個屬性)

• 是否支持調用本地數據庫－window.openDatabase

• 瀏覽器所在系統的CPU等級－navigator.cupClass

• 客戶端的操做系統－navigator.platform

• 是否支持Do not track功能－navigator.doNotTrack

• 獲取瀏覽器部分插件信息－flash plugin、Adobe PDF reader、QuickTime、real players、ShockWave player、Windows media player、Silverlight、Skype

• canvas指紋

使用建議

• 由於Fingerprint使用的參數多，稍有變化就可能形成獲取到的hash變化.

• 因此目前並不能代替Cookies，能夠和Cookies與Flash Cookies結合，在Cookies和Flash Cookies被清空的狀況下，經過Fingerprint hash 從新設置Cookies的值。

歡迎你們來個人主頁探討更多的技術

lpove.github.io/hexo/