Canvas Technology in Anti-Fraud Systems and User Identification Methods.

26.10.24

Canvas is one of the most powerful web development tools, providing the ability to work with graphics directly in the browser. Canvas is based on the ability to draw and manipulate images using JavaScript, making it indispensable for creating dynamic web applications. Canvas is actively used not only for visual effects, games and animation, but also in anti-fraud systems, where its capabilities help to uniquely identify users.
## History and purpose of Canvas

Canvas technology first appeared in the HTML5 specification developed in the early 2000s. The first implementation of Canvas was introduced by Apple in 2004 in the Safari browser. The original idea was to create a way to display graphics without using third-party plugins such as Flash, which would improve the performance and security of web pages. In 2014, HTML5 became an official standard, and Canvas solidified itself as a key technology for web graphics.

Canvas gives programmers the ability to work with pixel data, which opens up a wide range of applications in web design, game development, and animation. But one of its most unexpected uses is in anti-fraud systems, where Canvas helps fight fraud by uniquely identifying the user through a digital fingerprint.

## Canvas Technology Capabilities

Canvas offers developers a rich set of features for working with graphics:

- Drawing shapes and lines. Canvas supports simple shapes such as rectangles, circles, and lines.

- Working with images. It allows you to load images, resize them, overlay and manipulate every pixel of an image.

- Animation. Canvas is heavily used to create interactive graphics and dynamic visual effects.

These capabilities make Canvas a versatile web development tool for a wide variety of applications, from website design to complex interactive applications and games.

### Canvas and anti-fraud: defence against fraudsters

Anti-fraud systems, in their endeavour to identify users' devices, face the problem of identity and data spoofing. For more accurate identification, they have started to use device uniquification through the so-called Canvas fingerprinting. It allows you to create a digital fingerprint for each device.

**How Canvas helps to identify the user?**

When a browser renders an image in Canvas, devices do it a little differently. This is affected by GPUs, drivers, operating systems, and even fonts. As a result, an image that looks the same on different devices may contain unique differences when analysed in detail at the pixel level.

Anti-fraud systems use this feature to create fingerprints. Canvas draws an image and then uses JavaScript to analyse its pixels, identifying subtle differences. Combined with other factors such as browser version, operating system, and screen resolution, the fingerprint helps identify the user's device.

## Canvas fingerprint spoofing techniques

Attackers, in an effort to circumvent anti-fraud systems, are developing ways to spoof Canvas fingerprints. Common spoofing methods include:

1. Adding noise. Programs can add small distortions to a Canvas rendering - for example, altering pixels, adding noise or artificial variations. This can alter the print by masking the real device.

3. Using pre-rendered results. This method allows you to substitute a Canvas print, mimicking the operation of the real hardware. Instead of calculating real-time renderings, programs embed pre-stored data that matches the footprints of real devices. This approach makes spoofing more difficult to detect, as anti-fraud systems receive seemingly valid data that does not reflect real device characteristics.

## How Anti-Fraud Systems Detect Fingerprint Spoofing

Anti-fraud systems apply various methods to detect Canvas fingerprint spoofing, taking into account both static and dynamic rendering aspects. The main approaches include:

1. **Analysis of noise in images:**

To determine if noise is present in the rendering, antifraud systems compare the results on several similar images. The comparison helps to identify anomalies that may be indicative of spoofing. For example, by comparing parts of the results or use different methods to obtain results for similar images

2. **Use of dynamic canvases:**

Dynamic canvases present a more difficult case for spoofing because they require constant real-time changes in the data. This makes it difficult to spoof results that would match the behaviour of a real device. Anti-Fraud systems can generate dynamic canvases to evaluate the real-time performance of a device, and compare the results to a live device.Anti-Fraud systems can generate dynamic kanvas to evaluate device performance in real time and compare the results with expected results. However, the results for dynamic canvases are difficult to compare among themselves due to their variability and dependence on multiple factors.

Thus, the combination of noise analysis and dynamic renderings allows anti-fraud systems to more effectively detect spoofing and determine whether Canvas prints are genuine or falsified.

