如何用JavaScript检测当前浏览器是无头浏览器


Posted in Javascript onApril 27, 2021

什么是无头浏览器(headless browser)?

无头浏览器是指可以在图形界面情况下运行的浏览器。我可以通过编程来控制无头浏览器自动执行各种任务,比如做测试,给网页截屏等。

为什么叫“无头”浏览器?

“无头”这个词来源于最初的“无头计算机(Headless computer)”。维基百科关于的“无头计算机”词条:

无头系统(headless system)是指已配置为无须显示器(即“头”)、键盘和鼠标操作的计算机系统或设备。无头系统通常通过网络连接控制,但也有部分无头系统的设备需要通过RS-232串行连接进行设备的管理。服务器通常采用无头模式以降低运作成本。

为什么要检测无头浏览器?

除了之前提到的两种无害的使用案例,无头浏览器可以被用来自动执行恶意任务。最常见的形式是做网络爬虫,或伪装访问量,或探测网站漏洞。

一个非常流行的无头浏览器是Phantomjs,因为它是基于 Qt框架,所以跟我们常见的浏览器相比有很多不同的特征,因此有很多方法判断出它。

但是,从chrome 59开始,谷歌发布了一款无头谷歌浏览器。它跟Phantomjs不同,它是基于正统的谷歌浏览器开发出来的,不是基于其它的框架,这让程序很难区分出它是正常浏览器还是无头浏览器。

下面,我们将介绍几种判断程序是运行在普通浏览器还是无头浏览器里的方法。

检测无头浏览器

注意:这些方法只是在四种设备 (2 Linux, 2 Mac) 里测试过,也就是说, 肯定还有其他很多方法检测无头浏览器。

User agent

先介绍使用做最常见的一种判断浏览器种类的方法,检查User agent。在linux计算机里Chrome version 59无头浏览器的User agent值是:

“Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (Khtml, like Gecko) HeadlessChrome/59.0.3071.115 Safari/537.36”

于是,我们可以这样检测是否是无头Chrome浏览器:

if (/HeadlessChrome/.test(window.navigator.userAgent)) {
  console.log("Chrome headless detected");
 }

User agent 也可以从 HTTP headers 里获取。然而,这两种情况都很容易伪造。

插件 Plugins

navigator.plugins 会返回一个数组,里面是当前浏览器里的插件信息。通常,普通Chrome浏览器有一些缺省插件,比如 Chrome PDF viewer 或 Google Native Client。相反,在无头模式里,没有任何插件,返回的是个空数组。

if(navigator.plugins.length == 0) {
  console.log("It may be Chrome headless");
}

语言

在谷歌浏览器里,有两个JavaScript属性可以获取当前浏览器的语言设置: navigator.language 和 navigator.languages。头一个是指浏览器界面的语言,后一个返回的是个数组,里面存储的是浏览器用户的所有次选语言。然而,在无头模式里,navigator.languages 返回的是个空字符串。

if(navigator.languages == "") {
  console.log("Chrome headless detected");
}

WebGL

WebGL 提供了一组能在htmlcanvas 里执行3D渲染的API。通过这些API,我们可以查询出图形驱动的 vendor 和 renderer 。

在linux上的普通谷歌浏览器里,我们获得的 renderer 和 vendor 值为: “Google SwiftShader” 和 “Google Inc.”。

而在无头模式里,我们获得的一个是 “Mesa OffScreen”——它是没有使用任何 window 系统的渲染技术的名称,和 “Brian Paul” ——开源 Mesa 图形库的最初的程序。

var canvas = document.createElement('canvas');
 var gl = canvas.getContext('webgl');
  
 var debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
 var vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
 var renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
  
 if(vendor == "Brian Paul" && renderer == "Mesa OffScreen") {
  console.log("Chrome headless detected");
 }

并不是所有版本的无头浏览器都有同样的这两个值。然而目前在无头浏览器里是“Mesa Offscreen” 和 “Brian Paul” 这两个值

浏览器特征

Modernizr 可以探测出当前浏览器对HTML和css各种特性的支持程度。我发现,普通Chrome和无头Chrome里唯一的区别是,无头模式下没有 hairline 特征,它是用来检测是否支持 hidpi/retina hairlines的

if(!Modernizr["hairline"]) {
  console.log("It may be Chrome headless");
}

加载失败的图片

最后,我发现的最后一个方法,也是看起来最有效的方法,切入点是检查浏览器里不能正常加载的图片的高和宽。

在正常的Chrome里,未成功加载的图片的大小跟浏览器的zoom有关,但肯定不是零。而在无头Chrome浏览器里,这种图片的宽和高都是0。

var body = document.getElementsByTagName("body")[0];
var image = document.createElement("img");
image.src = "http://iloveponeydotcom32188.jg";
image.setAttribute("id", "fakeimage");
body.appendChild(image);
image.onerror = function(){
	if(image.width == 0 && image.height == 0) {
		console.log("Chrome headless detected");
	}
}

以上就是如何用JavaScript检测当前浏览器是无头浏览器的详细内容,更多关于JavaScript的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
小程序富文本提取图片可放大缩小
May 26 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 Javascript
如何利用js在两个html窗口间通信
Apr 27 #Javascript
如何使JavaScript休眠或等待
Apr 27 #Javascript
JavaScript 实现页面滚动动画
如何用JS实现网页瀑布流布局
分享几个JavaScript运算符的使用技巧
Apr 24 #Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
You might like
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
javascript 有用的脚本函数
2009/05/07 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
javascript中new关键字详解
2015/12/14 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
实现Python与STM32通信方式
2019/12/18 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
python中os.remove()用法及注意事项
2021/01/31 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
个人查摆剖析材料
2014/02/04 职场文书
太太口服液广告词
2014/03/20 职场文书
先进党组织事迹材料
2014/12/26 职场文书
教师节主题班会教案
2015/08/17 职场文书
使用JS实现简易计算器
2021/06/14 Javascript
Python 中的Sympy详细使用
2021/08/07 Python