浏览器指纹识别的 JavaScript 库 - FingerprintJS

FingerprintJS 是一个用于浏览器指纹识别的 JavaScript 库。它通过收集浏览器和设备的各种特征来生成一个唯一的标识符，即“指纹”。这个指纹可以用于识别和跟踪用户，即使他们清除了 cookies 或使用隐私模式浏览。

功能特性

跨浏览器兼容性：支持主流浏览器，包括 Chrome、Firefox、Safari、Edge 等。
高准确性：通过收集多种设备和浏览器特征，生成高度唯一的指纹。
轻量级：库体积小，加载速度快，不影响页面性能。
隐私友好：不依赖于 cookies、localStorage 或其他持久性存储，减少隐私风险。
易于集成：提供简单的 API，易于在现有项目中集成。
跨浏览器兼容性：支持所有主流浏览器，包括 Chrome、Firefox、Safari、Edge 等。
安全：生成的指纹通常是加密的，以减少数据泄露的风险。
自定义：开发者可以根据自己的需求选择性地启用或禁用某些数据收集功能，以符合特定的隐私政策或法律要求。

安装

你可以通过 npm 或直接在 HTML 中引入 CDN 来安装 FingerprintJS。

开源项目地址：https://github.com/fingerprintjs/fingerprintjs

通过 npm 安装

npm install @fingerprintjs/fingerprintjs

通过 CDN 引入

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

使用示例

以下是一个完整的示例，展示了如何使用 FingerprintJS 生成用户指纹并将其显示在页面上。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>FingerprintJS 示例</title>
</head>
<body>
    <h1>您的浏览器指纹是:</h1>
    <p id="fingerprint"></p>

    <script>
        // 引入 FingerprintJS
        (async () => {
            // 初始化 FingerprintJS
            const fp = await FingerprintJS.load();

            // 获取浏览器指纹
            const result = await fp.get();

            // 显示指纹
            document.getElementById('fingerprint').textContent = result.visitorId;

            // 输出详细信息到控制台
            console.log('指纹详细信息:', result);
        })();
    </script>
</body>
</html>

CDN引入普通HTML页面示例：

<script src="https://cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@3.3.2/dist/fp.min.js"></script>
<script>
  async function getFingerprint() {
    const result = await FingerprintJS.load();
    const visitorId = await result.get();
    console.log(visitorId.visitorId); // 打印生成的指纹
  }

  getFingerprint();
</script>

NodeJS项目示例

#npm安装
npm install @fingerprintjs/fingerprintjs

#JavaScript 代码中使用
import FingerprintJS from '@fingerprintjs/fingerprintjs';

async function getFingerprint() {
  const result = await FingerprintJS.load();
  const visitorId = await result.get();
  console.log(visitorId.visitorId); // 打印生成的指纹
}

getFingerprint();

完整示例


# 以下是一个示例，展示了如何将生成的指纹发送到服务器：
import FingerprintJS from '@fingerprintjs/fingerprintjs';

async function getFingerprint() {
  const result = await FingerprintJS.load();
  const visitorId = await result.get();

  // 发送指纹到服务器
  fetch('/api/fingerprint', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ fingerprint: visitorId.visitorId }),
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch((error) => console.error('Error:', error));
}

getFingerprint();

代码注解

引入 FingerprintJS：
```
const fp = await FingerprintJS.load();
```
这行代码初始化 FingerprintJS 库，并返回一个 fp 对象，用于后续操作。
获取浏览器指纹：
```
const result = await fp.get();
```
这行代码调用 get() 方法，生成并返回当前浏览器的指纹。result 对象包含 visitorId 和其他详细信息。
显示指纹：
```
document.getElementById('fingerprint').textContent = result.visitorId;
```
这行代码将生成的指纹（visitorId）显示在页面上。
输出详细信息到控制台：
```
console.log('指纹详细信息:', result);
```
这行代码将指纹的详细信息输出到浏览器的控制台，方便开发者查看和调试。

技术要点

指纹生成原理：FingerprintJS 通过收集多种浏览器和设备特征（如 User-Agent、屏幕分辨率、时区、字体、插件等）来生成指纹。这些特征的组合在大多数情况下是唯一的。
异步操作：由于指纹生成可能涉及一些异步操作（如获取字体列表），因此库的 API 设计为异步的，使用 async/await 或 Promise 来处理。
隐私考虑：虽然 FingerprintJS 不依赖于 cookies 或 localStorage，但开发者在使用时仍需注意隐私问题，确保用户知情并同意被跟踪。