HTML5 Canvas Fingerprinting

Canvas is an HTML5 API that is used to draw graphics and animations on a web page via scripting in JavaScript.

But apart from this, the canvas can be used as additional entropy in the web browser's fingerprinting and used for online tracking purposes.

The technique is based on the fact that the same canvas image may be rendered differently on different computers. This happens for several reasons. At the image format level – web browsers use different image processing engines, image export options, compression level, the final images may get different checksum even if they are pixel-identical. At the system level – operating systems have different fonts, they use different algorithms and settings for anti-aliasing and sub-pixel rendering.

Below you can see if the Canvas is supported in your web browser and check whether this technique can keep track of you. In addition, a little continuing research will show how really unique and persistent Canvas Fingerprint in real life, and whether your signature in the BrowserLeaks database (nothing is collected right here!).

JavaScript Disabled

Canvas Support in Your Browser

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

Database Summary

Unique User-Agents901701
Unique Fingerprints271996

Your Fingerprint

Signaturen/a
Uniqueness
n/a

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.
Browser Detection via Canvas is very rude and nominal, based just on parsing User-Agents. Don't be surprised if your signature refers to Windows as well as Android (for example). It does not happen. Just someone used UA-spoofing or device emulation on a websites, which is collecting the database. We could use more accurate sources of data (TCP/Flash/etc) to compile more reliable correlation between Canvas Fingerprint and Browser/OS, just it was not a main goal, also it would require further action from webmasters who agreed to put our code to collect data on their websites.

How Does It Work

Unlike the other «browser detection» tricks, this deals with many OS features related to the graphics environment. Potentially it can be used to identify the video adapter, especially if you will use WebGL profiling, not just Canvas 2D Context. By the way, different graphics card drivers can also sometimes affect to regular fonts rendering.

This tiny animated GIF shows how canvas images can be variable from 35 different users. The code is not changed, but each frame is different:

Canvas Fingerprinting

As you can see from our Database Summary, the number of unique images that we have been able to collect is a few thousand for now.

Here is the JavaScript code that produces the pixels:

  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 create a signature from the canvas, we must export the pixels from the application's memory using the toDataURL() function, which will return the base64-encoded string of the binary image file. Then we can just create an MD5 hash of this string, or even extract CRC checksum from IDAT chunk which is placed from 16 to 12 byte from the end of every PNG file, and this will be our Canvas Fingerprint.

Further Reading

Leave a Comment (151)