So erkennen Sie, ob es sich beim aktuellen Browser um einen Headless-Browser mit JavaScript handelt

Was ist ein Headless-Browser?

Ein Headless-Browser ist ein Browser, der mit einer grafischen Benutzeroberfläche ausgeführt werden kann. Ich kann den Headless-Browser programmgesteuert steuern, sodass er automatisch verschiedene Aufgaben ausführt, z. B. Tests durchführt, Screenshots von Webseiten erstellt usw.

Warum wird er als „Headless“-Browser bezeichnet?

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

Ein Headless-System ist ein Computersystem oder -gerät, das für den Betrieb ohne Monitor (d. h. „Kopf“), Tastatur und Maus konfiguriert wurde. Headless-Systeme werden normalerweise über eine Netzwerkverbindung gesteuert, einige Headless-Systemgeräte erfordern für die Geräteverwaltung jedoch auch eine serielle RS-232-Verbindung. Um die Betriebskosten zu senken, werden Server häufig im Headless-Modus ausgeführt.

Warum Headless-Browser erkennen?

Neben den beiden zuvor erwähnten harmlosen Anwendungsfällen können Headless-Browser auch zur Automatisierung bösartiger Aufgaben verwendet werden. Die häufigsten Formen sind Webcrawler, die den Datenverkehr verschleiern oder Schwachstellen auf Websites erkennen.

Ein sehr beliebter Headless-Browser ist Phantomjs. Da er auf dem Qt-Framework basiert, weist er im Vergleich zu unseren üblichen Browsern viele andere Funktionen auf, sodass es viele Möglichkeiten gibt, ihn zu identifizieren.

Ab Chrome 59 hat Google jedoch einen Headless-Browser Google Chrome veröffentlicht. Es unterscheidet sich von Phantomjs. Es wird auf Basis des herkömmlichen Google Chrome entwickelt und nicht auf Basis anderer Frameworks. Dadurch ist es für das Programm schwierig zu unterscheiden, ob es sich um einen normalen Browser oder einen Headless-Browser handelt.

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

Erkennen von Headless-Browsern

Hinweis: Diese Methoden wurden nur auf vier Maschinen (2 Linux, 2 Mac) getestet. Allerdings gibt es sicherlich noch viele andere Möglichkeiten, Headless-Browser zu erkennen.

Benutzeragent

Stellen wir zunächst die gängigste 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, wie Gecko) HeadlessChrome/59.0.3071.115 Safari/537.36“

So können wir erkennen, ob es sich um einen Chrome-Browser ohne Header handelt:

wenn (/HeadlessChrome/.test(window.navigator.userAgent)) {
  console.log("Chrome-Headless erkannt");
 }

Der Benutzeragent kann auch aus HTTP-Headern abgerufen werden. Allerdings lassen sich beide Szenarien leicht vortäuschen.

Plugins

navigator.plugins gibt ein Array zurück, das die Plugin-Informationen im aktuellen Browser enthält. Normalerweise verfügen normale Chrome-Browser über einige Standard-Plugins, wie etwa den Chrome PDF Viewer oder den Google Native Client. Im Gegensatz dazu wird im Headless-Modus ohne Plug-ins ein leeres Array zurückgegeben.

wenn (navigator.plugins.length == 0) {
  console.log("Es könnte sich um Chrome ohne Header handeln");
}

Sprache

In Google Chrome gibt es zwei JavaScript-Eigenschaften, mit denen die aktuellen Spracheinstellungen des Browsers abgerufen werden können: navigator.language und navigator.languages. Der erste bezieht sich auf die Sprache der Browseroberfläche und der zweite gibt ein Array zurück, das alle vom Browserbenutzer ausgewählten Sekundärsprachen speichert. Im Headless-Modus gibt navigator.languages ​​​​jedoch eine leere Zeichenfolge zurück.

if (navigator.sprachen ​​== "") {
  console.log("Chrome-Headless erkannt");
}

WebGL

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

In einem normalen Google Chrome-Browser unter Linux erhalten wir die Renderer- und Anbieterwerte als: „Google SwiftShader“ und „Google Inc.“.

Und im Headless-Modus erhalten wir „Mesa OffScreen“ – das ist der Name der Rendering-Technologie, die kein Fenstersystem verwendet, und „Brian Paul“ – der ursprüngliche Programmierer der Open-Source-Grafikbibliothek Mesa.

 var Leinwand = Dokument.createElement('Leinwand');
 var gl = canvas.getContext('webgl');
  
 var debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
 var Anbieter = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
 var renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
  
 if (Anbieter == "Brian Paul" && Renderer == "Mesa OffScreen") {
  console.log("Chrome-Headless erkannt");
 }

Nicht alle Versionen von Headless-Browsern haben für diese beiden die gleichen Werte. Derzeit lauten die Werte in Headless-Browsern jedoch „Mesa Offscreen“ und „Brian Paul“.

Browserfunktionen

Modernizr kann die Unterstützung verschiedener HTML- und CSS-Funktionen durch den aktuellen Browser erkennen. Der einzige Unterschied, den ich zwischen dem normalen Chrome und dem Headless-Chrome festgestellt habe, besteht darin, dass es im Headless-Modus keine Haarlinienfunktion gibt, mit der festgestellt wird, ob Hidpi-/Retina-Haarlinien unterstützt werden.

wenn (!Modernizr["Haarlinie"]) {
  console.log("Es könnte sich um Chrome ohne Header handeln");
}

Bild konnte nicht geladen werden

Die letzte Methode, die ich gefunden habe und die am besten zu funktionieren scheint, besteht darin, die Höhe und Breite des Bildes zu überprüfen, das im Browser nicht richtig geladen wird.

Im normalen Chrome hängt die Größe des Bildes, das nicht erfolgreich geladen werden konnte, mit dem Zoom des Browsers zusammen, ist aber definitiv nicht Null. Im Headless-Chrome-Browser betragen die Breite und Höhe dieses Bildes beide 0.

var body = document.getElementsByTagName("body")[0];
var Bild = Dokument.createElement("img");
image.src = "http://iloveponeydotcom32188.jg";
image.setAttribute("id", "gefälschtes Bild");
body.appendChild(Bild);
Bild.beiFehler = Funktion(){
	wenn(Bild.Breite == 0 && Bild.Höhe == 0) {
		console.log("Chrome-Headless erkannt");
	}
}

Oben finden Sie Einzelheiten dazu, wie Sie mithilfe von JavaScript feststellen können, ob der aktuelle Browser ein Headless-Browser ist. Weitere Informationen zu JavaScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!