Chrome Canvas Fingerprint

Question

I experimented with Canvas Fingerprinting to provide a different level of user identification for my database ... This is a layer that I know how an experienced hacker can get around to creating a fingerprint on the client side, but hey, the more security levels, the better ?

Unfortunately, every Windows 7 computer I’m testing the fingerprint for Google Chrome produces the same fingerprint. For example, go to this jsfiddle: http://jsfiddle.net/af1pL6fb/5/ All Win7 / Chrome machines that I used result in a hash of 503251348. If so many different users get the same hash, the fingerprint is useless.

I tried to draw all kinds of random things on the canvas so that every computer produces a slightly different result - like a theory - but with everything I try, every Chrome browser continues to give the same results.

Does anyone know why Chrome behaves when other browsers of other computers give me different results (as expected)?

Or does anyone know something that I can include in the canvas to encourage different results?

Or does anyone know of another metric that I can use to distinguish between computers? For example, I consider the navigator.mimeType array as a potential way to get a semi-unique indicator for a specific browser.

Here is my fingerprint function:

function fingerprint() { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var txt = 'i9asdm..$#po((^@KbXrww!~cz'; ctx.textBaseline = "top"; ctx.font = "16px 'Arial'"; ctx.textBaseline = "alphabetic"; ctx.rotate(.05); ctx.fillStyle = "#f60"; ctx.fillRect(125,1,62,20); ctx.fillStyle = "#069"; ctx.fillText(txt, 2, 15); ctx.fillStyle = "rgba(102, 200, 0, 0.7)"; ctx.fillText(txt, 4, 17); ctx.shadowBlur=10; ctx.shadowColor="blue"; ctx.fillRect(-20,10,234,5); var strng=canvas.toDataURL(); var hash=0; if (strng.length==0) return; for (i = 0; i < strng.length; i++) { char = strng.charCodeAt(i); hash = ((hash<<5)-hash)+char; hash = hash & hash; } return hash; } 

Answer 1

There is a library called fingerprint.js that seems to work very well.

• It will receive an imprint for customers without HTML 5.
• Turning on the canvas will increase accuracy if available.
• If enabled, it can create a more unique fingerprint based on plugins installed in the browser (although it’s not sure why you need it)

I have included this script on my website and you can get the fingerprint here for testing. It works incognito in the same browser, and Chrome gets fingerprints differently on other computers.

I will try to work on business logic to try to associate fingerprints with the same people. Obviously, this is difficult on a dead site, such as mine, where there are few requests, but it is worth it to strike.

---

You can try using 32-bit CRC in PNG as described on this site . atob not supported in IE <= 9.

 var b64 = canvas.toDataURL.replace("data:image/png;base64,",""); var bin = atob(b64); // crc32 takes only 4 bytes and placed from 16 to 12 byte from the end of file var crc = bin2hex(bin.slice(-16,-12)); 

My signature was FE72FC19 based on this method.