Verwenden Sie JavaScript, um zu erkennen, ob der aktuelle Browser ein Headless-Browser ist

Was ist ein Headless-Browser?

Headless Browser bezieht sich auf einen Browser, der mit einer grafischen Oberfläche ausgeführt werden kann. Ich kann den Headless-Browser so steuern, dass er durch Programmierung automatisch verschiedene Aufgaben ausführt, z. B. Tests durchführen, Screenshots von Webseiten erstellen usw.

Warum wird er als „kopfloser“ Browser bezeichnet?

Das Wort „headless“ kommt vom ursprünglichen „headless computer“. Wikipedia-Eintrag zum Thema „Headless Computer“:

Ein Headless-System bezieht sich auf ein Computersystem, das für den Betrieb ohne Monitor (d. h. „Kopf“), Tastatur und Mausausrüstung konfiguriert wurde. Headless-Systeme werden normalerweise über eine Netzwerkverbindung gesteuert, einige Headless-Systemgeräte erfordern jedoch eine Geräteverwaltung über eine serielle RS-232-Verbindung. Server verwenden normalerweise den Headless-Modus, um die Betriebskosten zu senken.

Warum sollten wir Headless-Browser erkennen?

Zusätzlich zu den beiden zuvor genannten harmlosen Anwendungsfällen können Headless-Browser zur Automatisierung bösartiger Aufgaben verwendet werden. Die häufigste Form besteht darin, das Web zu crawlen, Traffic zu fälschen oder Schwachstellen auf Websites zu erkennen.

Ein sehr beliebter Headless-Browser ist PhantomJS. Da er auf dem Qt-Framework basiert, weist er im Vergleich zu unseren gängigen Browsern viele verschiedene Funktionen auf, sodass es viele Möglichkeiten gibt, ihn zu identifizieren.

Allerdings veröffentlichte Google ab Chrome 59 ein kopfloses Google Chrome. Der Unterschied zu PhantomJS besteht darin, dass es auf Basis des orthodoxen Google Chrome und nicht auf anderen Frameworks entwickelt wurde, was es für das Programm schwierig macht, zu unterscheiden, ob es sich um einen normalen Browser oder einen Headless-Browser handelt.

Im Folgenden stellen wir verschiedene Methoden vor, um festzustellen, ob ein Programm in einem normalen Browser oder einem Headless-Browser ausgeführt wird.

Headless-Browser erkennen

Hinweis: Diese Methoden wurden nur auf vier Geräten getestet (2 Linux, 2 Mac). Mit anderen Worten, es muss viele andere Methoden geben, um Headless-Browser zu erkennen .

Benutzeragent

Stellen Sie zunächst die gebräuchlichste Methode zur Bestimmung des Browsertyps vor, nämlich die Überprüfung des Benutzeragenten. Der User-Agent-Wert des Headless-Browsers Chrome Version 59 auf einem Linux-Computer lautet:

"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/59.0.3071.115 Safari/537.36 „

So können wir wie folgt erkennen, ob es sich um einen Headless-Chrome-Browser handelt:

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

Der Benutzeragent kann auch aus HTTP-Headern abgerufen werden. Allerdings sind beide Fälle leicht zu fälschen.

Plugins

navigator.plugins gibt ein Array zurück, das die Plug-in-Informationen im aktuellen Browser enthält. Normalerweise verfügt der normale Chrome-Browser über einige Standard-Plug-Ins, z. B. Chrome PDF Viewer oder Google Native Client. Im Headless-Modus hingegen gibt es keine Plugins und es wird ein leeres Array zurückgegeben.

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

Sprache

In Google Chrome gibt es zwei JavaScript-Eigenschaften, die die aktuellen Browser-Spracheinstellungen abrufen können: navigator.sprache und navigator.sprachen. Der erste bezieht sich auf die Sprache der Browseroberfläche und der zweite gibt ein Array zurück, in dem alle Sprachen der zweiten Wahl des Browserbenutzers gespeichert sind. Im Headless-Modus gibt navigator.linguals jedoch eine leere Zeichenfolge zurück.

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

WebGL

WebGL bietet eine Reihe von APIs, die 3D-Rendering im HTML-Canvas durchführen können. Über diese APIs können wir den Hersteller und Renderer des Grafiktreibers abfragen.

Im normalen Google Chrome unter Linux erhalten wir folgende Renderer- und Herstellerwerte: „Google SwiftShader“ und „Google Inc.“

Im Headless-Modus erhalten wir „Mesa OffScreen“ – es ist der Name der Rendering-Technologie, die kein Fenstersystem verwendet, und „Brian Paul“ – die Originalquelle der Open Source Mesa-Grafikbibliotheksprogramm.

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");
}

Nicht alle Versionen von Headless-Browsern haben die gleichen zwei Werte. Allerdings gibt es derzeit in Headless-Browsern zwei Werte: „Mesa Offscreen“ und „Brian Paul“.

Browserfunktionen

Modernizr kann die Unterstützung des aktuellen Browsers für verschiedene Funktionen von HTML und CSS erkennen. Ich habe festgestellt, dass der einzige Unterschied zwischen normalem Chrome und Headless-Chrome darin besteht, dass es im Headless-Modus keine Haarlinienfunktion gibt. Sie wird verwendet, um zu erkennen, ob Hidpi-/Retina-Haarlinien unterstützt werden.

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

Bild konnte nicht geladen werden

Schließlich ist die letzte Methode, die ich gefunden habe, auch die effektivste Methode. Der Ausgangspunkt besteht darin, die Höhe und Breite von Bildern zu überprüfen, die nicht normal im Browser geladen werden können.

In normalem Chrome hängt die Größe des nicht erfolgreich geladenen Bildes mit dem Zoom des Browsers zusammen, ist aber definitiv nicht Null. Im Headless-Chrome-Browser betragen Breite und Höhe dieses Bildes jeweils 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");
    }
}

Empfohlenes Tutorial: „Javascript-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonVerwenden Sie JavaScript, um zu erkennen, ob der aktuelle Browser ein Headless-Browser ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!