Canvas Fingerprinting

Background

Canvas fingerprinting is a type of browser or device fingerprinting technique that was first presented by Mowery and Shacham in 2012, and is still relatively new when it comes to device fingerprint elements. The authors found that by using the Canvas API of modern browsers, one can exploit the subtle differences in the rendering of the same text to extract a consistent fingerprint that can easily be obtained in a fraction of a second without user's awareness.

The technique received wide media coverage in 2014 after the publication of the reasearch paper "The Web never forgets: Persistant tracking mechanisms in the wild" by researchers from Princeton University and KU Leuven University.

Canvas device fingerprinting has a sizable benefit over other traditional methods, in that it changes much slower than other prints. For example, if you are on Firefox 30 and upgrade to Firefox 42, the print will remain the same. This is due to the fact that the canvas element is essentially device pritning the rendering engine, the graphics driver and GPU. Most people do not change their GPU or graphics driver frequently, that leaves just the rendering engine as the main variable. However, rendering engines tend to be reused from browser version to browser version.  Additionally, because headless browsers can't handle graphics, the lack of returned data is a great indicator that a Trojan or RAT may be on your client's computer and being controlled by a miscreant.

In a small study, the canvas device print was resulting in about 5.7 bits of entropy, however it's believed that the entropy would be much higher in larger data sets.

How It Works

In the figure below (1) the browser is requested to draw text on the screen in a hidden box. This text is enlarged, drawn in multiple colors and consists of a large range of text samples. Next (2) the drawing is converted to a base64 URL. Finally, (3) in order to shorten the output the base64 URL is hashed. This output is then used as the canvas device fingerprint. 

Entropy Estimate: 10.0 bits

Code

The javascript function below fingerprints Canvas API.

Source Code

function fingerprint_canvas() {

    "use strict";

    var strOnError, canvas, strCText, strText, strOut;

 

    strOnError = "Error";

    canvas = null;

    strCText = null;

    strText = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ`~1!2@3#4$5%6^7&8*9(0)-_=+[{]}|;:',<.>/?";

    strOut = null;

 

    try {

        canvas = document.createElement('canvas');

        strCText = canvas.getContext('2d');

        strCText.textBaseline = "top";

        strCText.font = "14px 'Arial'";

        strCText.textBaseline = "alphabetic";

        strCText.fillStyle = "#f60";

        strCText.fillRect(125, 1, 62, 20);

        strCText.fillStyle = "#069";

        strCText.fillText(strText, 2, 15);

        strCText.fillStyle = "rgba(102, 204, 0, 0.7)";

        strCText.fillText(strText, 4, 17);

        strOut = canvas.toDataURL();

        return strOut;

    } catch (err) {

        return strOnError;

    }

}

Validation

Unlike other code on the Internet we do everything possible to verify our code for you. In order to minimize problems and maximize compatibility this code has been verified with JSLint and has been extensively tested with over 1100 OS/Browser combinations using BrowserStack.


Reference

Pixel Perfect: Fingerprinting Canvas in HTML5 (2012). In UCSanDiego Computer Science and Engineering. Retrieved September 01, 2017, from http://cseweb.ucsd.edu/~hovav/dist/canvas.pdf

Browser fingerprints - the invisible cookie you can't delete (December 01,2014). In naked security by Sophos. Retrieved September 01, 2017, from https://nakedsecurity.sophos.com/2014/12/01/browser-fingerprints-the-invisible-cookies-you-cant-delete/