点击 上方蓝字 关注我们
阅读本文大概需要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是稳定的,有一些是不稳定的,所以要根据自己对于业务的理解生成属于自己的唯一标识。
扫描关注
老陈说前端
想象不到的干货