浏览器获取设备唯一标识_【实战】前端获取浏览器唯一标识

点击 上方蓝字 关注我们

阅读本文大概需要3分钟。

最近老陈在自己倒腾一些东西，然后其中就用到了一些跟踪技术，以前获取一些用户路径跟踪主要靠的是cookie标识，但是这一种的话并不能解决很大程度上，前端浏览器唯一标识的问题，有这个唯一标识我们就能够针对使用手机或者pc端上特定的浏览器给他建立一个身份，并且根据这个身份记录一些他的习惯。 1.通过canvas来绘制指纹信息 由于不同的系统显卡在绘制canvas时渲染的各个参数不同，所以绘制出来的图片的数据的crc校验是不一样的，所以我们可以根据这个来生成浏览器的指纹信息。

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

解读一下代码，获取base64的dataurl,对这个dataurl进行md5计算就可以了。 2.使用成熟的第三方库fingerprintjs2 主要他会根据以下几种来获取浏览器指纹信息。 canvas、webgl、UserAgent、AudioContext、对新式API的支持等。

requestIdleCallback(function () {  Fingerprint2.get((components) => {    const values = components.map((component) => component.value)    const fp = Fingerprint2.x64hash128(values.join(''), 31)  })})

components也有一些分类，里面有一些components是稳定的，有一些是不稳定的，所以要根据自己对于业务的理解生成属于自己的唯一标识。

   扫描关注

老陈说前端

想象不到的干货