浏览器指纹进阶：Canvas与WebGL指纹分析

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

  // 1. 绘制背景渐变——不同 GPU 对渐变的插值算法有差异
  const gradient = ctx.createLinearGradient(0, 0, 400, 200);
  gradient.addColorStop(0, '#ff0000');
  gradient.addColorStop(0.5, '#00ff00');
  gradient.addColorStop(1, '#0000ff');
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 400, 200);

  // 2. 绘制文本——字体渲染差异最大
  ctx.font = 'bold 28px "Arial"';
  ctx.fillStyle = '#ffffff';
  ctx.fillText('Browser Fingerprint', 30, 50);

  ctx.font = '18px "Times New Roman"';
  ctx.fillStyle = '#ffff00';
  ctx.fillText('Canvas: 4A7F...', 30, 100);

  // 3. 绘制形状——抗锯齿差异
  ctx.beginPath();
  ctx.arc(320, 140, 40, 0, Math.PI * 2);
  ctx.strokeStyle = '#ffffff';
  ctx.lineWidth = 4;
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(320, 140, 30, 0, Math.PI * 1.5);
  ctx.fillStyle = 'rgba(255,255,0,0.5)';
  ctx.fill();

  // 4. 绘制线条和贝塞尔曲线
  ctx.beginPath();
  ctx.moveTo(30, 160);
  ctx.lineTo(150, 180);
  ctx.quadraticCurveTo(200, 120, 280, 170);
  ctx.strokeStyle = '#00ffff';
  ctx.lineWidth = 3;
  ctx.stroke();

  // 转为 DataURL 并计算哈希
  const dataURL = canvas.toDataURL('image/png');
  return simpleHash(dataURL);
}

async function sha256Hash(data) {
  const encoder = new TextEncoder();
  const dataBuffer = encoder.encode(data);
  const hashBuffer = await crypto.subtle.digest('SHA-256', dataBuffer);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
}

function simpleHash(str) {
  let hash = 5381;
  for (let i = 0; i < str.length; i++) {
    hash = ((hash << 5) + hash) + str.charCodeAt(i);
    hash = hash & hash; // 转换为32位整数
  }
  return '00000' + (hash >>> 0).toString(16);
}

function getWebGLInfo() {
  const canvas = document.createElement('canvas');
  const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

  if (!gl) {
    return { supported: false };
  }

  const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');

  return {
    supported: true,
    vendor: gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL),
    renderer: gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL),
    version: gl.getParameter(gl.VERSION),
    shadingLanguageVersion: gl.getParameter(gl.SHADING_LANGUAGE_VERSION),
    vendorUnmasked: gl.getParameter(gl.VENDOR),
    rendererUnmasked: gl.getParameter(gl.RENDERER),
    maxTextureSize: gl.getParameter(gl.MAX_TEXTURE_SIZE),
    maxVertexAttribs: gl.getParameter(gl.MAX_VERTEX_ATTRIBS),
    extensions: gl.getSupportedExtensions(),
  };
}

{
  "vendor": "Google Inc. (Intel)",
  "renderer": "ANGLE (Intel, Intel(R) UHD Graphics 620 (0x00005917) Direct3D11 vs_5_0 ps_5_0)",
  "version": "WebGL 1.0 (OpenGL ES 2.0 Chromium)",
  "maxTextureSize": 16384
}

function getWebGLRenderFingerprint() {
  const canvas = document.createElement('canvas');
  canvas.width = 256;
  canvas.height = 256;
  const gl = canvas.getContext('webgl');

  if (!gl) return null;

  // 顶点着色器：简单的 2D 三角形
  const vsSource = `
    attribute vec4 aVertexPos;
    void main(void) {
      gl_Position = aVertexPos;
    }
  `;

  // 片段着色器：包含特定运算，不同 GPU 浮点精度不同
  const fsSource = `
    precision highp float;
    void main(void) {
      float r = sin(3.14159 * 0.3);
      float g = cos(2.71828 * 0.7);
      float b = tan(1.41421 * 0.5);
      float a = mod(3.14159, 1.61803);
      gl_FragColor = vec4(r, g, b, a);
    }
  `;

  function compileShader(source, type) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    return shader;
  }

  const vertexShader = compileShader(vsSource, gl.VERTEX_SHADER);
  const fragmentShader = compileShader(fsSource, gl.FRAGMENT_SHADER);

  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  gl.useProgram(program);

  // 顶点数据：一个覆盖全屏的三角形
  const vertices = new Float32Array([
    -1.0, -1.0,
     1.0, -1.0,
    -1.0,  1.0,
  ]);
  const buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

  const posAttr = gl.getAttribLocation(program, 'aVertexPos');
  gl.vertexAttribPointer(posAttr, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(posAttr);

  gl.viewport(0, 0, 256, 256);
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES, 0, 3);

  const pixels = new Uint8Array(256 * 256 * 4);
  gl.readPixels(0, 0, 256, 256, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

  return sha256Hash(Array.from(pixels).join(','));
}

