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