[转]取代cookie的网站追踪技术：”帆布指纹识别”初探

【前言】

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

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

笔者近期注意到，国外媒体报道了一种很是难以摆脱的新型在线追踪工具被用来尾随从白宫官网到色情网站YouPorn.com的热门网站的访问者。通过分析，这个就是另外一种比较新的访客追踪技术：“帆布指纹识别”技术，具体代码见附录6。这个技术的独特之处是：它不像经过Cookie或者Flash Cookie等之类的方式，你基本是没法屏蔽它的。

【原理分析】

笔者收集整理了不少知名站点上的相似代码，详见附录4，从这些“帆布指纹识别”代码能够看出，均使用到了HTML5专属标签<canvas>的一个现状：在绘制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元素绘制操做，在不一样的操做系统不一样的浏览器上，产生的图片内容实际上是不彻底相同的。出现这种状况多是有几个缘由：

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

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

所以，即便是相同的绘图操做，最终产生的图片数据在hash层面上依然是不一样的。这个具体代码层面，恐怕要去搞懂各个主流浏览器的实现和以及操做系统的渲染。笔者精力所限，短时间很难给出。你们能够自行摸索下，欢迎交流 J

【后话】

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

文中涉及到的代码和技术细节，只限用于技术交流，切勿用于非法用途。另外，若是想要研究更多的用户追踪技术，推荐去研究下大名鼎鼎的专一于访客追踪的开源项目：evercookie【附录5】，这个猥琐的小工具，经过几乎全部你想到和想不到的方式（Cookie、Flash、Silverlight、Web History、HTTP ETags、Web cache、window.name caching、userData storage、HTML五、甚至是java的漏洞等）来跟踪访问网站的用户行为。

【附录】

[1]   http://cseweb.ucsd.edu/~hovav/dist/canvas.pdf
[2]   https://securehomes.esat.kuleuven.be/~gacar/sticky/index.html
[3]   https://panopticlick.eff.org/browser-uniqueness.pdf
[4]   部分“ 帆布指纹鉴别代码”地址列表：
    http://ct1.addthis.com/static/r07/core130.js
    http://i.ligatus.com/script/fingerprint.min.js
    http://src.kitcode.net/fp2.js
    http://admicro1.vcmedia.vn/fingerprint/figp.js
    http://shorte.st/js/packed/smeadvert-intermediate-ad.js
    http://stat.ringier.cz/js/fingerprint.min.js
    http://cya2.net/js/STAT/89946.js
    http://images.revtrax.com/RevTrax/js/fp/fp.min.jsp
    http://rackcdn.com/mongoose.fp.js
[5]  evercookie 官网   http://samy.pl/evercookie/
[6]    使用帆布指纹识别技术的库fingerprintjs 官网   https://github.com/Valve/fingerprintjs
[7]    https://www.browserleaks.com/canvas#how-does-it-work

@via 腾讯安全