帆布指纹

发表于 2018-03-02 更新于 2022-07-09 分类于 other 阅读次数： Waline：本文字数： 1.5k 阅读时长 ≈ 1 分钟

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

function bin2hex (s) {
  // From: http://phpjs.org/functions
  // +   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;
}


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


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

以上代码在chrome浏览器里运行会得到一个结果 3c5c9044 ，在火狐会得到 7e7f4d86，在IE会得到 5ec31ae3
只要用户用同一浏览器，产生的帆布指纹就不会变。这样就可以达到反爬虫的效果。
缺点是公司批量购买的电脑，批量安装系统，这些电脑的结果可能会一样。

References

[1] 取代cookie的网站追踪技术：”帆布指纹识别”初探
[2] 帆布指纹识别（CANVAS FINGERPRINTING）
[3] fingerprintJS
[4] browser-uniqueness.pdf
[5] Token 认证的来龙去脉
[6] token认证