UV监控，canvas指纹追踪技术详解

• 什么是埋点

  • 埋点可以理解为，采集用户数据，通过处理数据，分析和挖掘，判断用户喜好，如哪个页面停留时间比较长，哪个东西浏览的比较多。

• 什么是UV监控

  • 其实就是网站的访问记录，其中包括PV，UV
    • PV，PageView，页面总访问量，用户每一次访问网站都会被记录
    • UV，Unique Visitor,页面访问量，一台客户端只能算作一个访客。

• UV监控的方法

  • 用户登录之后，后台返回为一个userId，根据userId判断是否是一个用户
    • 缺点：用户不登录就无法监控
  • 使用cookie追踪用户行为
    • 缺点：用户可以禁用cookie，且无法跨域访问。
  • 使用navigator
    • 缺点：标识不唯一，无法判断是否同一客户端
  • canvas指纹追踪
    • 缺点：可以通过插件修改指纹，但是比上述方法都要强悍

• navigator指纹

  • navigator能够提供很多指纹，如用户代理userAgent，操作系统platform等，但是，这些都比较普遍，无法判断唯一性。

• canvas指纹
  • 实用性
    • 当浏览一些网站的时候，比如某商城，在没有登录的情况下，经常性的去浏览一些商品，当下次再进入的时候，就生成了一些个性化推荐。
  • toDataURL方法生成canvas指纹
    • 这是canvas的一种方法，可以将canvas对象转换为base64编码
    • 当我们使用canvas生成画布图像的时候，不同浏览器使用不同图片处理引擎，不同的压缩级别。不同的操作系统也会使用不同的设置和算法进行抗锯齿和子像素渲染，也就会导致生成的图片不同（肉眼不可见），生成的base64编码是完全不同的，那么，如果要生成唯一的指纹，必须两个用户的操作系统，设备信息，以及浏览器信息完全一致。对比于navigator指纹，重复概率可以说是极低。
  • 案例
    • 谷歌浏览器,Edge,Firefox

 

 

• 生成canvas指纹

const fingerprint  = ()=>{
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const contentTxt = 'canvasFingerprint';
    ctx.fillText(contentTxt, 50, 50)
    return canvas.toDataURL()
}
fingerprint()

• 如何防止canvas指纹追踪

  • 使用浏览器插件如火狐浏览器的增强跟踪保护插件，谷歌浏览器的CanvasFingerprintBlock

  • 禁止网页使用js（可能会丢失一些功能）