What is Canvas Fingerprinting, and How Does It Work?

For websites like Amazon, Facebook, and Instagram, knowing who visits their site is key for keeping it safe, studying how users act, and making their services better. For a long time, these sites have kept track of users in different ways, with cookies being the most common method. But as people have started to care more about their personal privacy, cookies aren't the only tool used anymore. New and more efficient technologies are popping up, and one of them is browser fingerprinting, with Canvas fingerprinting being a standout method.

This article will dive into Canvas fingerprinting. We'll look at what it is, how it works, its purpose, and its pros and cons. Also, we'll talk about how to avoid being tracked by Canvas fingerprinting while still keeping your privacy safe. By the end of this article, you'll have a complete understanding of this technology.

What is Canvas Fingerprinting?

Canvas fingerprinting is a tracking technology that uses the HTML5 Canvas element in web pages to track users. It creates a unique identifier by analyzing the distinct way graphics are rendered on a user's device with the Canvas element, enabling user recognition and tracking.

The HTML5 Canvas is an element in web pages used for drawing graphics, capable of displaying various visual contents, including text, shapes, and animations. Browsers on different devices produce slightly different results when rendering the Canvas due to differences in hardware and software configurations, such as font sizes, line thickness, and shadow effects of graphics. Canvas fingerprinting uses these variations to track users.

In 2012, researchers Hovav Shacham and Keaton Mowery from the University of California introduced Canvas fingerprinting. Their published paper, Pixel Perfect: Fingerprinting Canvas in HTML5, detailed how to identify and track internet users through the Canvas features of HTML5. Since then, Canvas fingerprinting has gained widespread attention and has been adopted by an increasing number of websites and online service providers over the following years.

Unlike traditional cookie tracking or IP address tracking, Canvas fingerprinting is unique due to its stealth and accuracy. This technology does not rely on any information stored on a user's device. Even if users disable cookies or use tools to anonymize their IP addresses, Canvas fingerprinting can still effectively track their activities. It forms a user's "fingerprint" by collecting information such as:

• Device model

• Browser type and version

• Operating system(OS)

• Screen resolution

• Time zone

• User-agent string

• Language settings

• Plugins

• Extensions

This aggregated data forms a user's "fingerprint". Since it's highly unlikely for two users to have identical browser data, this technology boasts an accuracy rate of up to 99% in identifying users.

BrowserScan can also detect more than 20 types of fingerprints mentioned above. If you're interested, you can click to experience it.

How Canvas Fingerprinting Works

Canvas fingerprinting uses the HTML5 Canvas API, which allows websites to draw images and text on web pages using JavaScript. When a user visits a website with a Canvas fingerprinting script, the script draws text with random fonts and sizes, as well as a random background, on the user's browser. The pixel data from the Canvas is then converted into a Base64 encoded format, and this is transformed into a unique fingerprint using a hash function.

Different computers will render the same Canvas image differently due to factors like their image processing engines, image export options, browser compression levels, and more. At the system level, different operating systems may produce different results due to using different fonts, subpixel rendering algorithms, and anti-aliasing settings.

The data that Canvas fingerprinting relies on includes:

• Operating system

• Browser

• Graphics card

• Graphics card driver

• Installed client fonts

Understanding Hash Functions

To better grasp Canvas fingerprinting, it's important to understand hashing functions. A hash function is a process that converts data of any size into a fixed-size value, while maintaining the uniqueness of the data. If the input data stays the same, the hash function will generate the same result every time. For example, if you use the SHA-256 hashing function, no matter how many times you input the word "Canvas," the hash value will be the same.

However, if there's even a small change in the input, such as "Canvas" compared to "Canvas " (with an extra space at the end), the resulting hash values will be completely different.

The hash value for "Canvas" is:
3824a9f4dafe92c6f1b80b40656a59784c03a824c27d58125d7d0ace753e2df2

The hash value for "Canvas " is:

90a297b736922fb50bb83eb58bdef9af7b1603aa1699b3fb6bee85ce638d6d54

This characteristic allows Canvas fingerprinting to generate unique hash values based on the tiny differences in the input data.

The Specific Steps of Canvas Fingerprinting

Step One: The website requests the browser to render a Canvas object through JavaScript code.

Step Two: The JavaScript code specifies a series of drawing tasks, such as drawing lines, geometric shapes in different colors, and distorted backgrounds.

Step Three: The Canvas object draws the graphics on the web page according to the script's instructions, following mathematical formulas like using points and radii to draw circles.

Step Four: Different computers will render slightly different graphics based on their own system and browser characteristics.

Step Five: This Canvas pixel data is encoded and hashed to form a nearly unique identifier — the Canvas fingerprint.

One of the great advantages of this technology is that it doesn't load anything onto the user's system; instead, it utilizes existing resources. For Canvas fingerprinting to work effectively, a database is needed to store fingerprint information. When a user revisits the website, the system generates a hash value and compares it with the fingerprint library in the database to identify return visitors or new users.

Applications of Canvas Fingerprinting

Canvas fingerprinting, as an advanced user tracking technique, has several applications in the industry. Here are some of the main uses of Canvas fingerprinting:

Content Personalization

Content providers and e-commerce websites rely on tracking user behavior to deliver needed content to users. They collect users' visit data to provide personalized services. Canvas fingerprinting is highly efficient in this respect because the fingerprints it generates are both unique and easy to obtain, and it's less intrusive than traditional cookie tracking. Companies like Netflix, Amazon, and Spotify use Canvas fingerprinting to personalize user experiences.

Personalized Advertising

