• 指纹浏览器之JS的10种浏览器/操作系统属性检测

    3. 在线工具

    1. userAgent

    navigator.userAgent
    这估计是最常见的浏览器属性检测方式了，可以大概得知浏览器种类以及版本号（虽然不是100%准确）JS Bin


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

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


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

    navigator.hardwareConcurrency
    貌似用处不大 ^_^ JS Bin


    4. 分辨率与可用区域分辨率

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

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

可用区域 ${window.screen.availWidth} x ${window.screen.availHeight}
`);
    你会发现屏幕分辨率与可用区域分辨率很可能不一样，这是因为用户的桌面下方往往是操作系统的导航栏。所以浏览器可用的区域就减少了呀。
    而且即使你把浏览器设置全屏，依然是可能不同的。而且如果你的电脑有俩个显示器，你可以试试浏览器网页在不同的显示器上面得到的结果是不一样的。jsbin


    5. 获取用户的时区

    if (window.Intl && window.Intl.DateTimeFormat) {
      return new window.Intl.DateTimeFormat().resolvedOptions().timeZone
} else {
      return null;
}
    Intl对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比、数字格式化，和日期时间格式化。更多信息参考MDN jsbin


    6. 物理像素与CSS像素的比值

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


    7. 检查浏览器是否安装了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的元素隐藏，所以以此可以检测用户是否安装了反广告插件。jsbin 演示

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

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

    Chrome被puppeteer控制后，navigator.webdriver返回true


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

    function getMaxtouchPoints() {
    let maxTouchPoints = 0;
    if (typeof navigator.maxTouchPoints !== 'undefined') {
      maxTouchPoints = navigator.maxTouchPoints
    } else if (typeof navigator.msMaxTouchPoints !== 'undefined') {
      maxTouchPoints = navigator.msMaxTouchPoints
    }
    return maxTouchPoints;
}
    这个检测最大作用就是检测用户的设备是否支持手指触摸
    我们看一下手机上面运行的截图 jsbin地址

    10. canvas指纹

    好了到了我最想介绍的话题了，本篇文章的主题。

    什么是canvas指纹？

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

    那么有什么用？

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

    它的工作原理是什么？

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

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

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

    那么它是百分百准确的吗？

    不是！在我们测试过程中发现，这个指纹在最新的Chrome浏览器上（version74）显示都是相同的了，或者说相同几率很高。很可能Google Chrome团队已经解决底层操作系统与硬件差异带来的这个问题了。

    但是这项技术依然被广泛采用，因为根据这项技术衍生的技术还有 audio指纹，webgl指纹，fonts字体指纹。这些技术的组合叫做浏览器指纹。

    Oh my god， so 百度还是能知道每次访问是不是我！是滴，很难受。。。

    说了这么多，show me the code ！（额，代码比较长，这里直接给出jsbin的链接吧）

    关于audio，webgl，canvas 等指纹的更多信息可以访问我写的一个Github Demo，有在线演示的小栗子哦。