在前端开发中，有时需要获取浏览器的唯一标识。不同的场景下，这个需求有着重要的意义。本文将探讨如何使用 JavaScript 来获取浏览器的唯一标识以及其背后的原理。
一、本方案获取浏览器唯一标识的原理
由于不同系统的显卡在绘制 canvas 时，渲染参数和抗锯齿等算法存在差异，导致绘制成的图片数据的 CRC 校验也各不相同。基于此，通过 canvas 可以获取浏览器指纹信息。具体步骤如下：
- 绘制 canvas，获取 base64 的 dataurl。首先，通过 JavaScript 获取到 canvas 元素，并使用绘图上下文在 canvas 上绘制特定的内容，如文本“hello, shanyue”。然后，调用
canvas.toDataURL('image/jpeg')方法获取到表示图像的 base64 编码的 dataurl。
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');
- 对 dataurl 这个字符串进行 md5 摘要计算，得到指纹信息。
二、生产环境中的解决方案——fingerprintjs2
对于常见的生产环境需求，有成熟的解决方案，如使用fingerprintjs2库。这个库依据以下信息获取浏览器指纹信息，这些信息被称为 component：
- canvas：与上述原理中的方式类似，通过 canvas 绘制获取信息。
- webgl：利用 WebGL 相关的特性获取信息。
- UserAgent：用户代理字符串，包含了浏览器类型、版本等信息。
- AudioContext：音频上下文，可以获取音频相关的特性信息。
- 对新式 API 的支持程度等。
在fingerprintjs2中，对于 component 也有分类：
- browser independent component：有些 component 在同一设备跨浏览器也可以得到相同的值，有些独立于浏览器得到不同的值。
- stable component：有些 component 在刷新后值就会发生变化，称为不稳定组件。
在实际业务中，可以根据业务需求选择合适的组件。例如，如果需要在单设备上跨浏览器获取相同的标识，可以选择合适的 browser independent component；如果需要稳定的标识，可以选择 stable component。
以下是使用fingerprintjs2的示例代码：
requestIdleCallback(function () {Fingerprint2.get((components) => {const values = components.map((component) => component.value);const fp = Fingerprint2.x64hash128(values.join(''), 31);});
});
const options = {excludes: { userAgent: true, language: true }
};
总之，通过 JavaScript 获取浏览器唯一标识是一个在前端开发中具有一定挑战性但又非常实用的技术。了解其原理和使用成熟的库可以帮助我们更好地满足不同业务场景的需求。