Fingerprinting as a technique to distinguish and track clients or create client IDs using Javascript

What is it about

I'm currently on a task to create a client's fingerprint on a website to recognize if he's comming back or a first-timer on my page. The whole thing shall be done with clients side Javascript only.
Some people are on this task for some time now:

• https://panopticlick.eff.org/
• http://www.heise.de/newsticker/meldung/EFF-demonstriert-den-Fingerabdruck-des-Browsers-918262.html (german)
• 
  

There is even an approach to  try Cross-Browser User Identification:

• http://fingerprint.pet-portal.eu/

And the new kid on the block - canvas fingerprinting

• http://en.wikipedia.org/wiki/Canvas_fingerprinting
• http://mobil.pcwelt.de/ratgeber/Cookies_2.0__Tracking_per_Canvas-Fingerprint-Internet-8938465.html (german)

These attempts to identify each browser / computer uniquely are depending on the browsers user-agent information as well as on infos about plugins, system-fonts, screen size, timezone etc...

Some might have heard of  the "Evercookie" or "Supercookie" a practice that places very sticky identification information in various places and via different browser accessible technology to makes it really hard to get rid of it.

An example how to get a client fingerprint:

For the impatient: find a working gist here: https://gist.github.com/splosch/eaacc83f245372ae98fe [*credits to corephp]
Executing the script will create a object "fingerprint" on the global "window" object of your browser. 

Let's try it out

Open your browser console and view the hash and the information used to create this hash by calling:

> window.fingerprint



Thats what you get:

> window.fingerprint.md5hash: "0c7dd26fd7c7d99751cb735519eaa226"

display: "{"orientation":{"onchange":null,"type":"landscape-primary","angle":0},"availWidth":1920,"availHeight":1177,"availTop":-117 ...

software: "widevinecdmadapter.plugin|widevinecdmadapter.plugin|PepperFlashPlayer.plugin|internal-remoting-viewer|intern ...

userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTM ....

Included in this demo are currently 

• Browser + Version
• Resolution, color depth
• Browser Plugins
• Operating System

Behind the sceene - creating the key

the method Collector.myDeviceHash() is hashing the concatenated infos in one compact hash

• The hashing is done in my example using  md5 checksum lib crypt:http://pajhome.org.uk/crypt/md5

"0c7dd26fd7c7d99751cb735519eaa226"


These keys represent the fingerprint of all collected information in one handy string. Unless the client changes his or her configuration or switches to a different device the fingerprint will stay the same. 

The shown script is very simple compared to version where updates to different versions of browsers or plugins can be tracked back to the original fingerprint. Panopticlick investigates more on the details of how many clients might share the same key, check the page its worth it and creepy.


Demo: https://gist.github.com/splosch/eaacc83f245372ae98fe

Credits:

• [corephp] Some code initially taken from but not entirely available anymore: http://www.corephp.com/.../browser-and-computer-fingerprinting/
• https://panopticlick.eff.org

Read More