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;
