Blog

Disclaimer: This post is more of a write-up and note-taking for my own exploration of HTML5 canvas fingerprinting and privacy-preserving techniques.

How accurate are HTML5 canvas fingerprints? According to AmIUnique, only about 0.73% of users share the same canvas fingerprint as I do, highlighting its uniqueness.

Canvas fingerprinting is a technique widely used in ad tracking and user identification systems and has recently been explored in risk-based authentication research ¹. While there is extensive research into detecting and mitigating canvas fingerprinting, few studies have examined just how privacy-invasive these techniques are in practice.

This post will explore the effectiveness of HTML5 canvas fingerprinting, its limitations, and a privacy-preserving approach using differential privacy mechanisms to add noise to fingerprints.

HTML5 Canvas Fingerprint

HTML5 canvas fingerprinting works by rendering text, shapes, and graphics on an invisible canvas, extracting the image as a data source, and generating a hash. The slight rendering differences across devices and browsers make these fingerprints relatively unique. Some sources claim its accuracy is between 80% and 99% for correctly identifying the same user again (e.g. ²).

1
2
3
4
5
6

<canvas
  id="myCanvas"
  width="200"
  height="40"
  style="display: none; border: 1px solid #000000"
></canvas>

In theory, different ways to render a font make the difference from one user to another. Below is JavaScript code that demonstrates the process:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

function processCanvas() {
  // Create the canvas and draw elements
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  ctx.fillStyle = "rgb(255,0,255)";
  ctx.beginPath();
  ctx.rect(20, 20, 150, 100);
  ctx.fill();
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  ctx.fillStyle = "rgb(0,255,255)";
  ctx.arc(50, 50, 50, 0, Math.PI * 2, true);
  ctx.fill();
  ctx.stroke();
  ctx.closePath();

  let txt = "abz190#$%^@£éú";
  ctx.textBaseline = "top";
  ctx.font = '17px "Arial 17"';
  ctx.fillStyle = "rgb(255,5,5)";
  ctx.rotate(0.03);
  ctx.fillText(txt, 4, 17);
  ctx.fillStyle = "rgb(155,255,5)";
  ctx.shadowBlur = 8;
  ctx.shadowColor = "red";
  ctx.fillRect(20, 12, 100, 5);


  // Convert canvas to PNG with lower quality and send to backend
  let src = canvas.toDataURL("image/png", 0.5); // Lower quality (0.5) reduces size
  // Basic hash function
  let hash = 0;
  for (i = 0; i < src.length; i++) {
    char = src.charCodeAt(i);
    hash = (hash << 5) - hash + char;
    hash = hash & hash;
  }
}

The idea of identifying users is old and most studies only tried identifying users on small datasets ³. For instance this is my canvas on my Chrome:

And this is the same on Firefox:

Notice the subtle differences? Giving me two very distinct hashes.

Identifying users

In reality, studies like Laperdrix et al. ³ found that, while unique for some, around 57% of desktop devices share the same canvas fingerprint. This brings up the question of whether advanced defenses against canvas fingerprinting, like those in Brave or certain browser extensions, are truly necessary. These defenses may even stand out, reducing privacy rather than enhancing it.

Still, we can use deviations in a user’s regular canvas fingerprint to detect potentially suspicious logins in risk-based authentication. Adding signals and metrics to these deviations increases the reliability of identification.

Privacy-preserving Canvas Fingerprinting

According to research ⁴ canvas fingerprints can group up to 1,000 users, which still poses a privacy concern. To improve privacy, we can apply a Laplacian noise mechanism based on differential privacy. By adding controlled randomness to the fingerprint, we can reduce its specificity while preserving some utility. For instance, adding a Laplace Noise with a scale of 15 will give me this:

Since every pixel has three channels with 255 colors per channel we have an epsilon of:

$\epsilon_{channel} = \frac{\Delta f}{b} = \frac{255}{15} = 17$

$\epsilon_{image} = 17 \times 3 = 51$

We can add Laplacian noise to the canvas by using:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// Laplacian noise function
function laplaceNoise(scale) {
  const u = Math.random() - 0.5;
  return scale * Math.sign(u) * Math.log(1 - 2 * Math.abs(u));
}

// Apply Laplacian noise to canvas
function applyLaplacianNoise(ctx, scale, canvas) {
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  for (let i = 0; i < data.length; i += 4) {
    data[i] = Math.min(255, Math.max(0, data[i] + laplaceNoise(scale))); // R channel
    data[i + 1] = Math.min(255, Math.max(0, data[i + 1] + laplaceNoise(scale))); // G channel
    data[i + 2] = Math.min(255, Math.max(0, data[i + 2] + laplaceNoise(scale))); // B channel
  }

  ctx.putImageData(imageData, 0, 0);
}

While this noise makes hashing unreliable due to its randomness, we can store the raw image data instead, then apply image comparison techniques or even machine learning to classify it.

Instead of the fingerprint, we just send the raw image data (which is usually around 6kb). Unfortunately, due to the random noise, compression will get harder and increase up to 150% (16kb) on my experiments. Thus, we can apply a slight blur to enhance the privacy guarantees and the compression ratio:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

function applyBlur(ctx, canvas) {
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;
  const width = canvas.width;
  const height = canvas.height;

  const copyData = new Uint8ClampedArray(data);

  const radius = 1; // Adjust for stronger or weaker blur
  for (let y = radius; y < height - radius; y++) {
    for (let x = radius; x < width - radius; x++) {
      let r = 0, g = 0, b = 0;
      let count = 0;

      for (let dy = -radius; dy <= radius; dy++) {
        for (let dx = -radius; dx <= radius; dx++) {
          const idx = ((y + dy) * width + (x + dx)) * 4;
          r += copyData[idx];
          g += copyData[idx + 1];
          b += copyData[idx + 2];
          count++;
        }
      }

      const i = (y * width + x) * 4;
      data[i] = r / count;     // R channel
      data[i + 1] = g / count; // G channel
      data[i + 2] = b / count; // B channel
    }
  }

  ctx.putImageData(imageData, 0, 0);
}

If we apply Gaussian blur with a blur radius of $1$ will effectively average each pixel to its immediate neighboring other 8 pixels:

$\epsilon_{channel} = \frac{\Delta f_{blurred}}{b} \approx \frac{\frac{255}{9}}{15} = 1.89$

$\epsilon = 1.89 \times 3 = 5.67$

Which will look like this and only have 10kb size:

Performance Issues

Processing and uploading these images can take time (20–1200ms in tests), which may block the main thread. To ensure the page loads smoothly, we can defer this work using requestIdleCallback, which only runs the processing when the browser is idle.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

function isMobile() {
  return /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
// Execute processing during idle time, if available
if ('requestIdleCallback' in window) {
  requestIdleCallback(processCanvas);
} else {
if (!isMobile()) {
      setTimeout(processCanvas, 0);
  }
}

We also add a isMobile check if the requestIdleCallback is not present that helps prevent lag on mobile devices, where network and processing resources may be limited.

Conclusion

Canvas fingerprinting offers high uniqueness for user tracking but also raises privacy concerns. By adding differential privacy techniques, such as Laplacian noise and blur, we can reduce the specificity of canvas fingerprints, allowing us to gather insights without compromising individual privacy.

This exploration of canvas fingerprinting shows that with thoughtful design, we can enhance privacy and still retain some utility in user identification. As privacy standards evolve, techniques like differential privacy will be essential in bridging the gap between user tracking and personal privacy.