如何用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学习笔记二 实现可编辑的表格
Apr 09 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
如何利用js在两个html窗口间通信
Apr 27 #Javascript
如何使JavaScript休眠或等待
Apr 27 #Javascript
JavaScript 实现页面滚动动画
如何用JS实现网页瀑布流布局
分享几个JavaScript运算符的使用技巧
Apr 24 #Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
You might like
PHP操作XML作为数据库的类
2010/12/19 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
浅谈php冒泡排序
2014/12/30 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
Js的MessageBox
2006/12/03 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
Python中for循环详解
2014/01/17 Python
Python使用functools实现注解同步方法
2018/02/06 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
Python日志模块logging基本用法分析
2018/08/23 Python
python调用百度语音识别api
2018/08/30 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
python tkinter canvas使用实例
2019/11/04 Python
Django中FilePathField字段的用法
2020/05/21 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
三星印度官网:Samsung印度
2019/08/03 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
八一建军节活动方案
2014/02/10 职场文书
机修工工作职责
2014/02/21 职场文书
体操比赛口号
2014/06/10 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
python文件名批量重命名脚本实例代码
2021/04/22 Python
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android