Continuing the mini-series of posts about online security, In this installment, I’ll discuss the use of HTMLv5 for tracking purposes.
As always, before I explain how you can be tracked with this technology, I need to explain how it works, so you can understand the processes involved.
The HTMLv5 standard includes provision for a number of new elements (tags)to improve the web experience for people. One of these is the canvas element.
From the standard: “The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.”
The element acts as a container that reserves a space in the web-page window. Any items drawn within the canvas have to be generated via a script – typically JavaScript.
If the browser you are using right now supports the use of the canvas tag, then you should see a circle inside a rectangle displayed below….
If not, then you should see an error message!
As another example, if your browser supports the canvas element, then you should now see a rectangle with a red, gradient fill displayed below….
Right – so now you know what the canvas element does, let’s explain how it can be used to track you.
The canvas element works in conjunction with the HTMLv5 canvas API to allow interaction between the HTML element and Javascript.
When different web browsers process image content, they each use different image processing engines, export options, and compression algorithms.
At the pixel level – operating systems use different algorithms and settings for anti-aliasing and pixel rendering. At a more atomic level, the fluctuations in the operation of the graphics card of your PC will have a tiny, but measurable effect on how an image is drawn in the browser when using the canvas element.
These individual nuances all make for identifiable, and as such trackable attributes which can be turned into unique values by the HTML canvas API – specifically the HTMLCanvasElement.toDataURL()
So how does it work?
When you visits web page which utilises canvas tracking, the script in the web page instructs the browser to draw an item – typically this would be something you don’t even see such as a white circle on a white background.
Next, the script calls the ToDataURL method to get the canvas pixel data in dataURL format, which is a Base64 encoded representation of the binary pixel data. Finally, the script takes the hash of the text-encoded pixel data, which serves as the fingerprint.
The fingerprint can be stored and shared with advertising partners to identify users when they visit affiliated websites.
In 2014, an advertising company called AddThis admitted to trailing the use of canvas tag fingerprinting in exactly this manner.
Following media coverage, AddThis admitted it ran a five-month test using canvas fingerprinting within its web-beacon but said the canvas fingerprinting code was now disabled. Acknowledging privacy concerns, the company said it would provide more information on such tracking tests before starting one.
Device tracking
Being able to identify a device is becoming big business for advertisers, because nowadays, a device is typically used by only one person, so identify the device – identify the individual.
We used to surf the web primarily on PCs, which quite often had one account shared by all users – as such it was (and still is) fairly difficult to identify exactly which user was surfing which site.
The increased use of smartphones and tablets has meant that for most people you are the only person who uses your device for browsing which now means that if you can track the device, by extension, you are tracking the user.
HTML ping attribute
Another feature which was released with HTMLv5 is the ping attribute which is used with a hyperlink to specify a list of URLs to be notified if the user clicks the hyperlink.
When the user clicks on a hyperlink which has the ping attribute, browser will send a short HTTP POST request to the specified URL(s) identified by the ping attribute.
An example of the ping attribute can be seen below:
<a href="https://cybertrainer.uk" ping="https://www.facebook.com/trackping">
In this mock-up you can see an HTML anchor tag (<a>) which has a link to this website, but it also has a ping which tells the browser to send data to Facebook. When someone clicks the link to this site, they will also notify Facebook that they are doing so.
As you can see, this attribute is another technique useful for monitoring/tracking user browsing activity.
Final thoughts
Tracking is inevitable, both offline and online. For some its not an issue, for others it is a mere annoyance, but for others it can be quite a problem.
The more you are aware of the techniques used by marketing agencies and others to track your activities, the more you can work to limit their data harvesting.
Deleting cookies, using ad-blockers, running a pi-hole are just some of the things you can do to stop the wealth of data being used to track and profile you – all in the attempt to get you to buy more and more stuff, which you probably don’t actually need.