乐趣区

头条如何获取浏览器指纹信息

本文收录于 GitHub 日问: DailyQuestion,内含大厂内推机会、面经大全及若干面试题,每天学习五分钟,一年进入大厂中。

  • 大厂面经大全
  • 大厂内推

因为不同的零碎显卡绘制 canvas 时渲染参数、抗锯齿等算法不同,因而绘制成图片数据的 CRC 校验也不一样。

function getCanvasFp () {const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  ctx.font = '14px Arial'
  ctx.fillStyle = '#ccc'
  ctx.fillText('hello, shanyue', 2, 2)
  return canvas.toDataURL('image/jpeg')
}

因而依据 canvas 能够获取浏览器指纹信息。

  1. 绘制 canvas,获取 base64 的 dataurl
  2. 对 dataurl 这个字符串进行 md5 摘要计算,失去指纹信息

然而对于常见的需要就有成熟的解决方案,若在生产环境应用,能够应用以下库

  • fingerprintjs2

它根据以下信息,获取到浏览器指纹信息

  1. canvas
  2. webgl
  3. UserAgent
  4. AudioContext
  5. 对旧式 API 的反对水平等
requestIdleCallback(function () {Fingerprint2.get((components) => {const values = components.map((component) => component.value)
    const fp = Fingerprint2.x64hash128(values.join(''), 31)
  })
})

简答

依据 canvas 能够获取浏览器指纹信息

  1. 绘制 canvas,获取 base64 的 dataurl
  2. 对 dataurl 这个字符串进行 md5 摘要计算,失去指纹信息

若在生产环境应用,能够应用 fingerprintjs2

更多面试

  • 【字节 - 视频架构组 - 前端】头条架构组招人了内含自测题
  • 【美团】什么是防抖和节流,他们的利用场景有哪些
  • 【美团】如何获取一个过程的内存并监控

关注我

我是山月,正致力于 每天用五分钟可能看完的简短答案答复一个大厂高频面试题,可增加我的微信 shanyue94 进行交换。

欢送关注公众号【互联网大厂招聘】,定时推送大厂内推信息及面试题简答,每天学习五分钟,半年进入大厂中

退出移动版