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