What is Canvas Fingerprinting and how the companies use it to track you online

Recently Mozilla planned to display permission prompts if a website attempt to use HTML5 Canvas Image Data in the Firefox web browser: in fact, this HTML5 element is often used to tracking users with a technique called “Canvas Fingerprinting”

What is “Canvas Fingerprinting”?

Canvas fingerprinting is a type of “browser fingerprinting” techniques of tracking online users that allow websites to uniquely identify and track visitors using HTML5 canvas element instead of browser cookies or other similar means.

A “fingerprint” is primarily based on browser, operating system, and installed graphics hardware, so not sufficient to uniquely identify users by itself: therefore, this fingerprint could be combined with other sources of entropy to provide a unique identifier.

Canvas fingerprinting works by exploiting the HTML5 canvas element: when a user visits a website their browser is instructed to “draw” a hidden line of text or 3D graphic that is then rendered into a single digital token, a potentially unique identifier to track users without any actual identifier persistence on the machine.

Variations on installed GPU model, operating system and overall system performances cause the variations in the rendered digital token.

Generated token can be stored and shared with advertising partners to identify users when they visit affiliated website and can be used to create a profile in order to customize the advertising.

The fingerprinting technology emerged about two years ago: the site Browserleaks has created a fingerprinting demonstration that you can run in your browser, provided that it supports HTML5 Canvas and that JavaScript is enabled on the site.

 

For more technical information about this technique, you can read this paper by Keaton Mowery and Hovav ShachamPixel Perfect: Fingerprinting Canvas in HTML5

We have demonstrated that the behavior of <canvas> text and WebGL scene rendering on modern browsers forms a new system fingerprint.
The new fingerprint is consistent, high-entropy, orthogonal to other fingerprints, transparent to the user, and readily obtainable.

Keaton Mowery has also published a framework for collecting and viewing graphical browser fingerprints, freely available on github: https://github.com/kmowery/canvas-fingerprinting

If you need a full-features library for browser fingerprinting, tou can take a look at Fingerprintjs2:

List of fingerprinting sources

  1. UserAgent
  2. Language
  3. Color Depth
  4. Screen Resolution
  5. Timezone
  6. Has session storage or not
  7. Has local storage or not
  8. Has indexed DB
  9. Has IE specific ‘AddBehavior’
  10. Has open DB
  11. CPU class
  12. Platform
  13. DoNotTrack or not
  14. Full list of installed fonts (maintaining their order, which increases the entropy), implemented with Flash.
  15. A list of installed fonts, detected with JS/CSS (side-channel technique) – can detect up to 500 installed fonts without flash
  16. Canvas fingerprinting
  17. WebGL fingerprinting
  18. Plugins (IE included)
  19. Is AdBlock installed or not
  20. Has the user tampered with its languages
  21. Has the user tampered with its screen resolution
  22. Has the user tampered with its OS
  23. Has the user tampered with its browser
  24. Touch screen detection and capabilities
  25. Pixel Ratio
  26. System’s total number of logical processors available to the user agent.

How the companies use this information?

I suggest you to read this article by propublica.org:

Like other tracking tools, canvas fingerprints are used to build profiles of users based on the websites they visit — profiles that shape which ads, news articles, or other types of content are displayed to them.

But fingerprints are unusually hard to block: They can’t be prevented by using standard Web browser privacy settings or using anti-tracking tools such as AdBlock Plus.

The researchers found canvas fingerprinting computer code, primarily written by a company called AddThis, on 5 percent of the top 100,000 websites. Most of the code was on websites that use AddThis’ social media sharing tools. Other fingerprinters include the German digital marketer Ligatus and the Canadian dating site Plentyoffish.

A list of all the websites on which researchers found the code is here.

How I can avoid the tracking?

Currently there is no native option available to turn off the Canvas functionality in Firefox, add-ons are available that block sites from using Canvas.
These add-ons (CanvasBlocker and Canvas Defender) displays notifications and blocks requests depending on how they are configured.

Mozilla plans to integrate a permissions prompt natively in the Firefox web browser.

Otherwise, you can use TorBrowser that already has this feature:

“In Tor Browser, we have opted to have the canvas return white image data until the user has accepted a doorhanger UI that flips a site permission to either enable or permanently block canvas access from that site,”

developers wrote. Now that feature comes to Firefox, Mozilla said.


References

Turn static HTML into a web application with MAVO

Without programming skills and without backends

Mavo is a javascript library that extends HTML and allow the rapid development of simple web applications:

– Mavo extends the syntax of HTML to describe Web applications that manage, store, and transform data.

– Store data in the cloud, locally, or not at all by just changing an HTML attribute

– Edit data right in the website, with an intuitive, auto-generated, customizable interface. No more wrestling with CMSes and servers!

– Multimedia uploads in your page via drag & drop, pasting, or browsing, without a single line of code.

– Perform calculations right in the HTML, that update when needed. No need to write JavaScript!

All you need to do to use Mavo in any HTML page is to include its two files:

<link rel=”stylesheet” href=”https://get.mavo.io/mavo.css">

No programming code to write and no servers to manage: you can make any element editable and saveable, or turn HTML elements into a collection, with customizable controls for adding items, deleting items, and rearranging items via drag and drop, just by adding one HTML attribute to it.

The web application data can be stored locally in the browser, on Github or on Dropbox.


An example?

Let’s try to create an editable page, with this simple code:

https://gist.github.com/andreafortuna/e20721a82a9d53955470b3b838c0ca08

You can see the result here: http://apps.andreafortuna.org/mavo/index.html

Some highlights:

  • mv-app=”homepage” set the app a name and activate Mavo on the page
  • property attributes identify the elements that will become editable and will be saved.
  • mv-storage defines where the data will be stored.
  • mv-plugins=”tinymce” loads the TinyMCE plugin for rich text editing, and class=”tinymce” tells Mavo to edit this element via TinyMCE.

My opinion about MAVO?

Funny and interesting but still immature.
Certainly useful for small projects and simple webapps that can be done in minutes, but not yet usable on real projects.

Take a look to the project website:

http://mavo.io