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 in Your Browser

Canvas (basic support)?
Text API for Canvas?
Canvas toDataURL?

Canvas Fingerprint

Signaturen/a
Uniqueness

Image File Details

File Size
Number of Colors
PNG Hash
PNG Headers

Chunk

Length

CRC

Content

Browser Statistics

Looking at your signature, 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 (150)