## Examples of using Canvas in anti-fraud systems.

Let's look at the principle of obtaining data for a canvas print, let's start with an example Canvas of 9 pixels (3x3 px).

**Pixel colours (Hex):**
- ff0000
- 00ff00
- 0000ff
- ffff00
- ff00ff
- 00ffff
- ffffff
- 000000
- 808080

**Base64 string:**
iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAAABWKLW/AAAAAAXNSR0IArs4c6QAAACBJREFUGFcVx4EJAAAAMgzD9vJ87BhLQIAMMi/f7KZVtHB5jDn4u6zYbAAAAAAAAAAAElFTkSuQmCC

**Hex string:**
6956424f5277304b47676f414141414e535568455567414141414d414141414443415941414142574b4c572f4141414141584e535230494172733463365141414143424a52454655474663567834454a4141414d677a4439764a383742684c5149414d4d692f66374b5a56744842356a446e3475367a59624141414141456c46546b5375516d4343

The process of encoding to hex involves several steps: typically the pixel colours are first encoded in base64, and then the base64 string is converted to hexadecimal format (hex), which is sent to the server for further computation.

Now that we've figured out how image rendering in a browser works, let's explore how noise overlay works in anti-detect browsers.

For a more complex rendering task, let's use the canvas example from a well-known browser checker and run some tests. We will compare the length of the Hex result that is sent to the server after rendering and encoding and compare the values if necessary.

**Results for Chrome browser:**  
- Length of Base64 String: 15452  
- Length of Hex String: 30948

**Results for antidetect browser without noise overlay:**  
- Length of Base64 String: 15452  
- Length of Hex String: 30948

**Results for antidetect browser with noise overlay:**  
- Length of Base64 String: 15936  
- Length of Hex String: 31916

When using noise, the length of Base64 string increased by 484 characters, in other cases the Hex values coincide.

Using this simple example, we have seen how the results change when anti-detect browsers use canvas noise.

#### Let's look at the canvas footprint using the Amazon example

On the signup page, Amazon gives 3 canvas rendering tasks.

The first and second assignments are the same, differing only in the way the result is obtained and recorded.

In the first assignment Hex is calculated by encoding the set of pixel colours, while in the second assignment the set of colours is first encoded in base64 and then in hex.

The third task is a bit different, it lacks a small part of the task responsible for rendering ‘NOT AVAILABLE’, you can see it on the images.

It should be noted that the user will get exactly the same set of tasks for drawing when trying to log in to the Amazon account.

By such a set of values received from the rendering, the web resource can determine how many devices are used to log in to the account and impose additional checks when logging in from other devices. In addition, using such a set of values obtained by different methods, the web resource with high accuracy can distinguish devices from each other, for example, several identical computers without discrete graphics card with the same processor in the same browser versions show different results from each other.

This high accuracy in device detection is achieved by several parameters: different systems render translucent tones differently, the use of fonts for rendering tasks, and emoji characters are often found in canvas.

In the above examples of canvas, Amazon checks how the Arial font will be rendered, for the text in the images this font is used, and this is justified by the fact that the Arial font is not available on many mobile devices, and on such devices the font will be replaced by a system font or similar to Arial and the rendering results will be very different from desktop devices. In tasks, in combinations, with Arial font you can often find non-existent fonts, to perform such a task the user's device will select another system font, this is done in order to identify users even more accurately. The same happens with emoji, depending on devices and operating systems, drawing emoji on canvas will also give different results.

The image on the left is the emoji in the Chrome browser on a desktop device, on the right is the emoji in the Chrome browser on an Android mobile device. Here are examples of emoji rendering results. Let's compare the length of Base64 and Hex strings results:

**Results for Chrome browser**  
- Length of Base64 String: 1480  
- Length of Hex String: 3004

**Results for Noiseless Anti-Deact Browser**  
- Length of Base64 String: 1480  
- Length of Hex String: 3004

