obscura/research/web-fingerprintingobscura/research/web-fingerprinting

Overview

Signals derived from web platform features, CSS capabilities, fonts, and other browser characteristics.

---

1. Font Fingerprinting

Mechanism

Fonts are enumerated via several techniques:

1. CSS @font-face measurement: Create text, measure its width with a known font, then try loading a system font. If width changes, the font exists.

2. Canvas measureText: Similar approach using canvas.

3. document.fonts.check(): Modern API for font availability checking.

4. 
   

   Flash-based enumeration (legacy, still used): Flash can list all installed fonts.

   
   

Code Example

// Measurement-based font detection
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const text = 'mmmmmmmmmmlli'

function detectFont(font) {
  ctx.font = `72px ${font}, monospace`
  return ctx.measureText(text).width
}

// Compare width with monospace baseline to detect

Entropy

Font list varies widely:

Mitigation at Proxy

// Override font measurement to return consistent values
const originalMeasureText = CanvasRenderingContext2D.prototype.measureText
CanvasRenderingContext2D.prototype.measureText = function(text) {
  const result = originalMeasureText.call(this, text)
  // Round width to reduce font detection precision
  result.width = Math.round(result.width / 10) * 10
  return result
}

Limitation: Font detection is only reduced, not eliminated.

---

2. Browser Feature Support (25+ binary vectors)

Mechanism

Each browser supports a different subset of web APIs and CSS features. Collectively, this creates a browser+version fingerprint.

High-Entropy Features

Entropy

Each feature adds ~1 bit. With ~100 features tested, theoretical max is 100 bits, but features are highly correlated (minimal entropy beyond browser family and version).

Effective entropy: ~8-12 bits (~256-4096 combinations).

Mitigation

Cannot be done at proxy level these are inherent browser capabilities. Feature detection runs in JS before any injected script can run (and even if overridden, the browser still reports actual capabilities somewhere).

---

3. CSS Media Query Fingerprinting

Mechanism

CSS @media queries can brute-force screen dimensions, DPI, color depth, and other properties without JS:

@media (width: 1920px) { body::after { content: '1920' } }
@media (height: 1080px) { body::after { content: '1080' } }
@media (resolution: 1.5dppx) { body::after { content: '1.5' } }
@media (prefers-color-scheme: dark) { ... }
@media (prefers-reduced-motion: no-preference) { ... }
@media (hover: hover) { ... }
@media (pointer: fine) { ... }

Challenge for Proxy

CSS executes before any JS injection. The proxy can:

1. Parse CSS in the response HTML and modify media queries
2. Or rely on the fact that CSS-only fingerprint probes need to exfiltrate data (which needs JS or a network request)

Real mitigation: Block the exfiltration path (JS or image loading) rather than spoofing CSS values.

Media Query List

---

4. ClientRects Fingerprinting

Mechanism

Element.getClientRects() returns slightly different values depending on OS, browser, and font rendering:

const span = document.createElement('span')
span.textContent = 'mmmmmmmmmmlli'
document.body.appendChild(span)
const rects = span.getClientRects()
// rects[0].width varies by OS/browser/font

Mitigation

Element.prototype.getClientRects = function() {
  const rects = Element.prototype.__proto__.getClientRects.call(this)
  return Array.from(rects).map(r => ({
    ...r,
    width: Math.round(r.width / 10) * 10,
    height: Math.round(r.height / 10) * 10
  }))
}

---

5. Web Audio API Fingerprint

See audio-fingerprinting.md for details.

---

6. WebGPU Fingerprinting

WebGPU provides structured device info not previously available:

const adapter = await navigator.gpu.requestAdapter()
const info = await adapter.requestAdapterInfo()
// { vendor: "nvidia", architecture: "ampere", device: "..." }

// Adapter limits expose specific GPU capabilities
const limits = adapter.limits
// maxTextureDimension2D, maxStorageBufferBindingSize, etc.

// Feature set
adapter.features.has('texture-compression-bc')
adapter.features.has('shader-f16')

Exposed Data

Mitigation

// Block WebGPU adapter info
navigator.gpu.requestAdapter = async function() {
  return null  // or return a fake minimal adapter
}

Cost: Blocks WebGPU entirely, which breaks some apps.

---

7. Service Worker Persistence

Mechanism

Service Workers can be used to identify users across sessions:

// Detect if a SW is installed
navigator.serviceWorker.getRegistrations().then(regs => {
  if (regs.length > 0) console.log('SW found')
})

Mitigation

navigator.serviceWorker.getRegistrations =
  async () => []

---

8. WebGL Extensions Fingerprint

WebGL exposes a list of supported extensions that varies by GPU, driver, and browser:

Entropy: The exact set and count of extensions creates a hash.

Mitigation:

const originalGetExtension = WebGLRenderingContext.prototype.getExtension
WebGLRenderingContext.prototype.getExtension = function(name) {
  if (name === 'WEBGL_debug_renderer_info') return null
  if (name.startsWith('MOZ_')) return null
  return originalGetExtension.call(this, name)
}

---

Conclusions for Obscura