帆布指纹识别
一般情况下，网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体，这样可以通过收集这些个体的数据，通过分析后更加精准的去推送广告(精准化营销)或其他有针对性的一些活动。Cookie技术是非常受欢迎的一种。当用户访问一个网站时，网站可以在用户当前的浏览器Cookie中永久植入一个含有唯一标示符(UUID)的信息，并通过这个信息将用户所有行为(浏览了哪些页面?搜索了哪些关键字?对什么感兴趣?点了哪些按钮?用了哪些功能?看了哪些商品?把哪些放入了购物车等等)关联起来。
而随着网民对个人隐私的重视，Cookie越来越不受待见。不少安全工具甚至是浏览器都开始允许或引导用户关闭Cookie功能，比如很多主流浏览器都有一个“隐私模式浏览”功能。这样以来，网站就很难追踪用户行为了。但仍然有一些方法可以让网站去追踪每一个访问者的行为，比如通过flash cookie的方式也可以达到唯一标识和追踪的目的。
笔者近期注意到，国外媒体报道了一种非常难以摆脱的新型在线追踪工具被用来尾随从白宫官网到色情网站YouPorn.com的热门网站的访问者。经过分析，这个就是另一种比较新的访客追踪技术：“帆布指纹识别”技术，具体代码见附录6。这个技术的独特之处是：它不像通过Cookie或者Flash Cookie等之类的方式，你基本是无法屏蔽它的。
【原理分析】
笔者收集整理了很多知名站点上的类似代码，详见附录4，从这些“帆布指纹识别”代码可以看出，均使用到了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隐身模式测试：
同一机器的chrome浏览器，无论正常模式还是隐身模式，得到的crc值始终一致。而对于不同机器得到的值是不同的，追踪效果显而易见。
看到这里，相信很多人想问，Why?为什么会出现这样的情况?同样的js代码，在不同设备的浏览器上，结果是唯一并且各不相同的。这到底是为什么?其实原因很简单，同样的HTML5 Canvas元素绘制操作，在不同的操作系统不同的浏览器上，产生的图片内容其实是不完全相同的。出现这种情况可能是有几个原因：
1、在图片格式上，不同web浏览器使用了不同的图形处理引擎、不同的图片导出选项、不同的默认压缩级别等。
2、在像素级别来看，操作系统各自使用了不同的设置和算法来进行抗锯齿和子像素渲染操作。
因此，即使是相同的绘图操作，最终产生的图片数据在hash层面上依然是不同的。这个具体代码层面，恐怕要去搞懂各个主流浏览器的实现和以及操作系统的渲染。笔者精力所限，短期很难给出。
【后话】
HTML5千变万化，利用canvas 这一特性来实现用户追踪，目前并没有好的对抗方案，未来也只能依靠广大浏览器厂商自行了断，实现canvas绘图机制的随机化或许可以很好的保护用户隐私，防止被追踪。
文中涉及到的代码和技术细节，只限用于技术交流，切勿用于非法用途。另外，如果想要研究更多的用户追踪技术，推荐去研究下大名鼎鼎的专注于访客追踪的开源项目：evercookie【附录5】，这个猥琐的小工具，通过几乎所有你想到和想不到的方式(Cookie、Flash、Silverlight、Web History、HTTP ETags、Web cache、window.name caching、userData storage、HTML5、甚至是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
帆布指纹识别（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以外，还加入了其它的影响因素，这些因素包括
- 浏览器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指纹
官网数据显示，该标识精准度达94%，基于原理 https://panopticlick.eff.org/browser-uniqueness.pdf
国内一程序员在此基础上做了 测试，测试结果https://docs.zoho.com/sheet/ropen.do?rid=08m2ga1cf6790c0eb4d8c8f7e54ca6ddb9b72
| 表格 1 | |||||||||||||
| 手机型号 | 系统 | Android原生 or Safari | uc浏览器 | qq浏览器 | 微信浏览器 | 备注 | |||||||
| 算法优化过的fingerprint | 简单的示例代码 | 算法优化过的fingerprint | 简单的示例代码 | 版本 | 算法优化过的fingerprint | 简单的示例代码 | 版本 | 算法优化过的fingerprint | 简单的示例代码 | 版本 | |||
| SonyEricsson LT15i | Android 2.3.4 | 3069863566 | 390fde4f | 1317560509 | 9ce51412 | v9.9.0.459 | 2177181476 | 3ea97fca | v5.2 | ||||
| Sony X10i | Android 2.3.3 | 3113311216 | js出错 | 2637631051 | 9ce51412 | v9.9.0.459 | 2131234727 | 3ea97fca | v5.2 | 2678610518 | js出错 | v5.3.1 | 原生的刷新优化过生成的id不会变化 |
| 摩托罗拉 MB526 | Android 2.3.6 | 2364220961 | js出错 | － | － | － | － | － | － | － | － | － | 无sd卡无法安装浏览器应用程序 |
| 华为 u9508 | Android 4.0.4 | 3905553191 | 7e41cc0f | 4273392099 | b699d48c | v9.9.0.459 | 1587050929 | 78de4112 | v5.2.0.870 | 4026915635 | 7e41cc0f | v5.3.1 | |
| OPPO X907 | Android 4.0.3 | 726684502 | 7e41cc0f | 2089481481 | d07a1ee9 | v9.9.0.459 | 3231943450 | 78de4112 | v5.2 | 888269767 | 7e41cc0f | v5.3.1 | |
| htc t528w | Android 4.1.1 | 319655688 | a6cb1bf9 | 2479004385 | 56d50248 | v9.8 | 356698439 | 244ae093 | v5.2.1.880 | 2025279959 | a6cb1bf9 | v5.3.1 | |
| 2307781626 | d07a1ee9 | v9.9.0.459 | |||||||||||
| 红米移动版 | Android 4.2.1 | 2391689733 | 9c6ad73c | 1950263795 | 244ae093 | v5.2.1.880 | 1813996467 | 244ae093 | v5.4beta | ||||
| HUAWEI A199 | Android 4.1.2 | 786613426 | 9c6ad73c | 1568290891 | 00000000 | v8.7.2 | 3315869337 | c1e8ddab | v4.2 | 3514548781 | 9c6ad73c | v5.3.1 | UCv8.7.2不支持canvas，每次刷新优化后生成的id会变化，示例代码生成id一直是8个0 |
| 1118832592 | b699d48c | v9.9.0.459 | 1980938942 | 244ae093 | v5.2 | ||||||||
| HUAWEI P6-T00 | Android 4.2.2 | 2890925815 | 9c6ad73c | 452391340 | b699d48c | v9.9.0.459 | 3877925850 | 244ae093 | v5.2 | 3836773909 | 9c6ad73c | v5.3.1 | |
| 魅族 M353 | Android 4.2.1 | 1914110408 | 9c6ad73c | 3750243844 | 431d50f8 | v9.9.0.459 | 3750421827 | 244ae093 | v5.2 | 1096133187 | 9c6ad73c | v5.3.0 | |
| 482295408 | 9c6ad73c | v5.3.1 | |||||||||||
| HTC 802w | Android 4.2.2 | 2657761243 | 9c6ad73c | 2182659327 | dedbb2de | v9.8.0.435 | 2352114048 | 244ae093 | v5.2 | 1328536463 | 9c6ad73c | v4.5 | |
| 2206482289 | 2bc8041a | v9.9.0.459 | 172064929 | 9c6ad73c | v5.3.1 | ||||||||
| 红米 noet | Android 4.2.2 | 398161035 | 9c6ad73c | 197430937 | d07a1ee9 | v9.8.9.457 | 860144104 | 9c6ad73c | v5.0 | 2695087349 | 9c6ad73c | v5.3.1 | |
| 三星 GT-N7100 | Android 4.2.2 | 3229417935 | 9c6ad73c | 755839663 | 9fb1a593 | v9.8.9.457 | 1643973998 | b31ee991 | v5.2 | 2036662041 | 9c6ad73c | v5.1 | |
| 854278007 | 9c6ad73c | v5.3.1 | |||||||||||
| Lenovo K900 | Android 4.2.1 | 1758074907 | 9c6ad73c | 3465119114 | 9c6ad73c | v5.3.1 | |||||||
| 三星 galaxy s5 | Android 4.4.2 | 498065608 | 29725ab4 | 749934522 | d2a60b1d | v9.8.9.457 | 2294751620 | cd456c4a | v5.2.1.880 | 1887934795 | 8140f6e0 | v5.2 | |
| 3807187249 | 8140f6e0 | v5.3.1 | |||||||||||
| 三星 GT-I9505 | Android 4.3 | 118099825 | 4f8f416c | 1898858301 | 4228c48e | v9.9.0.459 | 2205938319 | a3ee5a29 | v5.2 | 4256482719 | fbf76091 | v5.3.1 | |
| 三星 note3 | Android 4.3 | 3923466876 | 4f8f416c | 1961962933 | 0482a2ac | 灵动版 | 408784441 | 0482a2ac | v5.0.2.710 | 4221776986 | 0482a2ac | v5.3.1 | |
| 4023807084 | 4546f3bb | v9.8.0.435 | |||||||||||
| vivo x3t | Android 4.2.1 | 2341248451 | da5b08ce | 1512563799 | c36972ca | v9.9.0.459 | 3677055007 | 33834835 | v5.1.0.780 | 3748495542 | da5b08ce | v5.2.1 | 原生浏览器版本v2.3.1 |
| 2341248451 | da5b08ce | 2080629171 | 33834835 | v5.2.1.880 | 293292691 | da5b08ce | v5.3.1 | 原生浏览器版本v2.3.3 | |||||
| vivo X1 | Android 4.1.1 | 752680764 | da5b08ce | 4192034694 | c36972ca | v9.9.0.459 | 4029696985 | 33834835 | v5.2 | 1912866602 | da5b08ce | v5.3.1 | |
| 三星 GT-I9502 | Android 4.2.2 | 3824555000 | d457e86b | 4271101143 | 53288053 | v9.7.9439 | 958189852 | 31dbc3dd | v5.0.0.650 | 3721105672 | 759549f9 | v4.5.1 | |
| 861119218 | 09ca4266 | v9.9.0.459 | 442109150 | 759549f9 | v5.3.1 | ||||||||
| LG nexus5 | Android 4.3 | 1934848714 | 91aedadb | 2787277112 | a0d15a90 | v9.9.0.459 | 2462651612 | 91aedadb | v5.2.1.880 | 3690133431 | 91aedadb | v5.3.1 | |
| 三星 GT-S7562 | Android 4.0.4 | 2614919294 | 0d5b2b4b | 436079966 | 0b27d3d8 | v9.7.5.418 | 35268090 | b437c248 | v5.2 | 1659108745 | 0d5b2b4b | v5.3.1 | |
| 502410648 | d155acfa | v9.8.9.457 | |||||||||||
| Huawei P1 U9200 | Android 4.0.3 | 3177416712 | 2d694a48 | 4051711183 | 56d50248 | v9.6.0.378 | 4124042100 | fa189661 | v4.5 | 1601581701 | 7e41cc0f | v5.3.1 | |
| 3743446141 | d07a1ee9 | v9.8.9.457 | |||||||||||
| Nokia X | Android 4.1.2 | 3598202588 | 7ba05ba8 | 765903625 | 859aa2b8 | v9.9.0.459 | 3070076558 | 418420bf | v5.2 | 2591054263 | bee57099 | v5.0.3 | |
| 1779200183 | bee57099 | v5.3.1 | |||||||||||
| iphone 3GS | iOS 6.0 | 2754182167 | 9fcce736 | 2426993793 | 9fcce736 | v9.7.1.450 | 4019179322 | 9fcce736 | v4.3 | 3034320187 | 9fcce736 | v5.3.1 | |
| touch 4 | iOS 6.0.1 | 1326709631 | 9fcce736 | 2614633304 | 9fcce736 | v4.5 | 3107294191 | 9fcce736 | v5.3.1 | ||||
| iphone5s | iOS 7.1.2 | 3595104389 | 03048452 | 913535178 | 03048452 | v9.8.0.451 | 2722128024 | 03048452 | v5.3.1 | ||||
| ipad 2 | iOS 7.0.4 | 128750767 | 03048452 | 379240706 | 03048452 | v2.4.2.414 | 3271622238 | 03048452 | v4.2.1 | ||||
| iphone 4S | iOS 7.0.6 | 2862380899 | 9fd0577f | 2558051848 | 9fd0577f | v9.7.5.438 | 3620524272 | 9fd0577f | v5.2.1 | 2859315108 | 9fd0577f | v5.3.1 | |
| touch 5G | iOS 7.1.1 | 2702325906 | 9fd0577f | 3772802722 | 9fd0577f | v9.8.0.451 | 2970288195 | 9fd0577f | v5.2.1 | 495467843 | 9fd0577f | v5.3.1 | |
| iphone 5c | iOS 8.0 | 1300849469 | 9fd0577f | 2561622031 | 9fd0577f | v9.8.0.451 | 3288966699 | 9fd0577f | v5.2.1 | 3767977964 | 9fd0577f | v5.3.1 | |
| 备注说明 | 有特殊背景色的单元格说明有重复，同背景色同字体颜色的，是相同的数据 | ||||||||||||
其测试结论
1.由于涉及设备以及浏览器的判定因素非常多，重复性很低，31台设备皆无重复
但是可以设想，毕竟是通过各种属性值去判断唯一性，理想情况下如果两台设备相同浏览器各种设置也相同，还是会出现重复
2.也正因为涉及的因素多，一旦设备系统更新 or 浏览器版本更新 or 浏览器关键插件有变化(版本更新 or 新增卸载关键插件) ，生成的ID都会改变，由于浏览器版本更新还是比较频繁的，很容易失去之前跟踪的用户
结论：canvas指纹只能作为一参考属性去判断设备的唯一性，不能只用这一个因素来判定设备唯一性。fingerPrint.js也不能取代cookie，但是可以作为辅助，如果用户清除了cookie的情况下，还可以通过fingerPrint.js跟踪到该用户重新set cookie（结论参考）
在一些场景下：
中间可以通过搞一个抽奖，要用户输入手机号码验证后抽奖，来做一些连接。