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!).
Canvas Support in Your Browser
|Canvas (basic support)||?|
|Text API for Canvas||?|
Image File Details
|Number of Colors|
|Looking at your signature, it's very likely that your web browser is Web Browser and your operating system is Operating System.|
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:
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.
- // Text with lowercase/uppercase/punctuation symbols
- var txt = "BrowserLeaks,com <canvas> 1.0";
- ctx.textBaseline = "top";
- // The most common type
- ctx.font = "14px 'Arial'";
- ctx.textBaseline = "alphabetic";
- ctx.fillStyle = "#f60";
- // Some tricks for color mixing to increase the difference in rendering
- ctx.fillStyle = "#069";
- ctx.fillText(txt, 2, 15);
- ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
- 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.
The first article about the difference in rendering pixels. Not about fingerprinting, but just after this article it became clear to us that something similar can be done.
- Pixel Perfect: Fingerprinting Canvas in HTML5
A well-known study, after which the topic has become known to the public.
GitHub project that uses original our original code for their canvas fingerprinting function (huh, so many people have asked for proof).
- The Web never forgets: Persistent tracking mechanisms in the wild
And now it is used by thousands of sites...
Firefox add-on that changes the JS-API for modifying <canvas> to prevent Canvas Fingerprinting.
- Canvas Fingerprinting – Wikipedia
- HTML5 Canvas – MDN
- Compatibility tables for support of Canvas & WebGL in desktop and mobile browsers – Can I Use