Fingerprints on canvas in the wild

Every day your computer renders dozens of them without you even realizing it. Strange patterns, colorful shapes and emojis – what do you think they are?

This is Canvas fingerprinting, a technique used by most websites to fingerprint devices and distinguish humans from bots. What you may not realize is that this is achieved by displaying colorful patterns and emojis, showing a surprising level of creativity from the providers. In this article, we’ll look at some unexpected visual artifacts caught in the wild and examine how they help track your browser in truly unique ways.

What is canvas fingerprinting?

Canvas fingerprinting is a technique brought to light in 2012 by two University of California, San Diego researchers, Keaton Mowery and Hovav Shacham, in their paper “Pixel Perfect: Fingerprinting Canvas in HTML5.” It uses the Canvas HTML API to draw 2D shapes and text in various sizes and colors. The images drawn are completely invisible to the user as the process takes place in the background.

Depending on your browser and your device (operating system, GPU, list of installed fonts), there will be slight differences in how the canvas image appears. Therefore, canvas fingerprints are quite unique and stable, making them a popular device fingerprinting technique. In 2016, Englehardt et al. showed that Canvas fingerprinting was used by 1.6% of websites in the top Alexa 1M list.

Because storing a full image can be costly, most fingerprinting scripts capture a hash of the canvas challenge. So what we call a canvas fingerprint is simply the hash of the image generated by the canvas fingerprinting challenge.

Why is canvas fingerprinting important for bot detection and fraud prevention?

Properly created Canvas fingerprints have two main properties that make them useful for detecting malicious bots and online fraud:

It is usually quite unique to each user and stable over time. Therefore, when used in conjunction with other device fingerprinting attributes, it can be used to keep an eye on malicious users even if they delete their cookies (e.g. in private/incognito mode). Additionally, because a Canvas fingerprint remains stable for a specific user on a specific device, it is often used by authentication systems to detect that a user account has been compromised. So when they detect a new unknown device fingerprint trying to log in to an account, the system can request a second authentication factor (SMS, TOTP, email verification code).
The Canvas fingerprint value depends on the user’s device, operating system and browser. This allows us to compare the canvas fingerprint value with different device fingerprint values to check if they are consistent. For example, we can verify that a Canvas fingerprint matches the operating system specified by a user. If this is not the case, it suggests that the user lied about the type of their device and may have spoofed their fingerprints. It can also be used to detect bots running on Linux servers or virtual machines.

Why are there so many challenges with canvas fingerprinting?

Some companies/websites use canvas fingerprinting to create a stable and unique identifier to keep track of a user, especially scammers and bots, even if they delete their cookies. Therefore, they want to create a challenge that is as unique and stable as possible.

On the contrary, other websites used canvas fingerprinting to derive information about the user device and browser, especially to find out its true nature:

Does the browser run on a Linux server?
Does it run on a virtual machine?

For example, in 2016, Google researchers proposed Picasso, a dynamic canvas fingerprinting challenge to detect devices that are spoofing the true nature of their operating system or browser. In their article they explain how you can use it to detect desktop devices masquerading as iPhones or how to distinguish between real Android devices and Android emulators.

In the image below from their article they show the difference between a Picasso Canvas fingerprint taken from a real Chrome browser and other browsers. Because a particular Canvas fingerprint challenge is stable on a particular browser/OS, they can detect whenever someone is lying about their device’s actual operating system.

You may be wondering why so many canvas fingerprinting challenges use emojis. As Laperdrix et al. In their article “Beauty and the Beast: Redirecting modern web browsers to create unique browser fingerprints,” Canvas fingerprints use emojis because their appearance depends on the operating system or even the phone type, see image below.

Thus, it can be used to detect users who lie about the true nature of their device, but also to make the canvas more unique as it contains more information about the user’s device.

Example code

The following code demonstrates how to capture a canvas fingerprint. The value of the canvas fingerprinting challenge is stored in the canvasFingerprint variable thanks to the toDataURL Function.

const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 200;
const context = canvas.getContext("2d");

context.rect(0, 0, 10, 10);
context.rect(2, 2, 6, 6);

context.textBaseline = "alphabetic";
context.fillStyle = "#f60";
context.fillRect(125, 1, 62, 20);
context.fillStyle = "#069";
context.font = "11pt no-real-font-123";
context.fillText("Cwm fjordbank glyphs vext quiz, 😃", 2, 15);
context.fillStyle = "rgba(102, 204, 0, 0.2)";
context.font = "18pt Arial";
context.fillText("Cwm fjordbank glyphs vext quiz, 😃", 4, 45);

context.globalCompositeOperation = "multiply";
context.fillStyle = "rgb(255,0,255)";
context.beginPath();
context.arc(50, 50, 50, 0, 2 * Math.PI, !0);
context.closePath();
context.fill();
context.fillStyle = "rgb(0,255,255)";
context.beginPath();
context.arc(100, 50, 50, 0, 2 * Math.PI, !0);
context.closePath();
context.fill();
context.fillStyle = "rgb(255,255,0)";
context.beginPath();
context.arc(75, 100, 50, 0, 2 * Math.PI, !0);
context.closePath();
context.fill();
context.fillStyle = "rgb(255,0,255)";
context.arc(75, 75, 75, 0, 2 * Math.PI, !0);
context.arc(75, 75, 25, 0, 2 * Math.PI, !0);
context.fill("evenodd");
const canvasFingerprint = canvas.toDataURL();

In a Chrome browser version 131 on macOS, the canvas fingerprint looks like this:

Similar types of fingerprints

Similar to canvas fingerprinting, WebGL fingerprinting uses the WebGL API to draw a 3D image, the value of which also depends on the user device. The image below shows the output of a WebGL fingerprinting challenge.

In addition to drawing images, other device fingerprinting challenges also leverage the Web Audio API to detect the subtle differences in the way a device renders audio content.

WebGPU and the future of fingerprinting

The WebGPU API is the successor to the WebGL API. It can be used from JS to leverage the underlying device GPU to perform high-performance calculations and draw complex images that can be rendered in the browser. While it is already used to obtain fingerprint information such as GPU architecture and manufacturer using the GPUAdapter API, it will likely be a future companion to Canvas, WebGL and audio fingerprinting challenges to understand the true nature of the user device to better determine even if fraudsters and bots make significant changes to their device’s fingerprint!

*** This is a Security Bloggers Network syndicated blog by Blog, written by Sebastian Wallin. Read the original post at: https://blog.castle.io/canvas-fingerprinting-in-the-wild/