浏览器指纹之 HTML5 Canvas指纹技术

     

在HTML5中可以使用JS + Canvas标签生成图片，利用”canvas.toDataURL()”可以获取到图片的Base64码。
同样的JS Canvas绘图代码，在同一个浏览器下生成的图片是相同的（字节码相同）。
但是由于系统的差别、渲染引擎的不同，同样的JS Canvas绘图代码，在不同的浏览器下得到的图片也是不同的（字节码不同。注意：也有相同的可能，但是概率较小）。
利用上述原理，同一段JS Canvas绘图代码，返回生成图片的HASH值作为“HTML5 Canvas指纹”。

【在线测试工具】
https://browserleaks.com/canvas
如附图1所示，我的谷歌浏览器的“HTML5 Canvas指纹”在793798 个相同UA的浏览器中，仅有317个相同的，唯一性高达99.96%。

 

【”HTML5 Canvas指纹算法”示例代码】
// 计算字符串的hash值

 

?

1 2 3 4 5 6 7 8 9 10

function hashstr(s){ var hash = 0; if (s.length == 0) return hash; for (i = 0; i < s.length; i++) {   char = s.charCodeAt(i);   hash = ((hash<<5)-hash)+char;   hash = hash & hash; // Convert to 32bit integer } return hash; }

　　

 使用canvas绘图，并返回图片的Base64码对应的hash值

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

function getCanvasFp() {     var result = "";     // Very simple now, need to make it more complex (geo shapes etc)     var canvas = document.createElement('canvas');     canvas.width = 2000;     canvas.height = 200;     canvas.style.display = 'inline';     var ctx = canvas.getContext('2d');     // detect browser support of canvas winding     // http://t.cn/R7wzrRy     // http://t.cn/AiFHoZG5     ctx.rect(0, 0, 10, 10);     ctx.rect(2, 2, 6, 6);     result += 'canvas winding:' + ((ctx.isPointInPath(5, 5, 'evenodd') === false) ? 'yes' : 'no');       ctx.textBaseline = 'alphabetic';     ctx.fillStyle = '#f60';     ctx.fillRect(125, 1, 62, 20);     ctx.fillStyle = '#069';     // http://t.cn/AiFHoZGx     ctx.font = '11pt no-real-font-123';       ctx.fillText('Cwm fjordbank glyphs vext quiz, \ud83d\ude03', 2, 15);     ctx.fillStyle = 'rgba(102, 204, 0, 0.2)';     ctx.font = '18pt Arial';     ctx.fillText('Cwm fjordbank glyphs vext quiz, \ud83d\ude03', 4, 45);       // canvas blending     // http://t.cn/AiFHoZGt     // http://t.cn/AiFHoZGM     ctx.globalCompositeOperation = 'multiply';     ctx.fillStyle = 'rgb(255,0,255)';     ctx.beginPath();     ctx.arc(50, 50, 50, 0, Math.PI * 2, true);     ctx.closePath();     ctx.fill();     ctx.fillStyle = 'rgb(0,255,255)';     ctx.beginPath();     ctx.arc(100, 50, 50, 0, Math.PI * 2, true);     ctx.closePath();     ctx.fill();     ctx.fillStyle = 'rgb(255,255,0)';     ctx.beginPath();     ctx.arc(75, 100, 50, 0, Math.PI * 2, true);     ctx.closePath();     ctx.fill();     ctx.fillStyle = 'rgb(255,0,255)';     // canvas winding     // http://t.cn/R7wzrRy     // http://t.cn/AiFHoZGf     ctx.arc(75, 75, 75, 0, Math.PI * 2, true);     ctx.arc(75, 75, 25, 0, Math.PI * 2, true);     ctx.fill('evenodd');       if (canvas.toDataURL) {         result += ';canvas fp:' + canvas.toDataURL();     }     return hashstr(result);   }

　　文章转自：http://www.68xi.com/991.html