// 将扩展列表排序后哈希，避免顺序随机性
const extensions = gl.getSupportedExtensions().sort();
const extFingerprint = await sha256Hash(extensions.join(','));

function getAudioFingerprint() {
  return new Promise((resolve) => {
    try {
      const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      const analyser = audioCtx.createAnalyser();
      const oscillator = audioCtx.createOscillator();
      const gainNode = audioCtx.createGain();

      oscillator.type = 'triangle';
      oscillator.frequency.setValueAtTime(10000, audioCtx.currentTime);

      gainNode.gain.setValueAtTime(0.5, audioCtx.currentTime);

      oscillator.connect(gainNode);
      gainNode.connect(analyser);
      analyser.connect(audioCtx.destination);

      oscillator.start(0);

      const samples = new Float32Array(analyser.frequencyBinCount);
      analyser.getFloatFrequencyData(samples);

      oscillator.stop(0);
      audioCtx.close();

      // 将采样数据哈希
      const sampleStr = Array.from(samples.slice(0, 100)).join(',');
      resolve(sha256Hash(sampleStr));
    } catch (e) {
      resolve(null); // 不支持时返回 null
    }
  });
}

function getClientRectsFingerprint() {
  const container = document.createElement('div');
  container.style.cssText = 'position:absolute;left:-9999px;top:-9999px;';
  container.innerHTML = `
    
      The quick brown fox jumps over the lazy dog. 1234567890
    
    
      浏览器指纹 ClientRects 测试
    
  `;
  document.body.appendChild(container);

  const spans = container.querySelectorAll('span');
  const rects = [];

  spans.forEach(span => {
    const clientRects = span.getClientRects();
    for (let i = 0; i < clientRects.length; i++) {
      const rect = clientRects[i];
      rects.push(`${rect.top},${rect.left},${rect.width},${rect.height}`);
    }
  });

  document.body.removeChild(container);
  return sha256Hash(rects.join('|'));
}

function getCSSFeatureFingerprint() {
  const features = [];
  const tests = {
    'backdrop-filter': CSS.supports('backdrop-filter', 'blur(10px)'),
    'container-queries': CSS.supports('container-type', 'inline-size'),
    'has-selector': CSS.supports('selector(:has(div))'),
    'subgrid': CSS.supports('grid-template-columns', 'subgrid'),
    'scroll-timeline': CSS.supports('scroll-timeline-name', '--test'),
    'layer': CSS.supports('@layer', ''),
    'color-gamut-p3': window.matchMedia('(color-gamut: p3)').matches,
    'prefers-reduced-motion': window.matchMedia('(prefers-reduced-motion: reduce)').matches,
    'prefers-color-scheme': window.matchMedia('(prefers-color-scheme: dark)').matches,
  };

  for (const [key, value] of Object.entries(tests)) {
    features.push(`${key}:${value}`);
  }
  return sha256Hash(features.join(','));
}

const WEIGHTS = {
  canvas: 0.25,
  webgl_renderer: 0.20,
  webgl_render: 0.15,
  audio: 0.10,
  client_rects: 0.10,
  css_features: 0.05,
  fonts: 0.10,   // 系统字体列表（篇幅限制，本文未展开）
  timezone: 0.05,
};

function computeSimilarity(storedFingerprint, currentFingerprint) {
  let score = 0;
  for (const [dim, weight] of Object.entries(WEIGHTS)) {
    if (storedFingerprint[dim] === currentFingerprint[dim]) {
      score += weight;
    }
  }
  return score; // 0~1 之间，越接近1越可能是同一设备
}

class AdvancedFingerprint {
  constructor() {
    this.fingerprint = {};
  }

  async collect() {
    const results = await Promise.allSettled([
      this.collectCanvas().then(r => this.fingerprint.canvas = r),
      this.collectWebGLInfo().then(r => this.fingerprint.webgl = r),
      this.collectWebGLRender().then(r => this.fingerprint.webglRender = r),
      this.collectAudio().then(r => this.fingerprint.audio = r),
      this.collectClientRects().then(r => this.fingerprint.clientRects = r),
      this.collectCSSFeatures().then(r => this.fingerprint.css = r),
    ]);

    // 记录失败的维度
    results.forEach((r, i) => {
      if (r.status === 'rejected') {
        console.warn(`Fingerprint dimension ${i} failed:`, r.reason);
      }
    });

    this.fingerprint.composite = await this.computeCompositeHash();
    this.fingerprint.timestamp = Date.now();
    this.fingerprint.userAgent = navigator.userAgent;

    return this.fingerprint;
  }

