在前端开发中，如何获取浏览器的唯一标识

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

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 28

Author 回答者: shfshanyue

由于不同的系统显卡绘制 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 可以获取浏览器指纹信息。

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

但是对于常见的需求就有成熟的解决方案，若在生产环境使用，可以使用以下库

• fingerprintjs2

它依据以下信息，获取到浏览器指纹信息，而这些信息，则成为 component

1. canvas
2. webgl
3. UserAgent
4. AudioContext
5. 对新式 API 的支持程度等

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

在 fingerprintjs2 中，对于 component 也有分类

• browser independent component：有些 component 同一设备跨浏览器也可以得到相同的值，有些独立浏览器，得到不同的值
• stable component: 有些 component 刷新后值就会发生变化，称为不稳定组件

在实际业务中，可根据业务选择合适的组件

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

简答

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

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

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

Author 回答者: minza

canvas指纹