canvas指纹追踪技术

技术场景-（常用于广告联盟），例如你在某个网站上没有登陆过账号信息，看过某个商品，过两天用同一台电脑访问其他网站的时候却发现很多同类商品的广告。

在过去我们可能使用cookie去追踪用户信息，不过弊端也很明显，cookie可以被用户禁止掉，从而无法追踪，并且无法跨域访问。

或者就是浏览器指纹（navigator）

language: 浏览器使用的语言

"zh-CN"

userAgent: 用户代理

"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36"

platform: 操作系统

"Win32"

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

canvas指纹

canvas可以用来绘制一些图形、游戏等等，都会用到。它也可以用来跟踪用户，当我们调用toDataURL转换base64，它底层会获取设备，操作系统，浏览器三合一的唯一标识(uuid)，如果其他用户使用的三个信息和你一样的话也是重复，这个概率是很低的也不排除可能。

生成canvas指纹

const uuid = () => {
    /** 创建一个画布 */
    const canvas = document.createElement('canvas')
    /** 创建绘图上下文 */
    const ctx = canvas.getContext('2d')
    /** 随便初始化一个字符串 */
    const txt = 'test'
    /** 填充文本 */
    ctx.fillText(txt, 10, 10) // fillText(在画布上输出的文本，绘制文本的左上角 x 坐标位置，绘制文本的左上角 y 坐标位置)
    /** 打印生成的base64 */
    console.log(canvas.toDataURL())
    /** 返回唯一标识uuid */
    return md5(canvas.toDataURL())
}

Chrome浏览器生成的base64：

data:image/png;base64,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

Edge浏览器生成的base64：

data:image/png;base64,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

如何防止跟踪

谷歌应用商店有随机修改canvas指纹的插件：CanvasFingerprintBlock，其原理是，每次随机往canvas画布里注入一个随机的噪音（人肉眼是看不到的），从而影响base64加密结果。