网站追踪技术：“帆布指纹识别”canvas fingerprinting

　　一般情况下，网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体，这样可以通过收集这些个体的数据，通过分析后更加精准的去推送广告（精准化营销）或其他有针对性的一些活动。Cookie技术是非常受欢迎的一种。当用户访问一个网站时，网站可以在用户当前的浏览器Cookie中永久植入一个含有唯一标示符（UUID）的信息，并通过这个信息将用户所有行为（浏览了哪些页面？搜索了哪些关键字？对什么感兴趣？点了哪些按钮？用了哪些功能？看了哪些商品？把哪些放入了购物车等等）关联起来。

　　而随着网民对个人隐私的重视，Cookie越来越不受待见。不少安全工具甚至是浏览器都开始允许或引导用户关闭Cookie功能，比如很多主流浏览器都有一个“隐私模式浏览”功能。这样以来，网站就很难追踪用户行为了。但仍然有一些方法可以让网站去追踪每一个访问者的行为，比如通过flash cookie的方式也可以达到唯一标识和追踪的目的。

　　伴随着html5的成熟，通过canvas fingerprinting技术标识一个唯一的浏览器逐渐被接受。它的特点是不通过cookie，用户基本无法屏蔽它 。

一、原理分析

　　可以看这篇：HTML5画布指纹，https://browserleaks.com/canvas#how-does-it-work

　　“帆布指纹识别”代码均使用到了HTML5专属标签的一个现状：在绘制canvas图片时，同样的canvas绘制代码，不同机器和浏览器绘制的图片特征是相同并且独一无二的，这样以来，提取最简单的md5值便可以唯一标识和跟踪这个用户。

　　一段产生canvas元素的javascript代码：

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);

　　同一机器的chrome浏览器，无论正常模式还是隐身模式，得到的crc值始终一致。而对于不同机器得到的值是不同的，追踪效果显而易见。

　　看到这里，相信很多人想问，Why？为什么会出现这样的情况？同样的js代码，在不同设备的浏览器上，结果是唯一并且各不相同的。这到底是为什么？

　　其实原因很简单，同样的HTML5 Canvas元素绘制操作，在不同的操作系统不同的浏览器上，产生的图片内容其实是不完全相同的。出现这种情况可能是有几个原因：

　　1、 在图片格式上，不同web浏览器使用了不同的图形处理引擎、不同的图片导出选项、不同的默认压缩级别等。

　　2、 在像素级别来看，操作系统各自使用了不同的设置和算法来进行抗锯齿和子像素渲染操作。

　　因此，即使是相同的绘图操作，最终产生的图片数据在hash层面上依然是不同的。这个具体代码层面，恐怕要去搞懂各个主流浏览器的实现和以及操作系统的渲染。

　　HTML5 千变万化，利用canvas 这一特性来实现用户追踪，目前并没有好的对抗方案，未来也只能依靠广大浏览器厂商自行了断，实现canvas绘图机制的随机化或许可以很好的保护用户隐私，防止被追踪。

二、使用帆布指纹识别技术的库fingerprintjs

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

　　它除了利用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