JS浏览器/操作系统属性检测 浏览器指纹

浏览器环境使用Js可以检测的属性不仅包含浏览器的信息，同时还有操作系统，计算机硬件等信息（虽然不多）。

Chrome一直在阻止网页技术捕获用户的指纹，这是出于对于用户隐私与安全性的考虑，所以现在可用的技术可能在未来的某个版本中就不可用了。但是浏览器指纹帮助我们了解到原来还可以这么玩？而且未来Chrome也有可能授权用户给JS赋能唯一ID的能力，当然目前来看Chrome还没打算这么做。

userAgent

console.clear();

console.log("userAgent", navigator.userAgent)


console.log("language", navigator.language || navigator.userLanguage || navigator.browserLanguage || navigator.systemLanguage)

console.log("hardwareConcurrency", navigator.hardwareConcurrency);


console.log(`分辨率与可用屏幕区域 

分辨率${window.screen.width} x ${window.screen.height}

可用区域 ${window.screen.availWidth} x ${window.screen.availHeight}
`);

console.log(`获取用户时区`);
function getTimezone() {
  if (window.Intl && window.Intl.DateTimeFormat) {
      return new window.Intl.DateTimeFormat().resolvedOptions().timeZone
} else {
      return null;
}
}

console.log(getTimezone());

用户浏览器的默认语言（英语还是中文等等）

navigator.language || navigator.userLanguage || navigator.browserLanguage || navigator.systemLanguage

根据用户语言的不同给予合适的操作。比如 en的用户就加载一些国外的免费web服务（例如什么查询IP，共享评论等），zh-cn的用户因为墙的原因，可以关闭这些服务。

指明当前浏览器环境所拥有的CPU核心数

navigator.hardwareConcurrency

分辨率与可用区域分辨率

console.log(`分辨率与可用屏幕区域分辨率${window.screen.width} x ${window.screen.height}

可用区域 ${window.screen.availWidth} x ${window.screen.availHeight}
`);

获取用户的时区

if (window.Intl && window.Intl.DateTimeFormat) {
      return new window.Intl.DateTimeFormat().resolvedOptions().timeZone
} else {
      return null;
}

Intl对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比、数字格式化，和日期时间格式化。

物理像素与CSS像素的比值

window.devicePixelRatio

此属性返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值也可以被解释为像素大小的比例：即一个CSS像素的大小相对于一个物理像素的大小的比值。这个属性是有作用的，对于retina高分辨率屏幕，设置此值=2可以解决canvas文字模糊的问题。

检查浏览器是否安装了AdBlock 插件

var isExistADBlock = function() {
    var ads = document.createElement('div')
    ads.innerHTML = ' '
    ads.className = 'adsbox'
    var result = false
    try {
        // body may not exist, that's why we need try/catch
        document.body.appendChild(ads)
        result = document.getElementsByClassName('adsbox')[0].offsetHeight === 0
        document.body.removeChild(ads)
    } catch (e) {
        result = false
    }
    return result
}

检查的原理：设置一个class为adsbox的元素并添加到document.body中，adBlock插件会将这个class的元素隐藏，所以以此可以检测用户是否安装了反广告插件。

检测网页是否被自动化测试工具控制

function checkIfControlledByAutomation() {
  return !!navigator.webdriver;
}

自动化测试工具非常有名的俩个框架： GoogleChrome团队的puppeteer自动化测试框架&& selenium。它的原理很简单：自动化测试框架控制网页时候调用了浏览器的控制API，浏览器是知道自己被自动化控制了，并且浏览器设置navigator.webdriver = true来告知网页现在正在被模拟。 有的网站无法通过自动化测试框架爬取数据就是因为检测了该值。
下图是Chrome被puppeteer控制的示例。（除IE之外的所有主流浏览器都支持该属性）

用户设备是否支持手指触摸、最大触摸点数

function getMaxtouchPoints() {
    let maxTouchPoints = 0;
    if (typeof navigator.maxTouchPoints !== 'undefined') {
      maxTouchPoints = navigator.maxTouchPoints
    } else if (typeof navigator.msMaxTouchPoints !== 'undefined') {
      maxTouchPoints = navigator.msMaxTouchPoints
    }
    return maxTouchPoints;
}

canvas指纹

canvas指纹理论上可以唯一标识一个浏览器，即使用户删除了浏览器的任何隐私记录（例如cookie，localStorage，indexedDB等等），这个值在每次生成的时候都依然是相同的。

搜索引擎可以根据这个值跟踪某个人的行为与习惯。即使你每次以隐身模式访问baidu，百度依然可以确定每次访问是不是你，然后给你定向地推送广告。

工作原理

用JS创建一个canvas画布，然后在画布上面画几个图形，正方形，圆形等，然后写几个字。然后把这个canvas base64编码，最后生成base64编码的hash值，这个hash值就是canvas指纹。（hash算法可以使用非常主流的md5算法）。

为什么这个hash值能够唯一标识一个浏览器呢？

那是因为这个hash值本质上是浏览器+操作系统+GPU+图形驱动器的唯一性，任何俩个不相同的浏览器，或者不同电脑上面的相同浏览器 都会存在细丝末毫的不同，而这个不同会导致浏览器绘制的图像肉眼看起来相同，但是某几个像素点可能存在几个像素的偏移或者灰度偏移，然后生成的hash值就完全不一样了。

指纹在最新的Chrome浏览器上（version74）显示都是相同的了，或者说相同几率很高。很可能Google Chrome团队已经解决底层操作系统与硬件差异带来的这个问题了。
但是这项技术依然被广泛采用，因为根据这项技术衍生的技术还有 audio指纹，webgl指纹，fonts字体指纹。这些技术的组合叫做浏览器指纹。

var getCanvasFp = function (options) {
    options = options ? options : {};
    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://blogs.adobe.com/webplatform/2013/01/30/winding-rules-in-canvas/
    // https://github.com/Modernizr/Modernizr/blob/master/feature-detects/canvas/winding.js
    ctx.rect(0, 0, 10, 10)
    ctx.rect(2, 2, 6, 6)
    result.push('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'
    // https://github.com/Valve/fingerprintjs2/issues/66
    if (options.dontUseFakeFontInCanvas) {
      ctx.font = '11pt Arial'
    } else {
      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://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
    // http://jsfiddle.net/NDYV8/16/
    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://blogs.adobe.com/webplatform/2013/01/30/winding-rules-in-canvas/
    // http://jsfiddle.net/NDYV8/19/
    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.push('canvas fp:' + canvas.toDataURL()) }
    return result
  }

let fingerPrintRawData = getCanvasFp()[1];
let fingerPrintHash = md5(fingerPrintRawData);
document.write("浏览器指纹 ： " + fingerPrintHash);

使用参考：
https://github.com/fingerprintjs/fingerprintjs
https://github.com/AJLoveChina/fingerprintDemo
https://github.com/skillnull/DeviceJs