As a part of the various options webmasters have for displaying content in your browser, something called “canvas” can also be used for tracking. In essence, the webpage can instruct your browser to draw a picture that is not displayed. That picture tends to be unique with each user because of the various combinations of browser, fonts, screen resolution and other similar factors. The picture can be analyzed and a unique signature can be created from it. Every time you visit a website with similar code (provided by advertisers), that same unique ID can be generated afresh. Thus, simply visiting the various sites using that same browser guarantees you can be tracked even if you clean your cache totally between the various sites. The fingerprint is unique to your browser and can be recognized by servers wherever you go.
I’m sure someone could write a JScript that could block this function, but I know next to nothing about writing JScript. I suppose you could also write your own CSS code that blocks such use of canvas, but again, I know too little about that. I’ve seen it used to block various other kinds of elements, but I don’t know enough to use it as more than a very blunt instrument. Something like this:
img[src*=”gif”] { display: none !important; }
in a user stylesheet that loads in your browser would simply block all GIF images from displaying. I don’t think there’s a way to refine that so that it only blocks, say, animated GIF images. If someone knows how to craft CSS or JScript to block those hidden canvas fingerprinting elements, I’d love to know.
Meanwhile, I note that using browsers incapable of running JScript will go a long way to blocking this tracking trick, but it also makes some websites hard to read. For the most part, I read almost all websites using Lynx, which is plain text. If some crazy webmaster blocks Lynx, I find Elinks often works in its place, another kind of plaint text web browser. The linked article from RT notes that someone is working on a special Chrome browser extension called “Chameleon” that would block such privacy threats. I suppose if you know how to use things like AdBlock or other tools for blocking specific sources, you could block the primary domains from which the canvas fingerprinting bits are injected.
It’s not like we can blame anyone in particular. Users demand more eye-candy and browser developers deliver, working in concert with webmasters to come up with more ways to please the eye. Each new trick carries vulnerabilities in the sense that more complications add more weaknesses. The basic rule of CompSec has always been that user convenience and entertainment always comes at the price of greater vulnerability. It’s always convenience versus security; increase one and you lose the other. So the most secure email, for example, is webmail viewed in a plain text browser. The most secure browser is plain text only. The most secure OS has no GUI.
The war on privacy continues unabated.
Addenda: Compliments of a Slashdot commenter, another thought that hadn’t occurred to me —
Depending on what you mean by “block”, there may or may not be a properly satisfactory answer: “Block” as in “make this specific mechanism fail” is the relatively easy question. If the attacker can’t manipulate a canvas element and read the result, it won’t work. So the usual javascript blockers or more selective breaking of some or all of the canvas element (the TOR browser apparently already does this for methods that can be used to read back the contents of a canvas element, so you can still draw on one but not observe your handiwork) will do the job. Unfortunately the attacker doesn’t actually care about making your browser draw a picture, they care about achieving as accurate a UID as they can. Given that, you might actually make yourself more distinctive if your attempt to break a given fingerprinting mechanism succeeds. In the case of the TOR browser, for instance, attempts to read a canvas will always be handled as though the canvas is all opaque white. This does prevent the attacker from learning anything useful about font rendering peculiarities or other quirks of your environment’s canvas implementation; but it’s also a behavior that, for the moment at least, only the TOR browser has. Relatively uncommon. Possibly less common than the result that you’d receive from an unmodified browser. That’s the nasty thing about fingerprinting attacks. Fabricating or refusing to return many types of identifying information is relatively easy (at least once you know that attackers are looking for them); but unless you lie carefully, your fake data may actually be less common (and thus more trackable) than your real data.
So the trick is to block in such a way that makes you indistinguishable from enough other users that you are lost. Then again, maybe the question needs to take a different direction. If you can’t prevent fingerprinting, what can you do to avoid some of the negative consequences?
Ed – You can use jQuery easily to remove any canvas elements on a page. You could also use it to rewrite the id, too.
http://stackoverflow.com/questions/15598360/how-to-completely-remove-the-canvas-element-with-jquery-javascript
Although, this would run after everything is loaded, so the damage might already be done at that point.
Using vanilla javascript to do the same thing wouldn’t be too hard. I can write something up if you want.
I wasn’t asking for myself so much as a generic solution for others. If you feel moved to offer the world a bit of protection, it would be nice. Be sure to consider what credit you want to take when you write the code. The idea is to prevent it from running in the first place, of course.
Sure, I can try something out. I don’t think it will be too extensive to really warrant a “credit” line, but if it comes to that I’ll include something.
Most of all, have fun with it. Otherwise, I should think it would not be worth doing.
Here’s something that removes all canvas tags from a document. I tested this out in Opera with an external user js file. Seemed to work pretty well. Would need some kind of tweaking on certain sites in case there’s a time when a canvas provides something actually useful.
var allCanvas = document.getElementsByTagName(‘canvas’);
for (index=allCanvas.length-1; index>=0; index–) {
allCanvas[index].parentNode.removeChild(allCanvas[index]);
}
Thanks, Jay, and God bless you. I would have no idea how to add a whitelist, though.
Thanks.
Are you looking for a whitelist for certain domains? If that’s the case I could probably think something up.
Nah. There are extension for that already and they are too much work. As it was I couldn’t tell if your script did anything on Firefox. When I went to sites to test canvas functions, everything was working just fine. Maybe I don’t know how to test what your script does, and probably what you pasted gets reformatted, like the quotation marks and stuff.
You could try going to this page to see if you see the black box on the right, with the script activated. If you don’t see it, it’s working.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_empty
The script I wrote was for Opera, since it doesn’t look like other browsers have user scripts. Or do they? I didn’t look too deep into it. If other browsers do it might need tweaking.
I see a rectangle that matches the description in the code using Opera 12.x. It also shows up in Firefox; dropping the script into the basic user profile folder is supposed to load. I’m willing to bet it’s not properly formatted because WP tends to reformat stuff unless you insert with <pre> tags or something like that.
Pingback: Links of Possible Relevance, Part 7 | jaydinitto.com
Pingback: More Browser Wars: Slimjet | Do What's Right