基于HTML Canvas实现“指纹识别”技术

作者：zhanhailiang 日期：2015-01-31

说明

所谓指纹识别是指为每个设备标识唯一标识符(以下简称UUID)。诸如移动原生的APP都可以通过调用相关设备API来获取相应的UUID。但是浏览器内WebAPP受限于运行环境无法直接防部设备API，此时需要通过其它方法来设置UUID。

基于持久化Cookie生成UUID

原理

当用户访问一个网站时，网站可以在用户当前的浏览器Cookie中种入含有UUID的Cookie，并通过这个信息将用户所有行为（浏览了哪些页面？搜索了哪些关键字？对什么感兴趣？点了哪些按钮？用了哪些功能？看了哪些商品？把哪些放入了购物车等等）关联起来。

实现

function rand(len) {
    var hex = "0123456789abcdef",
        str = "",
        index = 0;
    for (len = len || 32; len > index; index++) {
        str += hex.charAt(Math.ceil(1e8 * Math.random()) % hex.length);
    }
    return str;
}

var uuid = (new Date).getTime() + "_" + rand();

// 写持久化cookie，两年后过期
// setcookie(‘uuid‘, uuid, 732 * 24 * 60 * 60);

弊端

之后就可以使用UUID来实现用户追踪技术，方便后续的数据分析工作。

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

基于HTML Canvas实现“指纹识别”技术

原理

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

测试结果表明，同一浏览器访问该域时生成的CRC校验码总是不变。可以简单理解为同样的HTML Canvas元素绘制操作，在不同的操作系统不同的浏览器上，产生的图片内容其实是不完全相同的。出现这种情况可能是有几个原因：

1. 在图片格式上，不同web浏览器使用了不同的图形处理引擎、不同的图片导出选项、不同的默认压缩级别等。
2. 在像素级别来看，操作系统各自使用了不同的设置和算法来进行抗锯齿和子像素渲染操作。
3. 即使是相同的绘图操作，最终产生的图片数据在hash层面上依然是不同的。

实现

function bin2hex(s) {
  //  discuss at: http://phpjs.org/functions/bin2hex/
  // original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // bugfixed by: Onno Marsman
  // bugfixed by: Linuxworld
  // improved by: ntoniazzi (http://phpjs.org/functions/bin2hex:361#comment_177616)
  //   example 1: bin2hex(‘Kev‘);
  //   returns 1: ‘4b6576‘
  //   example 2: bin2hex(String.fromCharCode(0x00));
  //   returns 2: ‘00‘

  var i, l, o = ‘‘,
    n;

  s += ‘‘;

  for (i = 0, l = s.length; i < l; i++) {
    n = s.charCodeAt(i)
      .toString(16);
    o += n.length < 2 ? ‘0‘ + n : n;
  }

  return o;
}

function getUUID(domain) {
    var canvas = document.createElement(‘canvas‘);
    var ctx = canvas.getContext("2d");
    var txt = domain;
    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);

    var b64 = canvas.toDataURL().replace("data:image/png;base64,","");
    var bin = atob(b64);
    var crc = bin2hex(bin.slice(-16,-12));
    return crc;
}

console.log(getUUID("http://m.vip.com/"));

优点

基于HTML Canvas生成的UUID可以有效的用于用户追踪技术，目前并没有有效的对抗方案。

更多阅读

1. Client-Side:HTML5 Canvas Fingerprinting
2. 取代cookie的网站追踪技术：“帆布指纹识别”初探
3. JavaScript bin2hex function
4. 现有IOS设备唯一标示符的方案比较
5. Is there a unique Android device ID?