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

Signaturebc23f1ae6a5e84223feee10a201b7940
Uniqueness99.98% (37 of 227965 user agents have the same signature)

Image File Details

 Error displaying <img> tag
File Size5748 bytes
Number of Colors562
PNG Headers

Chunk

Length

CRC

Content
IHDR13477a703e
PNG image header: 220x30, 8 bits/sample, truecolor+alpha, noninterlaced
sRGB1aece1ce9
sRGB color space, rendering intent: Perceptual
IDAT567852f4cd44
PNG image data
IEND0ae426082
end-of-image marker

Signature Stats

It's very likely that your web browser is Chrome and your operating system is GNU/Linux.

Operating Systems

Browsers

Devices

GNU/Linux31/37Chrome27/37Desktop27/37
Windows 105/37Facebook5/37Digicel2/37
Android 101/37Facebook Lite4/37Motorola Moto G Pure1/37

Engines

Headless Chrome1/37Samsung Galaxy A121/37
Other13/37

Browsers by Version

Samsung Galaxy A21s1/37
Blink 1253/37Chrome 1309/37

Platforms

Blink 61.0.3163.1003/37Chrome 1315/37Windows15/37
Blink 1313/37Chrome 1283/37Linux armv8l9/37
Blink 1303/37Chrome 1252/37Linux x86_647/37
Chrome 1212/37Win326/37

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:

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 (312)