JavaScript は、現在のブラウザがヘッドレス ブラウザであることをどのように検出しますか?

ヘッドレスブラウザとは何ですか?

ヘッドレス ブラウザとは、グラフィカル インターフェイスで実行できるブラウザを指します。ヘッドレス ブラウザを制御して、テストの実行や Web ページのスクリーンショットの取得など、プログラミングを通じてさまざまなタスクを自動的に実行できます。

是「ヘッドレス」ブラウザとは何ですか?

「ヘッドレス」という言葉は、元の「ヘッドレス コンピューター」に由来します。 Wikipedia の「ヘッドレス コンピューター」のエントリ:

ヘッドレス システムとは、モニター (つまり「ヘッド」)、キーボード、および操作されるコンピューター システムまたはデバイスなしで構成されたシステムです。ネズミ。ヘッドレス システムは通常、ネットワーク接続を通じて制御されますが、一部のヘッドレス システム デバイスでは RS-232 シリアル接続によるデバイス管理が必要です。サーバーは通常、運用コストを削減するためにヘッドレス モードを使用します。

ヘッドレス ブラウザを検出する必要があるのはなぜですか?

前述の 2 つの無害な使用例に加えて、ヘッドレス ブラウザを使用して悪意のあるタスクを自動化することもできます。最も一般的な形式は、Web をクロールしたり、トラフィックを偽装したり、Web サイトの脆弱性を検出したりすることです。

非常に人気のあるヘッドレス ブラウザは PhantomJS です。これは Qt フレームワークに基づいているため、一般的なブラウザと比較して多くの異なる機能を備えているため、判断する方法がたくさんあります。それ。

ただし、Chrome 59 から、Google はヘッドレス Google Chrome をリリースしました。 PhantomJS との違いは、他のフレームワークではなく、オーソドックスな Google Chrome をベースに開発されているため、プログラムが通常のブラウザかヘッドレス ブラウザかを区別することが困難です。

以下では、プログラムが通常のブラウザで実行されているかヘッドレス ブラウザで実行されているかを判断するいくつかの方法を紹介します。

ヘッドレス ブラウザの検出

注: これらの方法は 4 台のデバイス (Linux 2 台、Mac 2 台) でのみテストされています。ヘッドレス ブラウザを検出する方法は他にもたくさんあります。

ユーザー エージェント

まず、ブラウザの種類を判断する最も一般的な方法として、ユーザー エージェントを確認する方法を紹介します。 Linux コンピュータの場合、Chrome バージョン 59 ヘッドレス ブラウザのユーザー エージェント値は次のとおりです:

"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML、Gecko など) HeadlessChrome/ 59.0.3071.115 Safari/537.36”

したがって、次のようにヘッドレス Chrome ブラウザであるかどうかを検出できます。

 if (/HeadlessChrome/.test(window.navigator.userAgent)) {
  console.log("Chrome headless detected");
 }

ユーザー エージェントは次のようにすることができます。 HTTP ヘッダーからも取得されます。ただし、どちらの場合も簡単に偽造されます。

Plugins Plugins

navigator.plugins は、現在のブラウザのプラグイン情報を含む配列を返します。通常、通常の Chrome ブラウザには、Chrome PDF ビューアや Google ネイティブ クライアントなど、いくつかのデフォルトのプラグインが含まれています。対照的に、ヘッドレス モードではプラグインは存在せず、空の配列が返されます。

 if(navigator.plugins.length == 0) {
  console.log("It may be Chrome headless");
 }

Language

Google Chrome には、現在のブラウザ言語設定を取得できる 2 つの JavaScript プロパティ、navigator. language と navigator があります。言語。最初のものはブラウザ インターフェイスの言語を参照し、後者はブラウザ ユーザーが第 2 に選択したすべての言語を格納する配列を返します。ただし、ヘッドレス モードでは、navigator.langages は空の文字列を返します。

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

WebGL

WebGL は、HTML キャンバスで 3D レンダリングを実行できる API のセットを提供します。これらの API を通じて、グラフィックス ドライバーのベンダーとレンダラーにクエリを実行できます。

Linux 上の通常の Google Chrome では、取得するレンダラとベンダーの値は「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 中国語 Web サイトの他の関連記事を参照してください。