浏览器指纹和个人信息

浏览器指纹的目的

用于跟踪用户浏览器精准推送广告

大致种类

指纹

用JS创建一个canvas画布，然后在画布上面画几个图形，正方形，圆形等，然后写几个字。然后把这个canvas 转base64，最后生成base64编码的hash值，这个hash值就是canvas指纹。

const createFingerprint = () => {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  if (ctx) {
    ctx.font = '24px Arial'
    ctx.fillText('fingerprint', 22, 33)
    ctx.moveTo(0, 0)
    ctx.lineTo(100, 100)
    ctx.stroke()
    const B64 = canvas.toDataURL().replace('data:image/png;base64,', '')
    return hex_md5(B64)
  }
}

export default createFingerprint

获取GPU信息

因为客户不可能随时更换显卡，也算一个唯一值

(function () {
    var canvas = document.createElement('canvas'),
        gl = canvas.getContext('experimental-webgl'),
        debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
 
    console.log(gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL));
})();

获取电池信息(网站需https)

navigator.getBattery().then(function (battery) {
  console.log(battery)
})

navigator.getBattery().then(function (battery) {
  // 添加事件，当设备电量改变时触发
  battery.addEventListener('levelchange', function () {
    console.log('电量改变: ' + battery.level)
  })

  // 添加事件，当设备充电状态改变时触发
  battery.addEventListener('chargingchange', function () {
    console.log('充电状态改变: ' + battery.charging)
  })

  // 添加事件，当设备完全充电需要时间改变时触发
  battery.addEventListener('chargingtimechange', function () {
    console.log('完全充电需要时间: ' + battery.chargingTime)
  })

  // 添加事件，当设备完全放电需要时间改变时触发
  battery.addEventListener('dischargingtimechange', function () {
    console.log('完全放电需要时间: ' + battery.dischargingTime)
  })
})

其他

屏幕信息：屏幕尺寸
UA信息：操作系统版本、浏览器版本等

参考信息

Fingerprintjs2 test
https://webkay.robinlinus.com/