Fingerprint

function hash(str) {
  return crypto.subtle.digest(
    'SHA-256',
    new TextEncoder().encode(str)
  ).then(buf =>
    Array.from(new Uint8Array(buf))
      .map(b => b.toString(16).padStart(2, '0'))
      .join('')
  );
}

<Container>
Content
</Container>

// Canvas fingerprint
function getCanvasFP() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.textBaseline = 'top';
  ctx.font = "14px 'Arial'";
  ctx.fillText('fingerprint_test_🧠', 2, 2);
  return canvas.toDataURL();
}

// WebGL fingerprint
function getWebGLFP() {
  const canvas = document.createElement('canvas');
  const gl =
    canvas.getContext('webgl') ||
    canvas.getContext('experimental-webgl');
  if (!gl) return 'no-webgl';

  const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
  return [
    gl.getParameter(gl.VENDOR),
    gl.getParameter(gl.RENDERER),
    debugInfo
      ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)
      : ''
  ].join('|');
}

// Audio fingerprint
async function getAudioFP() {
  const ctx = new (window.AudioContext || window.webkitAudioContext)();
  const osc = ctx.createOscillator();
  const analyser = ctx.createAnalyser();
  const gain = ctx.createGain();

  osc.type = 'triangle';
  osc.frequency.value = 10000;
  gain.gain.value = 0;

  osc.connect(analyser);
  analyser.connect(gain);
  gain.connect(ctx.destination);

  osc.start(0);
  const data = new Float32Array(analyser.frequencyBinCount);
  analyser.getFloatFrequencyData(data);
  osc.stop();

  return data.slice(0, 30).join(',');
}

const components = {
  userAgent: navigator.userAgent,
  language: navigator.language,
  languages: navigator.languages?.join(','),
  platform: navigator.platform,
  timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
  screen: ${screen.width}x${screen.height}x${screen.colorDepth},
  hardwareConcurrency: navigator.hardwareConcurrency,
  deviceMemory: navigator.deviceMemory,
  canvas: getCanvasFP(),
  webgl: getWebGLFP(),
  audio: await getAudioFP()
};

const rawFingerprint = Object.values(components).join('||');
const fingerprint = await hash(rawFingerprint);

console.log('🧩 Fingerprint:', fingerprint);
console.log('🔍 Components:', components);
})();