探讨帆布指纹识别 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/