canvas硬件指纹识别技术的原理和产生背景,webGL硬件指纹和AudioContext音频指纹

Canvas硬件指纹概念

canvas是一种在网页上绘制2D和动画的技术。

Canvas 通过命令浏览器绘制一个隐藏的 Canvas 图像来实现指纹识别。在不同的机器上，这张图片的绘制结果略有不同；但如果机器相同，则图像也相同。 图像被绘出后，它会被转换成一个哈希字符串，被进一步用于身份验证的额外熵。

普林斯顿大学和比利时鲁汶大学安全研究人员发表了一篇研究报告指出，超过 5%的网站使用 Canvas 来进行指纹识别。

值得注意的是，网站通过canvas技术计算出来的设备指纹哈希值并不是唯一的，因为世界各地有很多用户使用的设备硬件和系统是完全相同的。 所以如果您显示了真实的Canvas指纹，您只会被划分到使用同一硬件的用户群。此外，通过变更其他指纹，您可以增加网站将您的浏览器配置文件视为单独身份的熵值。

您可以通过访问Browserleaks test网站来检测设备的canvas指纹信息。

手机如果不开启保护，网站将会得到您设备的真实Canvas指纹。

开启保护，LoginBox会为当前浏览器配置文件随机生成一个固定的canvas噪音。为了更好地理解其工作原理，我们可以将其类比为一个“语音修正器”。当您使用一个有着特定预设的语音修饰器时，它会改变你的声音，使它与原来的声音有很大的区别，但随着时间的推移这种变化将保持一致。

canvas硬件指纹(浏览器指纹)的产生背景

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

而随着网民对个人隐私的重视，Cookie 越来越不受待见。不少安全工具甚至是浏览器都开始允许或引导用户关闭 Cookie 功能，比如很多主流浏览器都有一个“隐私模式浏览”功能。同时，我们可以很方便的使用浏览器的快捷键清除缓存，这样在两次访问的区间也就无法识别是否是同一个用户，这样一来，网站就很难追踪用户行为了。

在这个背景下浏览器指纹也就应运而生。

如何获取浏览器指纹?

做开发的一定知道浏览器 navigator 对象 吧，通过 navigator 对象我们可以获取到足够的浏览器相关的信息。我们可以直接在浏览器控制台输入 navigator: 输出如下：

其中获取的硬件类型、操作系统、用户代理、系统字体、语言、屏幕分辨率、浏览器插件 、浏览器扩展、浏览器设置、时区差、地理位置 等众多信息，这些信息可以称之为浏览器的指纹信息。

这些指纹信息“类似”人类的身高、年龄等，有很大的冲突概率，只能作为辅助识别。

这些指纹不能对某个人进行唯一性标识，也无法对客户端进行唯一性判定，基于HTML5的诸多高级指纹对此提供了新思路。

从根本上来说，每一种浏览器都会使用不同的图像处理引擎，不同的导出选项，不同的压缩等级，所以每一台电脑绘制出的图形都会有些许不同，这些图案可以被用来给用户设备分配特定编号（指纹），也就是说可以用来识别不同用户。

什么是 Canvas 指纹

从根本上来说，每一种浏览器都会使用不同的图像处理引擎，不同的导出选项，不同的压缩等级，所以每一台电脑绘制出的图形都会有些许不同，这些图案可以被用来给用户设备分配特定编号（指纹），也就是说可以用来识别不同用户。

那么，如何给我们的网站增加 Canvas指纹 呢？

我们可以通过html5的canvas接口，在网页上绘制一个隐藏的画布图像。

值得注意的是，如果用户的设备，操作系统，浏览器都一样的话，计算出来的 canvas 指纹是一样的。换句话说：canvas 指纹不具备唯一性，要和其他的浏览器指纹相互结合利用来进一步计算出区分度更高的指纹标识。

如何获取 Canvas 指纹

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

测试结果表明，同一浏览器访问该域时生成的CRC校验码总是不变。

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

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

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

即使是相同的绘图操作，最终产生的图片数据在 hash 层面上依然是不同的。

获取 Canvas 指纹：

<script type="text/javascript">
  function bin2hex(s) {
    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,", "");
    // window.atob 用于解码使用 base-64 编码的字符串
    var bin = atob(b64);
    var crc = bin2hex(bin.slice(-16, -12));
    return crc;
  }

  console.log(getUUID("前开发爱好者"));
</script>

不同浏览器查看获得不同的指纹信息：

如何检测 canvas 指纹？

在线检测地址：

https://browserleaks.com/canvas

如何隐藏自己的 canvas 指纹？

随着谷歌浏览器宣布为了保护用户的隐私，跨域请求不再携带cookies。浏览器指纹技术成为追踪用户的热门技术，那有没有办法隐藏我们的 canvas 指纹呢？

目前主要用2种方式：

1.安装浏览器插件，谷歌应用商店有随机修改canvas指纹的插件（CanvasFingerprintBlock），其原理是，每次随机往 canvas 画布里面注入一个随机的噪音（人肉眼是看不到的），从而影响图片数据的CRC校验结果。

2.类似LoginBox, multilogin 这样的指纹仿关联软件，其原理是：为每个浏览器窗口环境单独分配指纹数据，和第 1 种方式一样，也是往 canvas 画布里面注入一个随机的噪音，只是这个噪音是固定的。

主要来自:前端开发爱好者

拓展阅读:

webGL硬件指纹

webGL是一种在浏览器上绘制3D图形的技术。网站可以通过该技术来识别用户的硬件设备指纹，主要通过以下2种方式：

WebGL报告——完整的WebGL浏览器报告表是可获取、可被检测的。通过读取报告中的vendor和renderer信息，可以获取到显卡的供应商和型号信息。

WebGL图像——渲染和转换为哈希值的隐藏3D图像。由于最终结果取决于进行计算的硬件设备，因此此方法会为设备及其驱动程序的不同组合生成唯一值。这种方式为不同的设备组合和驱动程序生成了唯一值。

您可以通过访问Browserleaks test网站来检测设备的webgl指纹信息。

AudioContext音频指纹

AudioContext指纹（也被称作“音频指纹”）是设备音频栈的哈希衍生值。

AudioContext指纹原理大致如下：

方法一：生成音频信息流(三角波)，对其进行FFT变换，计算SHA值作为指纹，音频输出到音频设备之前进行清除，用户毫无察觉。

方法二：生成音频信息流（正弦波），进行动态压缩处理，计算MD5值。

AudioContext指纹基本原理：

主机或浏览器硬件或软件的细微差别，导致音频信号的处理上的差异，相同器上的同款浏览器产生相同的音频输出，不同机器或不同浏览器产生的音频输出会存在差异。

你可以通过访问下面的网址，来检测AudioContext指纹。

https://audiofingerprint.openwpm.com/

LoginBox中的开启音频指纹保护

通过开启音频指纹保护，LoginBox会在浏览器音频数据中加入随机噪音，从而使得计算出的音频指纹数据具备唯一性。