  async collectCanvas() {
    const canvas = document.createElement('canvas');
    canvas.width = 400;
    canvas.height = 200;
    const ctx = canvas.getContext('2d');

    const gradient = ctx.createLinearGradient(0, 0, 400, 200);
    gradient.addColorStop(0, '#f00');
    gradient.addColorStop(0.5, '#0f0');
    gradient.addColorStop(1, '#00f');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 400, 200);

    ctx.font = 'bold 28px "Arial"';
    ctx.fillStyle = '#fff';
    ctx.fillText('Browser Fingerprint', 30, 50);

    ctx.font = '18px "Times New Roman"';
    ctx.fillStyle = '#ff0';
    ctx.fillText('Canvas Fingerprint Test v2', 30, 100);

    ctx.beginPath();
    ctx.arc(320, 140, 40, 0, Math.PI * 2);
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 4;
    ctx.stroke();

    return sha256Hash(canvas.toDataURL('image/png'));
  }

  async collectWebGLInfo() {
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl');
    if (!gl) return { supported: false };

    const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
    const info = {
      supported: true,
      vendor: gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL),
      renderer: gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL),
      version: gl.getParameter(gl.VERSION),
      shadingLanguageVersion: gl.getParameter(gl.SHADING_LANGUAGE_VERSION),
    };

    // 同时也对扩展列表做哈希
    const exts = gl.getSupportedExtensions().sort();
    info.extHash = await sha256Hash(exts.join(','));

    return info;
  }

  async collectWebGLRender() {
    const canvas = document.createElement('canvas');
    canvas.width = 128;
    canvas.height = 128;
    const gl = canvas.getContext('webgl');
    if (!gl) return null;

    try {
      // 简化的着色器渲染
      const vs = gl.createShader(gl.VERTEX_SHADER);
      gl.shaderSource(vs, `
        attribute vec2 p;
        void main(){ gl_Position=vec4(p,0,1); }
      `);
      gl.compileShader(vs);

      const fs = gl.createShader(gl.FRAGMENT_SHADER);
      gl.shaderSource(fs, `
        precision highp float;
        void main(){
          float r = sin(1.0); float g = cos(2.0); float b = tan(0.5);
          gl_FragColor = vec4(r,g,b,1);
        }
      `);
      gl.compileShader(fs);

      const prog = gl.createProgram();
      gl.attachShader(prog, vs);
      gl.attachShader(prog, fs);
      gl.linkProgram(prog);
      gl.useProgram(prog);

      const buf = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, buf);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1]), gl.STATIC_DRAW);
      const attr = gl.getAttribLocation(prog, 'p');
      gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(attr);

      gl.viewport(0, 0, 128, 128);
      gl.clearColor(0,0,0,1);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.TRIANGLES, 0, 3);

      const pixels = new Uint8Array(128*128*4);
      gl.readPixels(0, 0, 128, 128, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
      return sha256Hash(Array.from(pixels).join(','));
    } catch (e) {
      return null;
    }
  }

  async collectAudio() {
    return getAudioFingerprint();
  }

  async collectClientRects() {
    return getClientRectsFingerprint();
  }

  async collectCSSFeatures() {
    return getCSSFeatureFingerprint();
  }

  async computeCompositeHash() {
    // 将各维度的哈希值拼接后再次哈希
    const parts = [
      this.fingerprint.canvas || '',
      this.fingerprint.webgl?.renderer || '',
      this.fingerprint.webglRender || '',
      this.fingerprint.audio || '',
    ].filter(Boolean);
    return sha256Hash(parts.join('::'));
  }
}

// ===== 使用方式 =====
(async () => {
  const fp = new AdvancedFingerprint();
  const result = await fp.collect();
  console.log('设备指纹:', result);
  // 可将 result 发送到服务器进行持久化识别
})();

async function stabilityTest() {
  const fp = new AdvancedFingerprint();
  const snapshots = [];

  // 立即采集一次
  snapshots.push(await fp.collect());

  // 每 5 秒采集一次，共 6 次（30秒）
  for (let i = 1; i < 6; i++) {
    await new Promise(r => setTimeout(r, 5000));
    snapshots.push(await fp.collect());
  }

  // 逐维对比
  const dims = ['canvas', 'webglRender', 'audio', 'clientRects', 'css'];
  for (const dim of dims) {
    const values = snapshots.map(s => s[dim]);
    const unique = new Set(values.filter(v => v != null));
    console.log(`【${dim}】采集 ${values.length} 次，唯一值 ${unique.size} 个`);
  }

  // 综合哈希对比
  const compositeHashes = snapshots.map(s => s.composite);
  const uniqueHashes = new Set(compositeHashes);
  console.log(`综合指纹稳定性: ${uniqueHashes.size === 1 ? '✅ 稳定' : '⚠️ 不稳定'} (${uniqueHashes.size}/${compositeHashes.length})`);
}

// 用户可自愿重置指纹标识
function resetFingerprintId() {
  localStorage.removeItem('_fp_device_id');
  localStorage.removeItem('_fp_hash');
  sessionStorage.clear();
}