Canvas Fingerprinting

User fingerprinting and tracking through the HTML5 canvas element

2015-01-15 — Rylan Santinon

Browser Tracking

Recent studies have been showing that the web browser can be used to fingerprint internet users.[1] There are several fingerprinting mechanisms already in use including: Flash cookies, evercookies and canvas fingerprinting as well as some novel methods including using the rendering engine, clock skew and webGL.[2] I'm going to briefly go over canvas fingerprinting and how to mitigate this attack.

Canvas

The canvas can "be used for rendering graphs, game graphics, art, or other visual images on the fly."[3] This element is useful for producing visual effects but it also potentially leaks information about the browser, operating system and rendering engine. At the time of writing, the '2d' context is the most widely-supported but it is also possible to render webGL in the canvas using a different context.

Fingerprinting

The theory behind fingerprinting with the canvas is that different systems will render text and graphics differently and therefore produce different output. Mowery and Schacham remark that "rendering a single sentence in a widely distributed system font [produces] surprising variation."[1]

A canvas fingerprint can be produced as follows:

  • Create a canvas element
  • Get a 2d context
  • Write text to the context
  • call toDataURL() to get the png data
  • Hash the data

This returns identical results for the same system and gives different values depending on the software, hardware and installed fonts.

Blocking this Attack

This attack can be mitigated by downloading a browser extension that blocks calls toDataURL() but then that would give trackers another bit of information about you. Another way of dealing with it is just blocking javascript altogether but that seems a little bit excessive.

There are some browser extensions that block the canvas element. For Firefox there is CanvasBlocker and for Chrome there is CanvasFingerprintBlock. Adblock Plus claims to be able to stop canvas tracking.[4]

canvasprint.js

I wrote some example code that exhibits this tracking mechanism: canvasprint.js


References
  1. Mowery, Keaton and Hovav Shacham. "Pixel Perfect: Fingerprinting Canvas in HTML5"
  2. Acar et al. "The Web Never Forgets: Persistent Tracking Mechanisms in the Wild"
  3. http://www.w3.org/TR/html5/
  4. http://bgr.com/2014/07/23/how-to-disable-canvas-fingerprinting/