function getUA() {
  return navigator.userAgent;
}
// 示例输出:
// "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 ...

function getScreenInfo() {
  return {
    width: screen.width,
    height: screen.height,
    availWidth: screen.availWidth,
    availHeight: screen.availHeight,
    colorDepth: screen.colorDepth,
    pixelRatio: window.devicePixelRatio
  };
}

function getTimezone() {
  return Intl.DateTimeFormat().resolvedOptions().timeZone;
  // "Asia/Shanghai"
}

function getLanguages() {
  return {
    language: navigator.language,           // "zh-CN"
    languages: navigator.languages,         // ["zh-CN", "en-US"]
  };
}

async function getFontList() {
  await document.fonts.ready;
  const fontSet = document.fonts;
  const fonts = [];
  fontSet.forEach(f => fonts.push(f.family));
  return fonts;
}

function getCanvasFingerprint() {
  const canvas = document.createElement('canvas');
  canvas.width = 256;
  canvas.height = 128;
  const ctx = canvas.getContext('2d');

  // 绘制背景
  ctx.fillStyle = '#f8f8f8';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 绘制文本（字体渲染差异是关键）
  ctx.fillStyle = '#1a1a1a';
  ctx.font = '18px Arial';
  ctx.fillText('BrowserFingerprint', 10, 40);
  ctx.font = '14px sans-serif';
  ctx.fillText('Hello, 你好, こんにちは', 10, 70);

  // 绘制图形
  ctx.strokeStyle = '#4a90d9';
  ctx.beginPath();
  ctx.arc(200, 60, 30, 0, Math.PI * 2);
  ctx.stroke();

  ctx.fillStyle = '#e74c3c';
  ctx.beginPath();
  ctx.arc(200, 60, 15, 0, Math.PI * 2);
  ctx.fill();

  // 获取像素数据
  const dataUrl = canvas.toDataURL();

  // 计算哈希
  return hashString(dataUrl);
}

// 简单的哈希函数
function hashString(str) {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    const char = str.charCodeAt(i);
    hash = ((hash << 5) - hash) + char;
    hash |= 0;
  }
  return hash >>> 0; // 转为无符号整数
}

function getWebGLFingerprint() {
  const canvas = document.createElement('canvas');
  const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  if (!gl) return null;

  return {
    vendor: gl.getParameter(gl.VENDOR),                     // "Google Inc."
    renderer: gl.getParameter(gl.RENDERER),                 // "ANGLE (AMD, ...)"
    version: gl.getParameter(gl.VERSION),                   // "WebGL 2.0"
    shadingLanguageVersion: gl.getParameter(gl.SHADING_LANGUAGE_VERSION),
    extensions: gl.getSupportedExtensions(),
    // 还可以渲染 3D 场景提取像素数据
  };
}

function getAudioFingerprint() {
  return new Promise(resolve => {
    const audioCtx = new (window.OfflineAudioContext || window.webkitOfflineAudioContext)(1, 44100, 44100);
    const oscillator = audioCtx.createOscillator();
    const compressor = audioCtx.createDynamicsCompressor();

    oscillator.type = 'sawtooth';
    oscillator.frequency.setValueAtTime(1000, 0);

    // 配置压缩器参数
    compressor.threshold.setValueAtTime(-50, 0);
    compressor.knee.setValueAtTime(40, 0);
    compressor.ratio.setValueAtTime(12, 0);
    compressor.attack.setValueAtTime(0, 0);
    compressor.release.setValueAtTime(0.25, 0);

    oscillator.connect(compressor);
    compressor.connect(audioCtx.destination);

    oscillator.start(0);
    oscillator.stop(1);

    audioCtx.oncomplete = function(event) {
      const buffer = event.renderedBuffer;
      const data = buffer.getChannelData(0);
      let hash = 0;
      // 对前 1000 个采样点取哈希
      for (let i = 0; i < 1000; i++) {
        hash = ((hash << 5) - hash) + (data[i] * 10000 | 0);
        hash |= 0;
      }
      resolve(hash >>> 0);
    };

    audioCtx.startRendering();
  });
}

用户访问页面
    │
    ▼
采集 40+ 个特征信号
    │
    ├── 浏览器层：UA、语言、平台、插件列表、DoNotTrack ...
    ├── 渲染层：Canvas、WebGL、AudioContext
    ├── 设备层：屏幕、CPU核心数、内存、电池状态
    ├── 存储层：Cookie 可用性、IndexedDB、LocalStorage
    └── 网络层：IP、时间偏移、地理位置（推算）
    │
    ▼
信号标准化（不同浏览器返回格式不同，需归一化）
    │
    ▼
信号加权 → 熵值计算 → 哈希 → 生成 visitorId

// 通过 CDN 引入
// 

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

  console.log('Visitor ID:', result.visitorId);
  console.log('Confidence:', result.confidence);    // 置信度 (0~1)
  console.log('Components:', result.components);    // 所有特征信号
}

getFingerprint();

  
  
  


  
🔍 浏览器指纹采集
  采集指纹
  
点击按钮查看结果...

  

用户请求 → 采集指纹 → 与已知指纹库对比
                              │
                    ┌─────────┴──────────┐
                    ▼                    ▼
             命中已知爬虫指纹       未命中 → 进入风控规则引擎
                                          │
                                    ┌─────┴─────┐
                                    ▼           ▼
                              正常访问     触发验证码或拦截

H(X) = -Σ p(x) · log₂ p(x)

P(k, N) ≈ 1 - exp(-k² / 2N)