DEV Community

FireKey Team
FireKey Team

Posted on

How to Test Your Browser's Fingerprint: A Hands-On Guide for Developers

#webdev #tutorial #security #privacy

Every website you visit can identify you — not through cookies, but through your browser's unique fingerprint. In this tutorial, I'll show you exactly how to test what your browser reveals and how to interpret the results.

What Makes a Browser Fingerprint?

Your fingerprint is built from dozens of signals your browser exposes. Let's test each one.

Step 1: Check Your Canvas Fingerprint

Canvas fingerprinting renders invisible graphics and hashes the result. Different hardware produces different output.

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

  // Draw text with specific styling
  ctx.textBaseline = 'top';
  ctx.font = '14px Arial';
  ctx.fillStyle = '#f60';
  ctx.fillRect(125, 1, 62, 20);
  ctx.fillStyle = '#069';
  ctx.fillText('Browser Fingerprint', 2, 15);
  ctx.fillStyle = 'rgba(102, 204, 0, 0.7)';
  ctx.fillText('Browser Fingerprint', 4, 17);

  return canvas.toDataURL();
}

// Try it in your browser console
const fp = getCanvasFingerprint();
console.log('Canvas hash length:', fp.length);
console.log('First 50 chars:', fp.substring(0, 50));
Enter fullscreen mode Exit fullscreen mode

Open DevTools (F12) and paste this in the console. Compare results across different browsers — you'll see different outputs.

Step 2: Inspect WebGL Information

WebGL reveals your exact GPU model and driver version.

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

  if (!gl) return 'WebGL not supported';

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

  return {
    vendor: gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL),
    renderer: gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL),
    version: gl.getParameter(gl.VERSION),
    shadingLang: gl.getParameter(gl.SHADING_LANGUAGE_VERSION),
    extensions: gl.getSupportedExtensions().length
  };
}

console.table(getWebGLInfo());
Enter fullscreen mode Exit fullscreen mode

This tells websites exactly what GPU you have. Two machines with the same GPU might still differ in driver versions.

Step 3: AudioContext Fingerprint

Your audio processing stack creates a unique signature.

async function getAudioFingerprint() {
  const ctx = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = ctx.createOscillator();
  const analyser = ctx.createAnalyser();
  const gain = ctx.createGain();
  const processor = ctx.createScriptProcessor(4096, 1, 1);

  gain.gain.value = 0; // Mute
  oscillator.type = 'triangle';
  oscillator.frequency.value = 10000;

  oscillator.connect(analyser);
  analyser.connect(processor);
  processor.connect(gain);
  gain.connect(ctx.destination);

  oscillator.start(0);

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

  oscillator.stop();
  ctx.close();

  // Hash the first 100 values
  return data.slice(0, 100).reduce((a, b) => a + Math.abs(b), 0);
}

getAudioFingerprint().then(fp => console.log('Audio FP:', fp));
Enter fullscreen mode Exit fullscreen mode

Step 4: Navigator Properties

Check what your browser tells every website about you:

const navigatorInfo = {
  userAgent: navigator.userAgent,
  platform: navigator.platform,
  language: navigator.language,
  languages: navigator.languages,
  hardwareConcurrency: navigator.hardwareConcurrency,
  deviceMemory: navigator.deviceMemory,
  maxTouchPoints: navigator.maxTouchPoints,
  cookieEnabled: navigator.cookieEnabled,
  doNotTrack: navigator.doNotTrack
};

console.table(navigatorInfo);
Enter fullscreen mode Exit fullscreen mode

Step 5: Screen and Display 

const screenInfo = {
  width: screen.width,
  height: screen.height,
  colorDepth: screen.colorDepth,
  pixelRatio: window.devicePixelRatio,
  availWidth: screen.availWidth,
  availHeight: screen.availHeight
};

console.table(screenInfo);
Enter fullscreen mode Exit fullscreen mode

Even your screen resolution and taskbar size contribute to your fingerprint.

Step 6: Use Online Testing Tools

Want a quick check? These free tools show your fingerprint score:

What Do the Results Mean?

If your fingerprint is unique among millions of browsers (most are), websites can:

  1. Track you across sessions without cookies
  2. Link multiple accounts to one device
  3. Detect automation tools like Selenium or Puppeteer
  4. Flag suspicious activity when fingerprints change suddenly

How to Reduce Fingerprint Uniqueness

Basic steps:

  • Use a common browser (Chrome) on a common OS (Windows 10/11)
  • Don't install unusual fonts or extensions
  • Use standard screen resolutions

For multi-account management:
Regular browsers can't isolate fingerprints between profiles. You need specialized tools like anti-detect browsers that generate unique, consistent fingerprints per profile.

Tools like FireKey create isolated browser environments where each profile has its own canvas hash, WebGL renderer, AudioContext signature, and navigator properties — making each profile look like a completely different device.

Conclusion

Browser fingerprinting is invisible but powerful. By testing your own fingerprint, you understand exactly what websites see. Whether you're a developer building privacy tools or a user managing multiple accounts, knowing your fingerprint is the first step to controlling it.

Have questions about browser fingerprinting? Join our Discord community to discuss privacy and anti-detection techniques.

Top comments (0)