获取浏览器的唯一标识

2021-10-07 10:50:45 大约 1 分钟

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

由于不同的系统，显卡绘制 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')
}

1
2
3
4
5
6
7
8

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

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

但是对于常见的需求就有成熟的解决方案，若在生产环境使用，可以使用库fingerprintjs2 它依据以下信息，获取到浏览器指纹信息，而这些信息，则成为 component

canvas
webgl
UserAgent
AudioContext
对新式 API 的支持程度等

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

1
2
3
4
5
6

在 ængerprintjs2中，对于 component也有分类

browser independent component：有些 component同一设备跨浏览器也可以得到相同的值，有些独立浏览器，得到不同的值
stable component：有些 component刷新后值就会发生变化，称为不稳定组件在实际业务中，可根据业务选择合适的组件

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

1
2
3

# 简答

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

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

若在生产环境使用，可以使用 ængerprintjs2，根据业务需求，如单设备是否可跨浏览器，以此选择合适的 component

获取浏览器的唯一标识

# 简答

详情