浏览器指纹--纯js拿到浏览器指纹

序言：

　　前两天有接收到一下问题，如何拿到浏览器指纹中的位置信息和CPU，在这之前完全没有接触过浏览器指纹，抱着学习和好奇的心态，就去网上查了大量的资料。下面我将学习过程和成果贴出来给大家。

步骤

1、什么是浏览器指纹？

　　一般情况下，网站或者广告商都想要一种技术可以在网络上精确的定位到每一个个体，这样就可以通过收集这些个体的数据，然后加以分析之后更加精确的去推送广告和其他的一些活动。Cookie技术是非常受欢迎的一种。当用户访问一个网站时，网站可以在用户当前的浏览器Cookie中永久植入一个含有唯一标示符（UUID）的信息，并通过这个信息将用户所有行为（浏览了哪些页面？搜索了哪些关键字？对什么感兴趣？点了哪些按钮？用了哪些功能？看了哪些商品？把哪些放入了购物车等等）关联起来。

　　而随着网民对个人隐私的重视，Cookie越来越不受待见。不少安全工具甚至是浏览器都开始允许或引导用户关闭Cookie功能，比如很多主流浏览器都有一个“隐私模式浏览”功能。同时，我们可以很方便的使用浏览器的快捷键清除缓存，这样在两次访问的区间也就无法识别是否是同一个用户，这样一来，网站就很难追踪用户行为了。

　　这个时候浏览器指纹也就应运而生。什么是浏览器指纹呢？而随着网民对个人隐私的重视，Cookie越来越不受待见。不少安全工具甚至是浏览器都开始允许或引导用户关闭Cookie功能，比如很多主流浏览器都有一个“隐私模式浏览”功能。这样以来，网站就很难追踪用户行为了。

2、浏览器指纹追踪

2.1、基本指纹

　　基本指纹是任何浏览器都具有的特征标识，比如硬件类型（Apple）、操作系统（Mac OS）、用户代理（User agent）、系统字体、语言、屏幕分辨率、浏览器插件 (Flash, Silverlight, Java, etc)、浏览器扩展、浏览器设置 (Do-Not-Track, etc)、时区差（Browser GMT Offset）等众多信息，这些指纹信息“类似”人类的身高、年龄等，有很大的冲突概率，只能作为辅助识别。

硬件类型：

操作系统：navigator.platform

用户代理（浏览器类型）：navigator.userAgent

浏览器版本号：navigator.appVersion

浏览器是否启动cookie：navigator.cookieEnabled

cpu等级：navigator.cpuClass

cpu虚拟核心数：navigator.hardwareConcurrency

系统语言：navigator.language

屏幕分辨率：window.screen

浏览器插件：navigator.plugins

时差区：new Date().getTimezoneOffset()   //-480  （负值是东区，480分钟为8小时，所以中国是东八区）

颜色质量：window.screen.colorDepth

flash插件情况：

//判断是否IE
function isIe(){
   var i=navigator.userAgent.toLowerCase().indexOf("msie");
 return i>=0;
}
//判断是否firefox
function isFireFox(){
    var i=navigator.userAgent.toLowerCase().indexOf("firefox");
 return i>=0;
}

//拿到浏览器指纹的位置  

navigator.geolocation.getCurrentPosition(success, error, options)

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function success(pos) {
  var crd = pos.coords;

  console.log('Your current position is:');
  console.log('Latitude : ' + crd.latitude);
  console.log('Longitude: ' + crd.longitude);
  console.log('More or less ' + crd.accuracy + ' meters.');
};

function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
};

navigator.geolocation.getCurrentPosition(success, error, options);

注意：拿到位置信息，在PC端的时候必须在打开VPN的情况。

2.2、高级指纹

　　基本指纹就像是人的外貌特征，外貌可以用男女、身高、体重区分，然而这些特征不能对某个人进行唯一性标识，仅使用基本指纹也无法对客户端进行唯一性判定，基于HTML5的诸多高级指纹对此提供了新思路。

（1）在cookie中种入UUID

　　下面是具体的实现方法

function rand(len) {
    var hex = "0123456789abcdef",
        str = "",
        index = 0;
    for (len = len || 32; len > index; index++) {
        str += hex.charAt(Math.ceil(1e8 * Math.random()) % hex.length);
    }
    return str;
}

var uuid = (new Date).getTime() + "_" + rand();

　　但是随着互联网对个人隐私的重视，cookie越来越不受待见，不少安全工具甚至是浏览器都开始允许或引导用户关闭Cookie功能。这就导致使用cookie的收效甚微。这时候，人们看到了Canvas指纹。

（2）Canvas指纹

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

function bin2hex(s) {
  var i, l, o = '',
    n;

  s += '';

  for (i = 0, l = s.length; i < l; i++) {
    n = s.charCodeAt(i)
      .toString(16);
    o += n.length < 2 ? '0' + n : n;
  }

  return o;
}

function getUUID(domain) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");
    var txt = domain;
    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(getUUID("https://www.baidu.com/"));

　　测试结果表明，同一浏览器访问该域时生成的CRC校验码总是不变。可以简单理解为同样的HTML Canvas元素绘制操作，在不同的操作系统不同的浏览器上，产生的图片内容其实是不完全相同的。出现这种情况可能是有几个原因：

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

2.3、硬件指纹

　　硬件指纹主要通过检测硬件模块获取信息，作为对基于软件的指纹的补充，主要的硬件模块有：GPU’s clock frequency、Camera、Speakers/Microphone、Motion sensors、GPS、Battery等。

　　未完待续...