如何使用JavaScript檢測當前瀏覽器是無頭瀏覽器

這篇文章將為大家詳細講解有關如何使用JavaScript檢測當前瀏覽器是無頭瀏覽器，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

javascript是一種什么語言

javascript是一種動態類型、弱類型的語言，基于對象和事件驅動并具有相對安全性并廣泛用于客戶端網頁開發的腳本語言，同時也是一種廣泛用于客戶端Web開發的腳本語言。它主要用來給HTML網頁添加動態功能，現在JavaScript也可被用于網絡服務器，如Node.js。

什么是無頭瀏覽器(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 提供了一組能在htmlcanvas 里執行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");
	}
}

關于“如何使用JavaScript檢測當前瀏覽器是無頭瀏覽器”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。