极客时间对于推广渠道会有返利优惠,比如山月在极客时间买了一门课,再把课程分享给好友购买,这时极客时间会向山月返利20元左右。
而我现在做了一个返利平台,你可以在上边通过山月的链接购买课程,此时极客时间会向我返利。为了共同学习,而你可以添加我的微信 (shanyue94),我将把极客时间给我的返利发一个红包全部返给你

# 在前端开发中,如何获取浏览器的唯一标识

更多描述

如何获取浏览器的唯一标识,原理是什么

Issue

欢迎在 Issue 中交流与讨论: Issue 28 (opens new window)

由于不同的系统显卡绘制 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 摘要计算,得到指纹信息

但是对于常见的需求就有成熟的解决方案,若在生产环境使用,可以使用以下库

它依据以下信息,获取到浏览器指纹信息,而这些信息,则成为 component

  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)
  })
})

fingerprintjs2 中,对于 component 也有分类

在实际业务中,可根据业务选择合适的组件

const options = {
  excludes: {userAgent: true, language: true}
}

# 简答

根据 canvas 可以获取浏览器指纹信息

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

若在生产环境使用,可以使用 fingerprintjs2 (opens new window),根据业务需求,如单设备是否可跨浏览器,以此选择合适的 component

关于山月

我的项目:
我的微信:shanyue94,欢迎交流
Last Updated: 5/29/2021, 8:12:31 AM