Canvas 指纹追踪技术

目录

1. 设备指纹技术介绍

1.1 第一代 —— cookie / evercookie

1.2 第二代 —— 浏览器指纹技术

1.3 第三代 —— 发现设备后面的人

2. 指纹的分类

2.1 普通指纹 —— 通过 http 拿到浏览器信息

2.2 高级指纹 —— 通过多种信息计算出用户uid

3. Canvas 指纹追踪技术

3.1 技术原理

3.2 实现过程

3.3 防止被 Canvas 指纹追踪

4. 参考文章

---

1. 设备指纹技术介绍

1.1 第一代 —— cookie / evercookie

用户登陆后，服务端在客户端设置标志，通过 cookie / evercookie 获取用户信息（可被禁用、无法跨域）

1.2 第二代 —— 浏览器指纹技术

navigator通过 js 获取操作系统、分辨率、像素比等等一系列信息，可供服务端归类用户

通过浏览器的 可见配置、设置 等有辨识度的信息（比如语言、UA、地理位置等），经过一系列计算可以获取到一个唯一值 —— 浏览器指纹

收集用户浏览器指纹 并 记录用户操作，是一个有价值的行为

举个栗子：我喜欢浏览美食类视频，即使我 不登陆账户信息，禁用 cookie，浏览器指纹仍然可以锁定我的身份，记录我的兴趣爱好，进而在下次打开网站时推送个性化广告

但是不能仅仅依靠 navigator 哦

1.3 第三代 —— 发现设备后面的人

通过收集用户的行为、习惯来为用户建立特征值甚至模型，将用户进行归并

2. 指纹的分类

2.1 普通指纹 —— 通过 http 拿到浏览器信息

普通指纹：容易被发现，容易被修改，例如 http 的 header

Accept-Language —— 包含了浏览器的语言信息，通过 操作系统 或 浏览器设置的语言 生成；一些网站会直接忽略掉，通过 用户IP 判断地区呈现不同的网页的语言

User-Agent —— 包含了浏览器和操作系统的信息，例如我当前使用的是 Windows10、106 版本的 Chrome；即使在头部刻意伪造了UA，网页也可以通过 navigator.userAgent 拿到真实 UA

可通过下方网站，查看当前浏览器 http headers 信息

https://httpbin.org/headershttps://httpbin.org/headers

{
  headers: {
    Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
    Accept-Encoding: "gzip, deflate, br",
    Accept-Language: "zh-CN,zh;q=0.9",
    Host: "httpbin.org",
    Sec-Ch-Ua: ""Chromium";v="106", "Google Chrome";v="106", "Not;A=Brand";v="99"",
    Sec-Ch-Ua-Mobile: "?0",
    Sec-Ch-Ua-Platform: ""Windows"",
    Sec-Fetch-Dest: "document",
    Sec-Fetch-Mode: "navigate",
    Sec-Fetch-Site: "none",
    Sec-Fetch-User: "?1",
    Upgrade-Insecure-Requests: "1",
    User-Agent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36",
    X-Amzn-Trace-Id: "Root=1-63534c12-209269e506c472a85e88c574"
  }
}

也可通过下方网站，拿到更详细的浏览器信息（IP地址、地理信息等）

What browser? My browser? Is my browser out of date?What browser do I have? Find out my browser, check that my browser is up to date and what my settings are.https://www.whatismybrowser.com/

Fingerprint Pro - Formerly FingerprintJS - Device fingerprinting APIFingerprint Pro is the 99.5% accurate device fingerprinting solution. FingerprintJS is the top open-source browser fingerprinting library. Prevent fraud, spam, and account takeovers. Available for web, iOS, and Android.https://fingerprint.com/

2.2 高级指纹 —— 通过多种信息计算出用户uid

信息熵（entropy）是接收的每条消息中，所包含信息的平均量，熵越高，则传输的信息越多

