js 获取浏览器指纹

获取浏览器指纹通常需要结合多种信息来唯一标识一个用户的浏览器。常见的方法是使用 JavaScript 获取如下信息：

• 用户的 屏幕分辨率
• 浏览器的 User-Agent
• 语言设置
• 操作系统
• 插件信息
• 字体
• 时区
• Canvas 或 WebGL 信息

由于浏览器指纹需要多个信息的组合，可以使用现有的 JavaScript 库来简化该过程，比如 FingerprintJS。不过，也可以自己编写一些基本代码来获取简单的浏览器信息。

使用 FingerprintJS 库

FingerprintJS 是一个流行的开源 JavaScript 庆指纹库，它通过分析浏览器和设备的各种参数生成唯一标识符。

安装

你可以通过 CDN 直接引入 FingerprintJS 库，也可以通过 npm 安装。

1. 通过 CDN 引入:

   <script src="https://cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@3.3.0/dist/fp.min.js"></script>
   

2. 通过 npm 安装:

   npm install @fingerprintjs/fingerprintjs
   

使用示例 

<script src="https://cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@3.3.0/dist/fp.min.js"></script>
<script>
  FingerprintJS.load().then(fp => {
    fp.get().then(result => {
      console.log(result.visitorId); // 这是浏览器指纹
    });
  });
</script>

在这个示例中，result.visitorId 就是生成的浏览器指纹，包含了多个设备信息来唯一标识浏览器。

自定义获取浏览器指纹

如果你不想使用外部库，可以通过 JavaScript 获取以下信息来组合一个简单的指纹：

function getBrowserFingerprint() {
  const userAgent = navigator.userAgent;
  const language = navigator.language;
  const screenResolution = `${screen.width}x${screen.height}`;
  const timezoneOffset = new Date().getTimezoneOffset();
  const plugins = Array.from(navigator.plugins).map(plugin => plugin.name).join(', ');
  const fonts = getInstalledFonts();  // 可选：通过特殊方法获取字体
  const canvas = getCanvasFingerprint(); // 可选：通过Canvas获取指纹

  return {
    userAgent,
    language,
    screenResolution,
    timezoneOffset,
    plugins,
    fonts,
    canvas
  };
}

// 可选：获取 Canvas 指纹
function getCanvasFingerprint() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.textBaseline = 'top';
  ctx.font = '14px Arial';
  ctx.fillText('Hello, world!', 2, 2);
  return canvas.toDataURL();
}

// 可选：获取已安装字体列表
function getInstalledFonts() {
  const fonts = ['Arial', 'Verdana', 'Times New Roman', 'Courier New', 'Georgia'];
  return fonts.filter(font => document.fonts.check(`12px ${font}`)).join(', ');
}

// 获取浏览器指纹
const fingerprint = getBrowserFingerprint();
console.log(fingerprint);

获取浏览器指纹的常见方法

1. User-Agent：浏览器信息

   navigator.userAgent;

2. 屏幕分辨率：获取设备屏幕分辨率

   screen.width + 'x' + screen.height;

3. 语言设置：获取用户的语言设置

   navigator.language;

4. 时区偏移：获取时区信息

   new Date().getTimezoneOffset();

5. Canvas 指纹：通过绘制文本到 <canvas> 元素中获取唯一值

   function getCanvasFingerprint() {
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
     ctx.textBaseline = 'top';
     ctx.font = '14px Arial';
     ctx.fillText('Hello, world!', 2, 2);
     return canvas.toDataURL();
   }
   

6. 字体信息：通过检测已安装的字体来生成指纹（比较复杂，通常需要额外的库来实现）。

注意事项

• 隐私和合法性：请注意，获取浏览器指纹时需要考虑用户隐私。某些国家和地区对收集此类信息有严格的法律要求，如 GDPR 等。确保用户知情并同意这种数据收集。

• 指纹唯一性：浏览器指纹可以作为一种识别手段，但不是绝对的，因为用户可以通过更改浏览器设置或使用隐私工具（如 VPN、代理服务器等）来改变它。

• 浏览器特性变化：浏览器或操作系统更新可能会影响某些指纹信息，因此指纹可能会随着时间而改变。

总结

• 使用 FingerprintJS 库是最简便和可靠的方法来生成浏览器指纹。
• 如果不依赖第三方库，可以通过获取浏览器的基本信息、Canvas 和字体等方式生成自定义指纹。