JavaScript は、現在のブラウザがヘッドレスブラウザであることをどのように検出しますか?-jsチュートリアル-php.cn

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

hzc

リリース： 2020-06-22 10:14:08

転載

2771 人が閲覧しました

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

ヘッドレスブラウザとは、グラフィカルインターフェイスで実行できるブラウザを指します。ヘッドレスブラウザを制御して、テストの実行や 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 サイトの他の関連記事を参照してください。