browserleaks

browserleaks.markdown

browserleaks

fingerprinting webusers based on canvas pixelrendering src: http://www.browserleaks.com/canvas

A Pen by Tankred on CodePen.

License.

index.html

<canvas id="drawing"></canvas>

script.js

var canvas = document.getElementById("drawing");
var ctx = canvas.getContext("2d");
// text with lowercase/uppercase/punctuation symbols
var txt = "BrowserLeaks,com <canvas> 1.0";
ctx.textBaseline = "top";
// the most common type
ctx.font = "14px 'Arial'";
ctx.textBaseline = "alphabetic";
ctx.fillStyle = "#f60";
ctx.fillRect(125,1,62,20);
// some tricks for color mixing
ctx.fillStyle = "#069";
ctx.fillText(txt, 2, 15);
ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
ctx.fillText(txt, 4, 17);

// code is simple but we must provide some conversion functions
// it is still less and faster than md5
 
function bin2hex (s) {
    // ... bin-to-hex conversion code ...
}
 
if (typeof window.atob == "undefined") {
    function atob(a) {
    // IE9 still has not atob() function (base64-to-binary)
    // ... you must put some replacement here ...
    }
}
 
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));