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之外的所有主流浏览器都支持该属性)
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,有在线演示的小栗子哦。