指纹浏览器之JS的10种浏览器/操作系统属性检测
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 jsbin6. 物理像素与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之外的所有主流浏览器都支持该属性）
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，有在线演示的小栗子哦。