Canvas

Canvas fingerprinting is a method that websites employ to extract a unique fingerprint from your browser without storing any data on your device. It works by leveraging the HTML5 Canvas API, allowing scripts to draw graphics in real-time. The unique combination of your device’s graphics processing unit (GPU), the browser, and installed fonts results in minute differences in the rendering of these graphics. By examining these tiny variations, websites can generate a unique identifier for every visitor.

Here is a simplified way of implementing this technique:

function getCanvasFingerprint() {
    var canvas = document.createElement('canvas');
    canvas.width = 200;
    canvas.height = 60;
    var ctx = canvas.getContext('2d');

    // Draw some graphics
    ctx.fillStyle = '#f60';
    ctx.fillRect(50, 20, 100, 40);
    ctx.font = '20px Arial';
    ctx.fillText('Canvas Fingerprint', 5, 40);

    // Return the base64 encoded string of the canvas pixel data
    return canvas.toDataURL();
}

When this function is executed, it will return a base64 encoded string representing the image data. This string can be used as a unique identifier.

Fingerprint matching#

Then the full image or just the extract fingerprint gets sent to the anti-bot API for validation. The most common way of validating is to compare the fingerprint to a database. Given that two same set of browser, operating system and GPU give the same final fingerprinting, we can match this fingerprint in a database, giving us the configuration this image come from.

This can be easily bypassed by adding entropy to the canvas rendering, such as new pixels, shifting shapes positions, etc. Most common way of achieving this is by using JavaScript Proxy on the toDataURL function, Direct JavaScript Injection, or modification of the rendering engine of the browser.

Visual matching#

Given how easy the first method is to bypass, a more elaborate way of matching devices as been developed, and it is by looking for “visual” inspection of the rendering artifacts leveraging Machine Learning algorithms. Such as anti-aliasing, or font rendering.

This can also be bypassed by introducing fake artifacts of rendering before the fingerprinting process.

This technique is currently used on Akamai, learn more about it: Akamai Bot Manager