教你怎么用JavaScript检测当前浏览器是无头浏览器

3.jpg

什么是无头浏览器(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 提供了一组能在HTML canvas 里执行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");
  }
 }

这就是检测无头浏览器的详细步骤

更多学习内容观看我的知乎：打造全网web高级前端工程师资料库（总目录）看完学的更加快，知识更牢固。你值得拥有（持续更新）~