JS常用的检测无头浏览器的方法

   1.User-Agent: 最常见的一种判断无头浏览器的方法。

      检查User-Agent。在linux计算机里  Chrome Version 59 无头浏览器的UserAgent 的值是：

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

       于是，检查是否是无头Chrome浏览器：

        # 判断‘HeadlessChrome’字符串是否包含在UserAgent中     

  if (/HeadlessChrome/.test(window.navigator.userAgent)) {

          console.log("chrome headless detected");

          }

      解决方法：

      

{"user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.81 Safari/537.36"}

  注： User Agent 也可以从HTTP headers 里获取。然而，这两种情况都容易伪造

 

  2. 插件 Plugins

       navigator.plugins 会返回一个数组，里面是当前浏览器的插件信息。通常，普通Chrome浏览器

       有一些缺省插件，比如Chrome PDF viewer 或 Google Native Client. 相反，在无头模式里，没有

       任何插件，返回的是个空数组。     

  if (navigator.plugins.length == 0) {

         console.log("It may be Chrome headless")

         }

    解决办法：

navigator.plugins=[1,2,3,4,5]  # 方法1
navigator.plugins || [1,2,3,4,5]  # 方法2

   注：也可以替换最终的赋予值（根据实际环境）  

3. 语言

      在谷歌浏览器里，有两个JavaScript属性可以获取当前浏览器的语言设置：

      navigator.language 和 navigator.languages。 第一个是指浏览器界面的语言，后一个返回的是一个数组，

      里面存储的是浏览器用户的所有次选语言。然而，在无头模式里，navigator.languages返回的是个

      空字符串

navigator.language="zh-CN"

   4.  WebGL

        WebGL 提供了一组能在HTML canvas里执行3D渲染的APO.通过这些API.我们可以查询出图形驱动

        的vendor 和 render。

       在 Linux 上的普通谷歌浏览器里，我们获得的renderer 和 vendor 的值为： ‘Google SwiftShader’

       和 ‘Google Inc.’。

       在无头模式里，，我们获得的一个是 ‘MesaOffScreen’ --- 他是没有使用任何 window 系统的

       渲染技术的名称， 和‘ Brian Paul’ ---开源Mesa 图形库的最初的程序。

      var canvas = document.create.createElement('canvas');

      var gl = canvas.getContext('webgl')

      var debugInfo = gl.getExtension('WEBGL_debug_render_info');

      var vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);

      var renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);

      if (vendor == 'Brian Pual'  && renderer == "Mesa offScreen") {

         console.log("chrome headless detected");

       }

     注： 并不是所有版本的无头浏览器都有同样的这两个值。然而目前在无头浏览器里是 “MesaOffscreen”

     和 “Brian Pual” 这两个值。

   5. 浏览器特征： Modernizr 可以探测出当前浏览器对HTML和CSS各种特性的支持程度。我发现，普通

       Chrome 和 无头Chrome里唯一的区别是，无头模式下没有hairline特征。 他是用来检测是否支持

       hidpi/retina hairlines的

   6. 加载失败的图片

       检查切入点是检查浏览器不能正常加载图片的宽和高。

       在正常的Chrome里面，未成功加载的图片跟浏览器的zoom有关，但肯定不是零。

       而在无头浏览器里，这中图片的宽和高都是0。

      var body = document.getElementsByTagName("body")[0];

      var image = document.createElement("img");

      image.src = "http://iloveponeydotcom32188.jg";

      image.setAtturibute("id","fakeimage");

      body.appendChild(image);

      image.onerror = function(){

      if (image.width == 0 && image.height == 0){

           console.log(chrome headless detected);

           }

      }

image.length=100;  # 可以使用mitmproxy 在代码中进行替换，为图片指定宽高
image.width=100;

    原文地址： http://www.webhek.com/post/detecting-chrome-headless.html