Demo for Canvas fingerprinting

Here you can find JS library for fetching canvas fingerprinting, testing of preventing with addons and experiment with different hash functions, basic skeleton was taken from fingerprintjs.

Abstract

Canvas fingerprinting is a techniques of tracking online users that allow websites to identify and track visitors using HTML5 canvas element instead of browser cookies or other similar means. Consider it like a cookie on steroids.

Main responsibility of canvas fingerprinting is collecting information about a remote computing device for the purpose of identification. Even if you are browsing GitHub now, this site try to fetch as much as possible your metadata like fonts, OS, specific system properties and it tries to draw hidden 3D canvas which will be converted in unique token for further identification on another sites, advertising some bullshit goods on e-commerce sites or for recommendation system in social network.

Variation of GPU time rendering of 3D canvas allows to generate unique token for each user. Also, this approach was widely used for deanonymization of Tor's user, in force of this fact, Tor's developers made a patch for this exploit, for now, Tor notifies user of canvas read attempt and return blank image data.

The text which was pictured on a canvas for the identification and successfully blocked by CanvasFingerprintBlock

Protection

A lot of add-ons allow you to prevent attempt to fetch canvas fingerprint like Privacy Badger or Canvas Defender, as mentioned above, Tor browser protect users from it by default. From October of 2017 Firefox prevents canvas fingerprinting by default, Firefox takes a bite out of the canvas while other browsers don't prevent it.

Preventing in action:

Docker hub attempted to fetch canvas fingerprint, but was locked by add-on:

Canvas Defender allows to generate dummy noise:

Noise generated by canvas defender:

Indicators

This library uses multiple sources for generating unique token:

1. Canvas fingerprinting
2. Screen Resolution
3. Color Depth
4. Screen Resolution
5. Time Zone
6. UserAgent
7. Languages
8. CPU class
9. Fact of storing/presence/facts of:
   • session storage
   • local storage
   • indexed DB
   • open DB
   • IE AddBehaviour
   • IE specific plugins like RealPlayer, AcroPDF, AgControl.AgControl - for Silverlight etc.
   • DNT header - as ironic as it was

After collection all metadata in a single place, they are joined with MurmurHash, in result, you have integer value which represents fingerprint of your browser.

Library usage:

    var fingerprint = new Fingerprint();

If you want to control drawing flag, just pass it directly canvas: true

    var withCanvasDrawing = new Fingerprint({canvas: true});
    var withoutCanvasDrawing = new Fingerprint({canvas: false});

Using custom hash function

    var withCanvasDrawing = new Fingerprint({hasher: pearson});

Example with Java's hashcode from java.lang.String:

    var javaHashCode = function(string, K) {
            var hash = 0;
            if (string.length === 0) {
                return hash;
            }
            for (var i = 0; i < string.length; i++) {
                char = string.charCodeAt(i);
                hash = K*((hash<<5)-hash)+char;
                hash = hash & hash;
            }
            return hash;
        };

    var fingerprint = new Fingerprint({hasher: javaHashCode});

License: MIT