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.

[embed]https://www.youtube.com/watch?v=p0doExrQwY0[/embed]

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 Shacham: Pixel 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