One of the most widespread applications of Canvas fingerprinting is in personalized advertising. According to a 2016 research report, 74% of websites use user tracking systems, and most tracking data is used for personalized advertising. Online advertising allows advertisers to reach more people, but budget constraints limit the scale of their campaigns. With Canvas fingerprinting, advertisers can precisely target potential customers, creating specific ads for them, enhancing ad effectiveness, and ensuring a good return on investment (ROI).

Analytics and Tracking

Website analytics aim to extract insights from usage data to optimize user experience and achieve website operational goals. This process relies on accurate tracking systems to differentiate between new visitors and returners, providing analysts with key data to improve website performance strategically. Canvas fingerprinting is often used in conjunction with other technologies to ensure the accuracy of data analytics.

Preventing Abuse and Protecting

User Accounts Canvas fingerprinting is a key tool in preventing website abuse and protecting account security. It can identify devices associated with spam or malicious behavior, making it much harder for these devices to cause problems. For instance, websites can use this technology to block malicious users trying to create multiple accounts, attempt to steal passwords, or verify stolen credit cards.

Additionally, Canvas fingerprinting helps in verifying user authenticity. If a user maintains consistent fingerprint information across different login sessions, the website can reasonably judge the user's legitimacy. If there's a change in the fingerprint, the website may take measures such as email verification, sending a code, or enabling two-factor authentication to confirm the user's identity.

Canvas fingerprinting also helps websites secure their paid content and implement speed limit measures. This is particularly important for gaming and e-commerce platforms, which can use this technology to verify user identity.

Pros and Cons of Canvas Fingerprinting

As we discussed above, Canvas fingerprinting plays a crucial role for both internet users and website owners. However, it also has some drawbacks. Let's explore some of them.

Pros

Uniqueness: Canvas fingerprinting relies on the subtle differences in how each computer renders graphics, which are caused by factors such as hardware configurations, drivers, and browser versions. For instance, different computers have various ways of handling font anti-aliasing and font hinting, making the Canvas fingerprint highly unique for each machine.

Evasion of Traditional Tracking Defenses: Many users employ VPNs, ad blockers, proxy servers, and other privacy tools to prevent online tracking. However, Canvas fingerprinting can bypass these conventional privacy protections, offering websites a more refined means of identifying users.

Cons

Accuracy Issues: While Canvas fingerprinting has an accuracy of up to 99.99%, its effectiveness is less ideal in the diverse environment of mobile devices. Due to the standardized hardware and software used by mobile devices, Canvas fingerprints struggle to create unique identifiers for each user. This could lead to users with similar configurations sharing the same fingerprint on high-traffic websites, complicating data analysis.

Legal Ambiguity: Currently, there are no specific laws that clearly regulate the use of browser fingerprinting techniques. Although the European Union's General Data Protection Regulation (GDPR) requires explicit consent from users when employing such systems, it does not directly address browser fingerprinting technology. Therefore, using Canvas fingerprinting in certain specific scenarios, like providing video streaming services, may be in a legal gray area.

Privacy Concerns: With the widespread application of various data collection technologies, public concern over personal privacy has increased. The issue of websites collecting data without user consent has always been a point of contention. Although Canvas fingerprinting only collects information about users' browsers and operating systems, the private nature of this information is enough to raise privacy concerns.

How to Avoid Canvas Fingerprint Tracking

Canvas fingerprinting is a common online tracking method, but it's not undefeatable. Even though it leverages a core web technology—the HTML5 canvas element—there are ways to reduce the risk of being tracked.

Blocking Canvas Fingerprinting

1. Use Blocking Extensions: Extensions like AdBlock Plus, Mozilla Firefox's NoScript, and Google Chrome's ScriptSafe can help users fend off Canvas fingerprint tracking. They work by blocking scripts that set cookies. However, it's important to note that if you are one of the few users who use such plugins, the use of these extensions themselves might create a unique fingerprint that distinguishes you from others.

2. Disable JavaScript: Disabling JavaScript can prevent the generation of a Canvas fingerprint. However, this could impact the normal functionality of some websites.

Creating Random Canvas Fingerprints

1. Use Anti-Detection Tools: By randomizing key browser attributes (including user agent, HTTP header information, plugins, platform, screen resolution, time zone, and WebGL vendor), you can reduce the likelihood of Canvas fingerprint tracking to some extent. Firefox's CanvasBlocker plugin and Chrome's Canvas Fingerprint Defender extension are designed to help users generate constantly changing Canvas fingerprints, making tracking more difficult.

2. Manually Opt-Out of Interest-Based Advertising: You can choose to opt-out by visiting the "Network Advertising Initiative opt-out page" and marking the companies from which you don't wish to receive targeted ads.

3. Use Antidetect Browsers: Antidetect browsers can randomly generate Canvas fingerprints that match the device characteristics, thereby masking the device's real fingerprint.

Conclusion

While the aforementioned methods can help users avoid Canvas fingerprint tracking, they are not long-term solutions. Blocking Canvas fingerprinting can lead to improperly loaded web pages, and if other users display Canvas fingerprints while you do not, it could appear suspicious, potentially raising red flags for the website.

According to BrowserScan's analysis, "substitution" is often more effective than "prohibition." Considering websites' demand for user data, users might opt to replace their real fingerprints with fake random Canvas fingerprints. This approach satisfies websites' data needs while ensuring personal privacy.

There are many plugins on the market specifically designed to generate Canvas fingerprints, but their efficiency and security still require further evaluation. Among the various solutions, using a professional antidetect browser is often the most convenient way, as such browsers can almost always hide a device's real Canvas fingerprint in all scenarios.

BrowserScan can detect over 50 different attributes, including the hash value of the Canvas fingerprint. If you are using a antidetect browser, you can use BrowserScan's detection function to compare your fingerprint with the fingerprints of mainstream browsers like Chrome, Firefox, and Safari to verify its effectiveness at concealing your fingerprint.