跨浏览器设备指纹

主流的设备指纹生成方式有利用canvas或者webGL，音频指纹可以用于补充

function getCanvasFingerprint() {
  const canvas = document.getElementById('fingerprintCanvas');
  const ctx = canvas.getContext('2d');

  // 进行一些绘制
  ctx.textBaseline = "top";
  ctx.font = "16px 'Arial'";
  ctx.fillText("Hello, World!", 2, 2);

  // 绘制一些图形
  ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
  ctx.fillRect(0, 0, 100, 100);
  ctx.fillStyle = "rgba(0, 255, 0, 0.5)";
  ctx.fillRect(100, 100, 100, 100);

  // 获取图像数据
  const dataURL = canvas.toDataURL();
  return hex_md5(dataURL);
}

function getWebGLFingerprint() {
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');
const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
const renderer = debugInfo ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) : '';
const vendor = debugInfo ? gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) : '';

// 获取其他特征
const version = gl.getParameter(gl.VERSION);
const shadingLanguageVersion = gl.getParameter(gl.SHADING_LANGUAGE_VERSION);
const extensions = gl.getSupportedExtensions();

const str = `${vendor}||${renderer}||${version}||${shadingLanguageVersion}`;
return hex_md5(str);
console.log(extensions)
}

async function generateAudioFingerprint() {
  // 创建音频上下文
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  
  // 创建一个音频振荡器
  const oscillator = audioContext.createOscillator();
  oscillator.type = 'sine'; // 可以是 'sine', 'square', 'sawtooth' 或 'triangle'
  oscillator.frequency.value = 440; // A4音符，频率440Hz

  // 创建一个分析器
  const analyser = audioContext.createAnalyser();
  analyser.fftSize = 2048; // 频谱分析的精度

  // 将振荡器连接到分析器，然后连接到音频上下文的目的地
  oscillator.connect(analyser);
  analyser.connect(audioContext.destination);

  // 开始产生声音
  oscillator.start();

  // 在一定时间后停止振荡器
  setTimeout(() => {
      oscillator.stop();
      audioContext.close().then(() => {
          // 分析频谱数据
          const dataArray = new Uint8Array(analyser.frequencyBinCount);
          analyser.getByteFrequencyData(dataArray);

          // 将频谱数据转换为字符串
          const fingerprint = Array.from(dataArray).join(',');
          console.log('Audio Fingerprint:', fingerprint);

          // 在这里可以对 `fingerprint` 进行哈希处理
          // 例如，将其传递到某个指纹识别服务或者进行存储
      });
  }, 1000); // 振荡器工作1秒
}


function getCompleteFingerprint() {
const screenWidth = screen.width;
const screenHeight = screen.height;
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const platform = navigator.platform

return btoa(screenWidth + screenHeight + timezone + platform);
}


// 调用函数生成音频指纹
generateAudioFingerprint();

const CanvasFingerprint = getCanvasFingerprint()
const CompleteFingerprint = getCompleteFingerprint()

const WebGLFingerprint = getWebGLFingerprint();

document.getElementById('root').innerHTML = `
  <h2>指纹</h2>
  <b>Canvas：</b><p> ${CanvasFingerprint} <br><p>
  <b>WebGL：</b><p> ${WebGLFingerprint}<br><p>
  <b>dev：</b><p> ${CompleteFingerprint} <br><p>
  </br>
  `