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

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. languages があります。最初のものはブラウザ インターフェイスの言語を参照し、後者はブラウザ ユーザーが第 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」と、オープン ソースの元の名前である「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");
}

ヘッドレス ブラウザのすべてのバージョンが同じ 2 つの値を持つわけではありません。ただし、現在ヘッドレス ブラウザには、「Mesa Offscreen」と「Brian Paul」という 2 つの値があります。

ブラウザ機能

Modernizr は、HTML および CSS のさまざまな機能に対する現在のブラウザのサポートを検出できます。通常の Chrome とヘッドレス Chrome の唯一の違いは、ヘッドレス モードにはヘアライン機能がないことです。これは、hidpi/retina ヘアラインがサポートされているかどうかを検出するために使用されます。

if(!Modernizr["hairline"]) {
    console.log("It may be Chrome headless");
}

画像の読み込みに失敗しました

最後に、私が見つけた最後の方法も最も効果的な方法ですが、出発点は、ブラウザに正常に読み込むことができない画像の高さと幅を確認することです。

通常の Chrome では、ロードに失敗した画像のサイズはブラウザのズームに関係しますが、決してゼロではありません。ヘッドレス 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 ビデオ チュートリアル 」

以上がJavaScript を使用して、現在のブラウザがヘッドレス ブラウザかどうかを検出しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。