帆布算法，对客户端进行指纹识别（CANVAS FINGERPRINTING）

广告联盟或许网站运营者都希望能够精准定位并标识每一个个体，通过对用户行为的分析（浏览了哪些页面？搜索了哪些关键字？对什么感兴趣？点了哪些按钮？用了哪些功能？看了哪些商品？把哪些放入了购物车等等），为用户推送更加精准的广告（精准化营销）。同时，通过对用户的标识，可以将不同站点的用户进行关联。

在过去，实现上述cookie是最受欢迎的一种。但由于移动互联网的发展，移动设备限制、用户禁用cookie。使得cookie愈来愈不受待见。伴随着html5的成熟，通过canvas fingerprinting技术标识一个唯一的浏览器逐渐被接受。它的特点是不通过cookie，用户基本无法屏蔽它 。

其实现原理：

 1 var canvas = document.createElement('canvas'); 2 var ctx = canvas.getContext('2d'); 3 var txt = 'http://security.tencent.com/'; 4 ctx.textBaseline = "top"; 5 ctx.font = "14px 'Arial'"; 6 ctx.textBaseline = "tencent"; 7 ctx.fillStyle = "#f60"; 8 ctx.fillRect(125,1,62,20); 9 ctx.fillStyle = "#069";10 ctx.fillText(txt, 2, 15);11 ctx.fillStyle = "rgba(102, 204, 0, 0.7)";12 ctx.fillText(txt, 4, 17);

获取绘画的内容，需要使用到canvas.toDataURL()方法，该方法返回的是图片内容的base64编码字符串。对于PNG文件格式，以块(chunk)划分，最后一块是一段32位的CRC校验，提取这段CRC校验码便可以用于用户的唯一标识

1 var b64 = canvas.toDataURL().replace("data:image/png;base64,","");2 var bin = atob(b64);3 var crc = bin2hex(bin.slice(-16,-12));4 console.log(crc);

通过验证，crc在一定程度上标识了浏览器的唯一性，但是，在相同设备，相同浏览器上，重复特别严重。国外有一个经过优化后的表示浏览器的唯一性的js，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%，基于原理 https://panopticlick.eff.org/browser-uniqueness.pdf

国内一程序员在此基础上做了 测试，测试结果https://docs.zoho.com/sheet/ropen.do?rid=08m2ga1cf6790c0eb4d8c8f7e54ca6ddb9b72

其测试结论 

1.由于涉及设备以及浏览器的判定因素非常多，重复性很低，31台设备皆无重复

但是可以设想，毕竟是通过各种属性值去判断唯一性，理想情况下如果两台设备相同浏览器各种设置也相同，还是会出现重复

2.也正因为涉及的因素多，一旦设备系统更新 or 浏览器版本更新 or 浏览器关键插件有变化(版本更新 or 新增卸载关键插件) ，生成的ID都会改变，由于浏览器版本更新还是比较频繁的，很容易失去之前跟踪的用户

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

在一些场景下：