canvas指纹追踪

技术场景： 比方在某个网站上浏览到某个商品A，但是并没有登录过账号信息，过两天，使用同台电脑访问其他网站时却发现许多那个商品A的同类商品的广告。

在过去，我们可能使用cookie去追踪用户信息，不过弊端也很明显，cookie可以被用户禁止，从而无法追踪，并且无法跨域访问。
或者就是浏览器指纹(navigator)

userAgent（用户代理)

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:102.0) Gecko/20100101 Firefox/102.0

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

canvas指纹

:::warning canvas可以用来跟踪用户，当我们调用toDataURL转换base64, 它底层会获取设备、操作系统、浏览器、三合一的唯一标识。如果其他用户使用的这三个信息和我们一样的概率是非常低的，但是存在这个可能。 :::

生成canvas指纹

const uuid = () => {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  const txt = 'test'
  ctx.fillText(txt, 10, 10)
  console.log(canvas.toDataURL())
  return md5(canvas.toDataURL()) // md5是一种加密算法
}

在浏览器中打印出来

不同浏览器生成的base64会有差别，但是canvas绘制的图片是同一张。 如果base64过长，可以进行md5压缩或者crypto

如何防止被跟踪

:::success 安装浏览器插件，谷歌应用商店有随机修改canvas指纹的插件（Canvas Fingerprint Defender）。
其原理是：每次随机往canvas画布里面注入一个随机的噪音（人肉眼不可见），从而影响base64加密结果 :::