**Results for antidetect browser with noise**  
- Length of Base64 String: 1708  
- Length of Hex String: 3460

**Results for Samsung**  
- Length of Base64 String: 2240  
- Length of Hex String: 4556

**Results for Xiaomi**  
- Length of Base64 String: 1780  
- Length of Hex String: 3604

Using the example of drawing emoji in canvas, we can see that the results on desktop devices differ significantly from the results on mobile devices.

## Checking the uniqueness of the Canvas fingerprint

Let's check the Canvas rendering results on <a href="https://browserleaks.com/canvas" target="_blank">Browserleaks</a>

In the anti-detect browser without noise overlay we got the following results:

Our Canvas footprint matches the footprints of 142 devices from the Browserleaks database. The size of the fingerprint is 4666 bytes.

Let's try to enable noise overlay and repeat the check:

When using noise, our print becomes 100% unique to Browserleaks. The size of the fingerprint has increased to 4718 bytes.

Many major anti-fraud systems check the canvas print for uniqueness, and are suspicious of users with rare prints.

Let's check how accurately users can be identified using a canvas fingerprint. For the test we will use rented servers with Ryzen 5 3600, Ryzen 7 3700X and Ryzen 9 5950X processors without video cards and Chromium 131 browser.

**Test results:**

In Chromium 131 browser we got the same results on all devices.

Let's check the canvas footprint in other versions of the Chromium browser:

Chromium v130

Chromium v129

Chromium v128

Chromium v126

Chromium v125

Chromium v123

Based on testing on different versions of the Chromium browser, there are noticeable differences in the canvas footprint between versions.

To determine how the canvas footprint changes in different browsers, let's do one last check and open the site in the browser

Chrome v130

The footprint in Chrome v130 and Chromium v130-131 browsers is completely the same.

As we can see, the canvas presented on the website cannot distinguish between users with high accuracy.

## Conclusion

As a result of our testing, we can draw conclusions about the effect of noise overlay on image rendering in different browsers. Browsers that use different fonts and do not support certain characters can produce different results.

The use of noise overlay causes significant changes to the Hex string, which can be a signal to Anti-Fraud systems.

Canvas technology itself does not have significant relevance for Anti-Fraud systems. Effective results can only be achieved in combination with other techniques used in Antifrod. But even now there is a sufficiently large amount of fake traffic using noise in canvas and detection of such traffic during the first visits to a web resource greatly simplifies the tasks for anti-fraud systems.

Let's consider a noise detection method that requires minimal computational cost. The idea of this approach came to me quite a long time ago, and I have not seen its application in anti-fraud systems.

The method consists in comparing the rendering results of the original image and its inverted version. To prevent the use of predetermined values during rendering, we apply a dynamic kanvas, where each new image contains changing elements.

The process of noise and spoofing detection involves comparing each pixel of the original image with the corresponding pixel of the inverted image. If the rendering is done correctly and without manipulation, both images should be identical. Otherwise, discrepancies should be expected, which may indicate potential spoofing or other data integrity violations.

## Test results:
Chrome browser:
<img src='/media/mdeditor/Chrome_20241028195520098291.jpg'  />

Anti-detect browser without the noise:
<img src='/media/mdeditor/ADBnot_20241028195610453234.jpg' />

Anti-detect browser using noise:
<img src='/media/mdeditor/ADBnoise_20241028195646281993.jpg' />

Samsung Chrome:
<img src='/media/mdeditor/Android_20241028195727399341.jpg' />

Xiaomi Chrome:
<img src='/media/mdeditor/xiaomi_20241028195814063105.jpg' />

This approach allows us to determine the use of noise in a canvas print with high accuracy.

In this article, we have broken down how anti-fraud systems can use canvas technology to detect fake traffic. But we should not forget that the task of an Anti-Fraud system may not be to detect noise overlay, but rather the mismatch of the canvas print with the declared browser or operating system.

In the next article we will continue the analysis of browser technologies used in Antifraud systems.

*Bannykh M.V.*

Not with us yet?