"浏览器指纹"之 "HTML5 Canvas指纹"

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

【在线测试工具】
http://t.cn/R3259jj
如附图1所示，我的谷歌浏览器的“HTML5 Canvas指纹”在49w个相同UA的浏览器中，仅有1456个相同的，唯一性高达99.71%。

【"HTML5 Canvas指纹算法"示例代码】
// 计算字符串的hash值
// 摘自http://t.cn/AiFHoZGI
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值
// 摘自http://t.cn/AiFHoZGV
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);
  }

在同一个机器上不同的Chrome和Firefox窗口测试上述代码，结果如附图2所示：
（1）Chrome窗口1、Chrome窗口2内getCanvasFp()返回的值相同；
（2）Firefox窗口getCanvasFp()返回的值不同；

• 
• 

去微博查看或评论