除了通过 http 可以拿到浏览器信息外，其他方式也可以拿到，参考下面的文章

Cover Your Tracks | Abouthttps://coveryourtracks.eff.org/about

• 每个浏览器的用户代理字符串
• 浏览器发送的HTTP ACCEPT标头
• 屏幕分辨率和色彩深度
• 系统设置为时区
• 浏览器中安装的浏览器扩展/插件，例如Quicktime，Flash，Java或Acrobat，以及这些插件的版本
• 计算机上安装的字体，由Flash或Java报告。
• 浏览器是否执行JavaScript脚本
• 浏览器是否能种下各种cookie和“超级cookie（super cookies）”
• 通过Canvas指纹生成的图像的哈希
• WebGL指纹生成的图像的哈希
• 是否浏览器设置为“Do Not Track”
• 系统平台（例如Win32，Linux x86）
• 系统语言（例如，cn,en-US）
• 浏览器是否支持触摸屏

上面列出来的信息，有各自的权重，通过一定的计算规则，可以生成唯一的 用户uid

权重信息：

3. Canvas 指纹追踪技术

通过前面的内容，我们应该能意识到，navigator 并不能对客户端进行唯一判定

3.1 技术原理

Canvas 是 HTML5 新特性，可以用于绘制图片，也可以用于追踪用户

使用 Canvas 绘制同一元素，但由于系统不同、字体渲染引擎不同，对抗锯齿、次像素渲染等算法的不同，Canvas 将同样的文字转成图片，得到的结果也不同

因此，使用 Canvas 调用 toDataURL 转换 base64 图片，会通过设备，操作系统，浏览器 三种信息生成唯一标识，重复的概率很小

3.2 实现过程

const createCanvasUuid = () => {
  // 创建 canvas 画布
  const canvas = document.createElement('canvas');
  // 2D
  const ctx = canvas.getContext('2d');
  // 即将绘制的文字
  const txt = 'Lyrelion';
  ctx.fillText(txt, 10, 10);
  // 导出绘制的图片
  console.log('base64 图片中包含了 设备、系统、浏览器标识 ===', canvas.toDataURL());
};
createCanvasUuid();

生成效果： 

查看自己的 canvas 指纹信息

Canvas Fingerprinting - BrowserLeaksBrowser Fingerprinting with no user agent identifiers, only through the HTML5 Canvas element. The method is based on the fact that the same canvas-code can produce different pixels on a different web browser, depending on the system on which it was executed.https://browserleaks.com/canvas

如下图所示，在 901701 份样本中，只有 2157 个样本，和我的 Canvas 指纹一样

3.3 防止被 Canvas 指纹追踪

Canvas 指纹追踪的优缺点并存：

• 可能暴露用户浏览网页的行为，如果无法将用户和真人联系起来，产生的价值有限；
• 可以防止恶意刷票等行为；

预防措施：

• 【推荐】安装某歌浏览器插件 —— CanvasFingerprintBlock，每次往 Canvas 画布里面注入一个随机噪音，从而影响 base64 加密结果（图片数据的CRC校验结果）
• 使用 Tor、LoginBox 等指纹仿关联浏览器，每次往 Canvas 画布里面注入一个固定噪音，从而影响 base64 加密结果（图片数据的CRC校验结果）

4. 参考文章

浏览器指纹追踪技术简述 - 掘金如果遇到过以上类似的场景，这时候就要考虑是不是浏览器指纹在其中发挥作用。 “浏览器指纹”是一种通过浏览器对网站可见的配置和设置信息来跟踪Web浏览器的方法，浏览器指纹就像我们人手上的指纹一样，具有个体辨识度，只不过现阶段浏览器指纹辨别的是浏览器。 人手上的指纹之所以具有唯一性，…https://juejin.cn/post/6844903970180169742https://www.jianshu.com/p/e2efc4c070ebhttps://www.jianshu.com/p/e2efc4c070eb