前端面试：怎样获取浏览器指纹信息？

1条回答我要回复

娟子1173天前

如何回答面试官提出的：怎样获取浏览器指纹信息？
 
简单的回答：
根据 canvas 可以获取浏览器指纹信息
绘制 canvas，获取 base64 的 dataurl 对 dataurl 这个字符串进行 md5 摘要计算，得到指纹信息
若在生产环境使用，可以使用 fingerprintjs2
 
原理分析：
由于不同的系统显卡绘制 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 可以获取浏览器指纹信息。
绘制 canvas，获取 base64 的 dataurl 对 dataurl 这个字符串进行 md5 摘要计算，得到指纹信息
但是对于常见的需求就有成熟的解决方案，若在生产环境使用，可以使用以下库
它依据以下信息，获取到浏览器指纹信息
canvas webgl UserAgent AudioContext 对新式 API 的支持程度等
requestIdleCallback(function () {
Fingerprint2.get((components) => {
const values = components.map((component) => component.value)
const fp = Fingerprint2.x64hash128(values.join(''), 31)
})
})