帆布指纹识别 Canvas Fingerprinting

广告联盟或网站运营者都希望能够精准定位并标识每一个个体，通过对用户行为的分析：

• 浏览了哪些页面？
• 搜索了哪些关键字？
• 对什么感兴趣？
• 点了哪些按钮？
• 用了哪些功能？
• 看了哪些商品？
• 把哪些放 入了购物车？

为用户推送更加精准的广告（精准化营销）。同时通过对用户的标识，可以将不同站点的用户进行关联。

在过去，实现上述 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);

通过验证，CRC 在一定程度上标识了浏览器的唯一性，但是在相同设备，相同浏览器上，重复特别严重。国外有一个经过优化后的表示浏览器的唯一性的 JavaScript 库，https://github.com/Valve/fingerprintJS 。

它除了利用 Canvas 以外，还加入了其它的影响因素，这些因素包括

1. 浏览器http请求中的用户代理－navigator.userAgent
2. 浏览器的语言(中文、英文……)－navigator.language
3. 设备屏幕的色彩信息－screen.colorDepth
4. 设备屏幕的宽高－screen.height screen.width
5. 格林威治时间和本地时间之间的时差－Date().getTimezoneOffset()
6. 是否支持sessionStorage－window.sessionStorage
7. 是否支持localStorage－window.localStorage
8. 是否支持indexdDB－window.indexedDB
9. 是否支持－docment.body.addBehavior(IE5的一个属性)
10. 是否支持调用本地数据库－window.openDatabase
11. 浏览器所在系统的CPU等级－navigator.cupClass
12. 客户端的操作系统－navigator.platform
13. 是否支持Do not track功能－navigator.doNotTrack
14. 获取浏览器部分插件信息－flash plugin、Adobe PDF reader、QuickTime、real players、ShockWave player、Windows media player、Silverlight、Skype
15. Canvas 指纹

官网数据显示，该标识精准度达94%。

其测试结论

1. 由于涉及设备以及浏览器的判定因素非常多，重复性很低，31 台设备皆无重复，但是可以设想，毕竟是通过各种属性值去判断唯一性，理想情况下如果两台设备相同浏览器各种设置也相同，还是会出现重复
2. 也正因为涉及的因素多，一旦设备系统更新 or 浏览器版本更新 or 浏览器关键插件有变化(版本更新 or 新增卸载关键插件) ，生成的ID都会改变，由于浏览器版本更新还是比较频繁的，很容易失去之前跟踪的用户

结论

Canvas 指纹只能作为一参考属性去判断设备的唯一性，不能只用这一个因素来判定设备唯一性。FingerPrint.js 也不能取代 Cookie，但是可以作为辅助，如果用户清除了 Cookie 的情况下，还可以通过 FingerPrint.js 跟踪到该用户重新 Set Cookie（结论参考）

在一些场景下：

一般一个指纹跟踪不是永久的跟踪的概念，而是在一个战役内进行活动的跟踪，比如可以发布3个活动，3个活动分别是扫二维码打开一个网址，在另外一个网页内操作，在第三个网页内进行别的操作，然后被采集后在后台通过指纹进行关联，得到本次战役的目标，中间可以通过搞一个抽奖，要用户输入手机号码验证后抽奖，来做一些连接。