nodejs28: 浏览器指纹工具FingerprintJS+实现原理

FingerprintJS

• FingerprintJS 是一种浏览器指纹识别工具，可以用来生成设备的唯一标识符。利用浏览器和设备的一系列非敏感数据（如屏幕分辨率、字体、WebGL 信息等）来创建一个高度唯一的指纹，用于追踪和识别用户。通过这种方式，可以实现跨会话、跨设备的用户识别，而不依赖传统的 cookie 方式，尤其适用于防止用户伪装身份或阻止追踪。如果需要更强大的功能（如设备识别的准确性提高或更多分析功能），可以使用 FingerprintJS 的 Pro 版本。

• 开源部分地址：https://github.com/fingerprintjs/fingerprintjs

FingerprintJS 示例代码

• 首先，需要安装 FingerprintJS 的 NPM 包：

npm install @fingerprintjs/fingerprintjs

• FingerprintJS 使用异步加载，因此需要先创建一个实例，然后调用其方法生成指纹。在 React 应用中，可以在组件挂载时生成指纹并存储：

import React, { useEffect, useState } from "react";
import FingerprintJS from "@fingerprintjs/fingerprintjs";

const App = () => {
  const [fingerprint, setFingerprint] = useState("");

  useEffect(() => {
    // 创建 FingerprintJS 加载器实例
    const loadFingerprint = async () => {
      const fp = await FingerprintJS.load(); // 加载库
      const result = await fp.get();        // 获取指纹数据
      setFingerprint(result.visitorId);     // 保存指纹 ID
    };

    loadFingerprint();
  }, []);

  return (
    <div>
      <h1>Device Fingerprint</h1>
      <p>Your fingerprint is: <strong>{fingerprint}</strong></p>
    </div>
  );
};

export default App;

• 实现效果：
  

FingerprintJS 实现原理

• FingerprintJS 是一个基于浏览器指纹（browser fingerprinting）的技术，用于唯一地标识用户。它通过收集浏览器和设备的多种信息，通过哈希处理生成一个唯一标识符。

信息收集（数据采集）

• FingerprintJS 通过收集多种浏览器和设备的属性 sources 来生成指纹。 这些属性包括但不限于：
  • User-Agent：浏览器类型、版本、操作系统等。
  • 屏幕分辨率：用户设备的屏幕分辨率（宽×高）。
  • 浏览器插件：已安装的浏览器插件（例如 Adobe Flash、Java、PDF 阅读器等）。
  • 语言设置：浏览器设置的语言。
  • 时区信息：浏览器的时区。
  • 字体：用户设备上安装的字体。
  • WebGL 渲染信息：通过 WebGL 获取的 GPU 和硬件信息。
  • Canvas 指纹：通过绘制一个不可见的图形（例如通过 Canvas API），不同设备的渲染特性会有所不同，这可以用来生成一个独特的指纹。
  • AudioContext：不同设备和浏览器对音频上下文的处理有所不同，可以用来区分设备。
  • HTTP 请求头信息：例如，接受的编码类型、语言、缓存控制等。
  • LocalStorage 和 SessionStorage：这些存储机制中的数据可能包含一些独特的信息，供指纹生成使用。
  • Cookies：可能利用 cookies 中的历史信息来补充识别。

// https://github1s.com/fingerprintjs/fingerprintjs/blob/master/src/sources/index.ts#L51-L102
export const sources = {
   
   
  // READ FIRST:
  // See https://github.com/fingerprintjs/fingerprintjs/blob/master/contributing.md#how-to-add-an-entropy-source
  // to learn how entropy source works and how to make your own.

  // The sources run in this exact order.
  // The asynchronous sources are at the start to run in parallel with other sources.
  fonts: getFonts,
  domBlockers: getDomBlockers,
  fontPreferences: getFontPreferences,
  audio: getAudioFingerprint,
  screenFrame: getScreenFrame,

  canvas: getCanvasFingerprint,
  osCpu: getOsCpu,
  languages: getLanguages,
  colorDepth: getColorDepth,
  deviceMemory: getDeviceMemory