什么是无头浏览器(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检测当前浏览器是无头浏览器的更多相关文章

  1. JS数组去重的九种高阶方法(亲测有效)

    前言一般的方法此处也不列举了,还是有很多的,如双层循环判断是否相等,或新建数组比较再push等等,需要注意的是,使用splice方法移除元素时,有可能会导致数组塌陷问题,需要处理一下本文中介绍了多种数组去重的方法,使用了较多的高阶方法及API,并给出相应解释及语法,还有其他多种组合调用方式,原理逻辑......

  2. 详解CocosCreator优化之DrawCall

    前言在游戏开发中,DrawCall 作为一个非常重要的性能指标,直接影响游戏的整体性能表现。无论是 Cocos Creator、Unity、Unreal 还是其他游戏引擎,只要说到游戏性能优化,DrawCall 都是绝对少不了的一项。本文将会介绍什么是 DrawCall,为什么要减少 DrawCal......

  3. 详解CocosCreator制作射击游戏

    场景布置游戏资源炮塔旋转机制与之前手柄实例的小车相同,使用touchmove监听触摸事件,获取触摸位置通过位置用signAngle方法将该位置与cc.v2(1,0)位置的角度差求出(记得要加负号,比较所得逆时针为负,赋值angle逆指针为正)。所求的的角度即为最终角度。onLoad(){//初始化为......

  4. react显示文件上传进度的示例

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。在使用react, vue框架的时候, 如果需要监听文件上传可以使用axios里的onUploadProgress.react上传文件显示进度 demo前端 快速安装react应用确保有node环境npx......

  5. JavaScript中是如何定义私有变量的

    JavaScript并不像别的语言,能使用关键字来声明私有变量。我了解的JavaScript能用来声明私有变量的方式有两种,一种是使用闭包,一种是使用WeakMap。 前言 JavaScript并不像别的语言,能使用关键字来声明私有变量。我了解的JavaScript能用来声明私有变量的方式......

  6. javascript实现点击图片切换

    击实现图片切换效果在生活中非常的常见,恰巧今天的练习也是做一个图片的切换效果。HTML代码如下:<div class="img"><img src="images/1.jpg" id="myImg" class="......

  7. 整理CocosCreator常用知识点

    一、场景加载cc.director.loadScene(‘场景名称');//场景跳转cc.director.preloadScene(‘场景名称');//预加载场景cc.director.getScene();//获取当前场景二、查找节点1,节点查找node = cc.find(“Canvas/bg......

  8. JavaScript实现动态加载删除表格

    本文实例为大家分享了JavaScript实现动态加载删除表格的具体代码,供大家参考,具体内容如下代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"......

  9. 在JavaScript中查找字符串中最长单词的三种方法(推荐)

    本文基于Free Code Camp基本算法脚本“查找字符串中最长的单词”。在此算法中,我们要查看每个单词并计算每个单词中有多少个字母。然后,比较计数以确定哪个单词的字符最多,并返回最长单词的长度。在本文中,我将解释三种方法。首先使用FOR循环,其次使用sort()方法,第三次使用reduce()方......

  10. 原生JavaScript实现轮播图

    本文实例为大家分享了JavaScript实现轮播图的具体代码,供大家参考,具体内容如下效果:代码:* {margin: 0;padding: 0;}ul,li {list-style: none;}.banner {width: 1200px;height: 535px;border: 1px so......

随机推荐

  1. Python 多线程之threading 模块的使用

    简介Python 通过 _thread 和 threading 模块提供了对多线程的支持,threading 模块兼具了 _thread 模块的现有功能,又扩展了一些新的功能,具有十分丰富的线程操作功能创建线程使用 threading 模块创建线程通常有两种方式:1)使用 threading 模块中......

  2. Java泛型

    你要做一个不动声色的大人了。不准情绪化,不准偷偷想念,不准回头看。去过自己另外的生活。你要听话,不是所有的鱼都会生活在同一片海里。 ——村上春树 《舞!舞!舞!》Q:什么是泛型?Ja......

  3. python工业互联网应用实战6

    本章节我们讲述了如何通过admin.py来快速的完成页面功能的构建,并通过自定义action快速的实现了任务分解功能,并根据业务进展也逐步的完善了查看页面以内联表的方式显示作业详情。根据需求定义“任务”是一个完整的业务搬运流程,整个流程涉及到多个机构(设备)分别动作执行多个步骤,所以依据前面的模型设......

  4. Android 实现签到足迹功能

    UI 妹纸又给了个图叫我做,我一看是这样的:我们首先把这个控件划分成 几个部分:1.底下部分的直线 :2.左右两边的半圆弧度 :3.线上面的小图标 :4.最后的文字说明 :首先我们把线画出来,大概这个样子我们这里根据一个月得总天数,和一条线上需要画七个图,计算出总共需要画出的线条......

  5. 文件监控性能问题【BUG】

    文件监控性能问题【BUG】背景:JAVA写了一个文件夹目录监控的程序,使用的是org.apache.commons.io.monitor 包,项目稳定运行了一个月,现场反馈,文件夹数据处理越来越慢,等到数据推送到前端要好几分钟,于是开始了寻找问题的路程。监控代码之前写的文件监控代码问题发现我在Ap......

  6. ASP.NET Core中如何实现重定向详解

    前言ASP.NET Core 是一个跨平台,开源的,轻量级的,模块化的,用于构建高性能的 web 开发框架, ASP.NET Core MVC 内置了多种方式将一个 request 请求跳转到指定的url,这篇文章我们就来讨论如何去实现。理解 RedirectActionResultASP.NET ......

  7. C语言之漫谈指针(下)

    C语言之漫谈指针(下)在上节我们讲到了一些关于指针的基础知识:详见:C语言之漫谈指针(上)本节大纲:零.小tips一.字符指针二.指针数组与数组指针三.数组传参与指针传参四.函数指针及函数指针数组五.回调函数六.例题讲解 零.小tips在正式开始下节之前,我们先来穿插两个小tips:1.打印函数......

  8. python读取pdf格式文档

    python读取pdf文档一、 准备工作安装对应的库pip install pdfminer3kpip install pdfminer.six 二、部分变量的含义PDFDocument(pdf文档对象)PDFPageInterpreter(解释器)PDFParser(pdf文档分析器)PDFRes......

  9. CocosCreator通用框架设计之网络

    前言在 Cocos Creator 中发起一个 http 请求是比较简单的,但很多游戏希望能够和服务器之间保持长连接,以便服务端能够主动向客户端推送消息,而非总是由客户端发起请求,对于实时性要求较高的游戏更是如此。这里我们会设计一个通用的网络框架,可以方便地应用于我们的项目中。使用websocket......

  10. php中使用array_filter()函数过滤数组实例讲解

    在数组中元素的过滤上,有一种方法比较特殊,结合了回调函数的使用,通过键值来与函数进行对应。相信说到这里很多人对于这种函数方法已经很好奇了,它就是array_filter() 函数的使用。接下来我们对该函数的定义、语法、参数、返回值、实例进行全面的介绍,具体过滤方法展现如下。1、定义array_fil......