Canvas Fingerprinting

The Canvas API, which is designed for drawing graphics via JavaScript and HTML, can also be used for online tracking via browser fingerprinting. This technique relies on variations in how canvas images are rendered on different web browsers and platforms to create a personalized digital fingerprint of a user's browser.

JavaScript Disabled

Canvas Support Detection

Canvas 2D API✔ True
Text API for Canvas✔ True
Canvas toDataURL✔ True

Canvas Fingerprint

Signaturea0217bb13ed4f5c4065b368b34469e09
Uniqueness

Image File Details

 Error displaying <img> tag
File Size5155 bytes
Number of Colors492
PNG Headers

Chunk

Length

CRC

Content
IHDR13477a703e
PNG image header: 220x30, 8 bits/sample, truecolor+alpha, noninterlaced
sRGB1aece1ce9
sRGB color space, rendering intent: Perceptual
sBIT47c086488
{"grey":null,"alpha":8,"red":8,"green":8,"blue":8}
IDAT506904fa0695
PNG image data
IEND0ae426082
end-of-image marker

Signature Stats

It's very likely that your web browser is Web Browser and your operating system is Operating System.

How Canvas Fingerprinting Works

The way an image is rendered on a canvas can vary based on the web browser, operating system, graphics card, and other factors, resulting in a unique image that can be used to create a fingerprint. The way that text is rendered on a canvas can also vary based on the font rendering settings and anti-aliasing algorithms used by different web browsers and operating systems.

This small animated GIF illustrates the variability of canvas images among 35 different users. Although the JavaScript code remains the same, each frame is distinct due to differences in how the images are rendered on different systems:

Canvas Fingerprinting

Here is the JavaScript code that creates our image:

  1. // Text with lowercase/uppercase/punctuation symbols
  2. var txt = "BrowserLeaks,com <canvas> 1.0";
  3. ctx.textBaseline = "top";
  4. // The most common type
  5. ctx.font = "14px 'Arial'";
  6. ctx.textBaseline = "alphabetic";
  7. ctx.fillStyle = "#f60";
  8. ctx.fillRect(125,1,62,20);
  9. // Some tricks for color mixing to increase the difference in rendering
  10. ctx.fillStyle = "#069";
  11. ctx.fillText(txt, 2, 15);
  12. ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
  13. ctx.fillText(txt, 4, 17);

To generate a signature from the canvas, we need to extract the pixels from the application's memory by calling the toDataURL() function. This function returns a base64-encoded string representing the binary image file. We can then compute an MD5 hash of this string to obtain the canvas fingerprint. Alternatively, we could extract the CRC checksum from the IDAT chunk, which is located 16 to 12 bytes from the end of every PNG file, and use it as our canvas fingerprint.

Further Reading

Leave a Comment (326)