JavaScript怎麼偵測目前瀏覽器是無頭瀏覽器

什麼是無頭瀏覽器(headless browser)？

無頭瀏覽器是指可以在圖形介面情況下執行的瀏覽器。我可以透過程式設計來控制無頭瀏覽器自動執行各種任務，例如做測試，給網頁截圖等。

為什麼叫「無頭」瀏覽器？

「無頭」這個字源自於最初的「無頭電腦(Headless computer)」。維基百科關於的「無頭電腦」詞條：

無頭系統（headless system）是指已配置為無須顯示器（即「頭」）、鍵盤和滑鼠操作的電腦系統或設備。無頭系統通常透過網路連接控制，但也有部分無頭系統的設備需要透過RS-232串列連接進行設備的管理。伺服器通常採用無頭模式以降低運作成本。

為什麼要偵測無頭瀏覽器？

除了先前提到的兩個無害的使用案例，無頭瀏覽器可以被用來自動執行惡意任務。最常見的形式是做網路爬蟲，或偽裝訪問量，或探測網站漏洞。

一個非常流行的無頭瀏覽器是PhantomJS，因為它是基於Qt 框架，所以跟我們常見的瀏覽器相比有很多不同的特徵，因此有很多方法判斷出它。

但是，從chrome 59開始，Google發布了一款無頭Google瀏覽器。它跟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");
 }

語言

在Google瀏覽器裡，有兩個JavaScript屬性可以取得目前瀏覽器的語言設定： navigator.language 和navigator.languages。頭一個是指瀏覽器介面的語言，後者回傳的是數組，裡面儲存的是瀏覽器使用者的所有次選語言。然而，在無頭模式裡，navigator.languages 回傳的是個空字串。

if(navigator.languages == "") {
  console.log("Chrome headless detected");
 }

WebGL

WebGL 提供了一組能在HTML canvas 裡執行3D渲染的API。透過這些API，我們可以查詢出圖形驅動的 vendor 和 renderer 。

在linux上的普通Google瀏覽器裡，我們得到的 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");
  }
 }

这就是检测无头浏览器的详细步骤

推荐教程：《JS教程》

以上是JavaScript怎麼偵測目前瀏覽器是無頭瀏覽器的詳細內容。更多資訊請關注PHP中文網其他相關文章！