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

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

功能特性

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

fingerprintjs.png

安装

你可以通过 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();

代码注解

  1. 引入 FingerprintJS

    const fp = await FingerprintJS.load();

    这行代码初始化 FingerprintJS 库,并返回一个 fp 对象,用于后续操作。

  2. 获取浏览器指纹

    const result = await fp.get();

    这行代码调用 get() 方法,生成并返回当前浏览器的指纹。result 对象包含 visitorId 和其他详细信息。

  3. 显示指纹

    document.getElementById('fingerprint').textContent = result.visitorId;

    这行代码将生成的指纹(visitorId)显示在页面上。

  4. 输出详细信息到控制台

    console.log('指纹详细信息:', result);

    这行代码将指纹的详细信息输出到浏览器的控制台,方便开发者查看和调试。

技术要点

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

标签: Javascript

相关文章

在JavaScript或Vue中屏蔽所有报错信息

在 JavaScript 或 Vue 中,如果你想屏蔽所有 JavaScript 报错,可以通过捕获全局的错误事件来实现。需要注意的是,尽量避免屏蔽所有错误,因为这可能会掩盖一些实际问题,影响调...

浏览器的开发工具中有个jsContext是什么

什么是 jsContext?在JavaScript中,jsContext 并不是一个官方的术语或概念。通常情况下,开发者可能会提到 context 这个词,它通常指的是执行上下文(Executi...

在HTML中为 h1-h6 标签添加序号及颜色背景色块

在HTML结构中,h1 到 h6 是常见的标题标签,通常我们会希望对这些标题进行标注或编号,使其更具层次感。在这篇文章中,我将向您展示如何通过纯JavaScript自动为 h1 到 h6 标签添...

VUE倒计时组件

常用于发送短信、邮件后1分钟倒计时,倒计时结束后又可以再次点击vue组件封装:<template> <div class="timer-btn">...

图片Base64编码

CSR生成

图片无损放大

图片占位符

Excel拆分文件