浏览器指纹

总监和我说：你看下如何拿到浏览器指纹，然后传给我就可以。我一脸懵逼了，不知道浏览器指纹是啥，抱着学习和好奇的心态就去网上查了相关资料。下面我学习过程和成果。

什么是浏览器指纹

拿一个相机来解释，相机可以通过它的输出来进行识别和区分，每台相机都会在图片上留下独特的噪声样式，通过观察两张照片并比较它们的噪声样式，我们可以准确地判定这是否是同一台相机所拍摄。

同样的原则，浏览器具有辨识度的信息，比如硬件类型、操作系统、用户代理、系统字体、语言、屏幕尺寸、时区差等等众多信息，所选取的信息决定了浏览器指纹的准确性。

使用cookie记录用户所有行为的唯一信息不就完了吗？NO，网民对个人隐私的重视。不少浏览器允许或引导用户关闭cookie功能，比如很多主流浏览器都有一个“隐私模式浏览”功能。还有，我们随时使用浏览器的快捷键清除缓存，这样在两次访问的区间就无法识别是否同一个用户。

怎么使用浏览器指纹

如果需要在线登陆的账号，比如社交网络账号，一般情况下只需要通过邮箱和密码就可以登陆，如果有一天小偷盗取了你的登陆凭证并试图从他的设备上登陆，社交网络是可以检测到这种异常行为的，因为浏览器指纹发生了变化，为了防止被诈骗，平台可能会要求你做出进一步的授权，比如短信验证码。

Canvas指纹

根据我们项目需求采用Canvas指纹。从根本上来说，每一种浏览器都会使用不同的图像处理引擎，不同的导出选项，不同的压缩等级，所以每一台电脑绘制出的图形都会有些许不同，这些图标可以被用来给用户设备分配特定编号（指纹），也就是说可以用来识别不同用户。

function bin2hex(str) {
    var result = "";
    for (var i = 0; i < str.length; i++ ) {
        result += int16_to_hex(str.charCodeAt(i));
    }
    return result;
}

function int16_to_hex(i) {
    var result = i.toString(16);
    var j = 0;
    while (j+result.length < 4){
        result = "0" + result;
        j++;
    }
    return result;
}
// 生成uuid
function get_uuid(){
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var txt = window.location.host;
    ctx.textBaseline = "top";
    ctx.font = "14px 'Arial'";
    ctx.textBaseline = "tencent";
    ctx.fillStyle = "#f60";
    ctx.fillRect(125,1,62,20);
    ctx.fillStyle = "#069";
    ctx.fillText(txt, 2, 15);
    ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
    ctx.fillText(txt, 4, 17);

    var b64 = canvas.toDataURL().replace("data:image/png;base64,","");
    var bin = atob(b64);
    var crc = bin2hex(bin.slice(-16,-12));
    return crc;
}
console.log(get_uuid())

测试结果表明，同一个浏览器访问该域时候生成的UUID总是不变，和其他浏览器生成的或者其他设备生成的不完全相同的。出现这种情况可能是有几个：

1. 在图片格式上，不同web浏览器使用了不同的图形处理引擎、不同的图片导出选项、不同的默认压缩级别等。
2. 在像素级别来看，操作系统各自使用了不同的设置和算法来进行抗锯齿和子像素渲染操作，就像每台相机拍出不同的相片画质和像素。
3. 即使是相同的绘图操作，最终产生的图片数据在hash层面上依然是不同。