如何用JavaScript檢測(cè)當(dāng)前瀏覽器是無(wú)頭瀏覽器
什么是無(wú)頭瀏覽器(headless browser)?
無(wú)頭瀏覽器是指可以在圖形界面情況下運(yùn)行的瀏覽器。我可以通過(guò)編程來(lái)控制無(wú)頭瀏覽器自動(dòng)執(zhí)行各種任務(wù),比如做測(cè)試,給網(wǎng)頁(yè)截屏等。
為什么叫“無(wú)頭”瀏覽器?
“無(wú)頭”這個(gè)詞來(lái)源于最初的“無(wú)頭計(jì)算機(jī)(Headless computer)”。維基百科關(guān)于的“無(wú)頭計(jì)算機(jī)”詞條:
無(wú)頭系統(tǒng)(headless system)是指已配置為無(wú)須顯示器(即“頭”)、鍵盤(pán)和鼠標(biāo)操作的計(jì)算機(jī)系統(tǒng)或設(shè)備。無(wú)頭系統(tǒng)通常通過(guò)網(wǎng)絡(luò)連接控制,但也有部分無(wú)頭系統(tǒng)的設(shè)備需要通過(guò)RS-232串行連接進(jìn)行設(shè)備的管理。服務(wù)器通常采用無(wú)頭模式以降低運(yùn)作成本。
為什么要檢測(cè)無(wú)頭瀏覽器?
除了之前提到的兩種無(wú)害的使用案例,無(wú)頭瀏覽器可以被用來(lái)自動(dòng)執(zhí)行惡意任務(wù)。最常見(jiàn)的形式是做網(wǎng)絡(luò)爬蟲(chóng),或偽裝訪(fǎng)問(wèn)量,或探測(cè)網(wǎng)站漏洞。
一個(gè)非常流行的無(wú)頭瀏覽器是Phantomjs,因?yàn)樗腔?Qt框架,所以跟我們常見(jiàn)的瀏覽器相比有很多不同的特征,因此有很多方法判斷出它。
但是,從chrome 59開(kāi)始,谷歌發(fā)布了一款無(wú)頭谷歌瀏覽器。它跟Phantomjs不同,它是基于正統(tǒng)的谷歌瀏覽器開(kāi)發(fā)出來(lái)的,不是基于其它的框架,這讓程序很難區(qū)分出它是正常瀏覽器還是無(wú)頭瀏覽器。
下面,我們將介紹幾種判斷程序是運(yùn)行在普通瀏覽器還是無(wú)頭瀏覽器里的方法。
檢測(cè)無(wú)頭瀏覽器
注意:這些方法只是在四種設(shè)備 (2 Linux, 2 Mac) 里測(cè)試過(guò),也就是說(shuō), 肯定還有其他很多方法檢測(cè)無(wú)頭瀏覽器。
User agent
先介紹使用做最常見(jiàn)的一種判斷瀏覽器種類(lèi)的方法,檢查User agent。在linux計(jì)算機(jī)里Chrome version 59無(wú)頭瀏覽器的User agent值是:
“Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (Khtml, like Gecko) HeadlessChrome/59.0.3071.115 Safari/537.36”
于是,我們可以這樣檢測(cè)是否是無(wú)頭Chrome瀏覽器:
if (/HeadlessChrome/.test(window.navigator.userAgent)) { console.log("Chrome headless detected"); }
User agent 也可以從 HTTP headers 里獲取。然而,這兩種情況都很容易偽造。
插件 Plugins
navigator.plugins 會(huì)返回一個(gè)數(shù)組,里面是當(dāng)前瀏覽器里的插件信息。通常,普通Chrome瀏覽器有一些缺省插件,比如 Chrome PDF viewer 或 Google Native Client。相反,在無(wú)頭模式里,沒(méi)有任何插件,返回的是個(gè)空數(shù)組。
if(navigator.plugins.length == 0) { console.log("It may be Chrome headless"); }
語(yǔ)言
在谷歌瀏覽器里,有兩個(gè)JavaScript屬性可以獲取當(dāng)前瀏覽器的語(yǔ)言設(shè)置: navigator.language 和 navigator.languages。頭一個(gè)是指瀏覽器界面的語(yǔ)言,后一個(gè)返回的是個(gè)數(shù)組,里面存儲(chǔ)的是瀏覽器用戶(hù)的所有次選語(yǔ)言。然而,在無(wú)頭模式里,navigator.languages 返回的是個(gè)空字符串。
if(navigator.languages == "") { console.log("Chrome headless detected"); }
WebGL
WebGL 提供了一組能在htmlcanvas 里執(zhí)行3D渲染的API。通過(guò)這些API,我們可以查詢(xún)出圖形驅(qū)動(dòng)的 vendor 和 renderer 。
在linux上的普通谷歌瀏覽器里,我們獲得的 renderer 和 vendor 值為: “Google SwiftShader” 和 “Google Inc.”。
而在無(wú)頭模式里,我們獲得的一個(gè)是 “Mesa OffScreen”——它是沒(méi)有使用任何 window 系統(tǒng)的渲染技術(shù)的名稱(chēng),和 “Brian Paul” ——開(kāi)源 Mesa 圖形庫(kù)的最初的程序。
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"); }
并不是所有版本的無(wú)頭瀏覽器都有同樣的這兩個(gè)值。然而目前在無(wú)頭瀏覽器里是“Mesa Offscreen” 和 “Brian Paul” 這兩個(gè)值
瀏覽器特征
Modernizr 可以探測(cè)出當(dāng)前瀏覽器對(duì)HTML和css各種特性的支持程度。我發(fā)現(xiàn),普通Chrome和無(wú)頭Chrome里唯一的區(qū)別是,無(wú)頭模式下沒(méi)有 hairline 特征,它是用來(lái)檢測(cè)是否支持 hidpi/retina hairlines的
if(!Modernizr["hairline"]) { console.log("It may be Chrome headless"); }
加載失敗的圖片
最后,我發(fā)現(xiàn)的最后一個(gè)方法,也是看起來(lái)最有效的方法,切入點(diǎn)是檢查瀏覽器里不能正常加載的圖片的高和寬。
在正常的Chrome里,未成功加載的圖片的大小跟瀏覽器的zoom有關(guān),但肯定不是零。而在無(wú)頭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檢測(cè)當(dāng)前瀏覽器是無(wú)頭瀏覽器的詳細(xì)內(nèi)容,更多關(guān)于JavaScript的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- NodeJS和瀏覽器中this關(guān)鍵字的不同之處
- JavaScript 判斷瀏覽器是否是IE
- JavaScript實(shí)現(xiàn)瀏覽器網(wǎng)頁(yè)自動(dòng)滾動(dòng)并點(diǎn)擊的示例代碼
- JavaScript 如何在瀏覽器中使用攝像頭
- 如何使用 JavaScript 操作瀏覽器歷史記錄 API
- JS跨瀏覽器解析XML應(yīng)用過(guò)程詳解
- 手機(jī)瀏覽器喚起微信分享(JS)
- 瀏覽器JavaScript調(diào)試功能無(wú)法使用解決方案
- JavaScript常用工具函數(shù)匯總(瀏覽器環(huán)境)
- 基于js實(shí)現(xiàn)判斷瀏覽器類(lèi)型代碼實(shí)例
相關(guān)文章
按鍵測(cè)試,支持像 Ctrl+Alt+Shift+T 的組合鍵
按鍵測(cè)試,支持像 Ctrl+Alt+Shift+T 的組合鍵...2006-10-10js實(shí)現(xiàn)div層緩慢收縮與展開(kāi)的方法
這篇文章主要介紹了js實(shí)現(xiàn)div層緩慢收縮與展開(kāi)的方法,通過(guò)javascript自定義函數(shù)實(shí)現(xiàn)div層的收縮與展開(kāi)效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05require簡(jiǎn)單實(shí)現(xiàn)單頁(yè)應(yīng)用程序(SPA)
下面小編就為大家?guī)?lái)一篇require簡(jiǎn)單實(shí)現(xiàn)單頁(yè)應(yīng)用程序(SPA)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07javascript高級(jí)模塊化require.js的具體使用方法
本篇文章主要介紹了javascript高級(jí)模塊化require.js的具體使用方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10javascript中創(chuàng)建對(duì)象的三種常用方法
在javascript中創(chuàng)建對(duì)象的三種方法,腳本之家以前發(fā)布過(guò)有簡(jiǎn)單實(shí)例版的,大家可以參考下。2010-12-12兼容最新firefox、chrome和IE的javascript圖片預(yù)覽實(shí)現(xiàn)代碼
這篇文章主要介紹了兼容最新firefox、chrome和IE的javascript圖片預(yù)覽實(shí)現(xiàn)代碼,測(cè)試了瀏覽器firefox6、firefox12、chrome 25.0.1364.172 m、IE6-IE10 都兼容,需要的朋友可以參考下2014-08-08javascript ready和load事件的區(qū)別示例介紹
ready是在DOM加載完成就觸發(fā);load是在加載完所有頁(yè)面內(nèi)容才會(huì)觸發(fā),下為大家簡(jiǎn)要介紹下,不知道的朋友可以參考下2013-08-08