But apart from this, canvas can be used as additional entropy in 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 in different computers. This happens for several reasons. At the image format level – web browsers uses different image processing engines, image export options, compression level, the final images may got 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.
This is the first live demo of the Canvas Fingerprinting. Below you can see if HTML5 Canvas is supported in your web browser and check whether this technique can keep track of you. In addition our little continuing research will show how realy unique and persistent canvas fingerprint in real life, and whether your signature in our database (we don't collecting anything right here!).
Canvas Support in Your Browser
|Canvas (basic support)||?|
|Text API for Canvas||?|
|Found in DB|
Image File Details
|Number of Colors|
|✔ It is very likely that your web-browser is Web Browser and your operating system is Operating System. ? Your Canvas Fingerprint appears to be unique for our database. ? Canvas Protection was detected, it seems that Tor Browser is here!|
Unlike the other «browser detection» tricks, this deals with many OS features related on 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 image 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 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.
For more info see the Further Reading below.
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
Well-known study, after which the topic has become known to the public.
- fingerprintJS - Fast browser fingerprint library
GitHub project that uses our original code for his canvas fingerprinting function.
Firefox add-on that blocks the JS-API for modifying <canvas> to prevent Canvas Fingerprinting.
- Canvas Fingerprinting — Wikipedia
- HTML5 Canvas — Mozilla Developer Network
- Compatibility tables for support of Canvas & WebGL in desktop and mobile browsers — Can I Use
- Portable Network Graphics (PNG) Specification — W3C