什么是无头浏览器(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("Chromeheadlessdetected");}
User agent 也可以从 HTTP headers 里获取。然而，这两种情况都很容易伪造。
插件 Plugins
navigator.plugins 会返回一个数组，里面是当前浏览器里的插件信息。通常，普通Chrome浏览器有一些缺省插件，比如 Chrome PDF viewer 或 Google Native Client。相反，在无头模式里，没有任何插件，返回的是个空数组。
if(navigator.plugins.length==0){console.log("ItmaybeChromeheadless");}语言
在谷歌浏览器里，有两个JavaScript属性可以获取当前浏览器的语言设置： navigator.language 和 navigator.languages。头一个是指浏览器界面的语言，后一个返回的是个数组，里面存储的是浏览器用户的所有次选语言。然而，在无头模式里，navigator.languages 返回的是个空字符串。
if(navigator.languages==""){console.log("Chromeheadlessdetected");}WebGL
WebGL 提供了一组能在HTML canvas 里执行3D渲染的API。通过这些API，我们可以查询出图形驱动的 vendor 和 renderer 。
在linux上的普通谷歌浏览器里，我们获得的 renderer 和 vendor 值为： “Google SwiftShader” 和 “Google Inc.”。
而在无头模式里，我们获得的一个是 “Mesa OffScreen”——它是没有使用任何 window 系统的渲染技术的名称，和 “Brian Paul” ——开源 Mesa 图形库的最初的程序。
varcanvas=document.createElement('canvas');vargl=canvas.getContext('webgl');vardebugInfo=gl.getExtension('WEBGL_debug_renderer_info');varvendor=gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);varrenderer=gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);if(vendor=="BrianPaul"&&renderer=="MesaOffScreen"){console.log("Chromeheadlessdetected");}
并不是所有版本的无头浏览器都有同样的这两个值。然而目前在无头浏览器里是“Mesa Offscreen” 和 “Brian Paul” 这两个值。
浏览器特征
Modernizr 可以探测出当前浏览器对HTML和CSS各种特性的支持程度。我发现，普通Chrome和无头Chrome里唯一的区别是，无头模式下没有 hairline 特征，它是用来检测是否支持 hidpi/retina hairlines的
if(!Modernizr["hairline"]){console.log("ItmaybeChromeheadless");}加载失败的图片
最后，我发现的最后一个方法，也是看起来最有效的方法，切入点是检查浏览器里不能正常加载的图片的高和宽。
在正常的Chrome里，未成功加载的图片的大小跟浏览器的zoom有关，但肯定不是零。而在无头Chrome浏览器里，这种图片的宽和高都是0。
varbody=document.getElementsByTagName("body")[0];varimage=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("Chromeheadlessdetected");}}
这就是检测无头浏览器的详细步骤。
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/40981.html；
