Wie erkennt JavaScript, dass 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.

ist Was ist ein „headless“ Browser?

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

Ein Headless-System bezieht sich auf ein System, das ohne Monitor (also „Kopf“), Tastatur und ein Computersystem oder -gerät konfiguriert ist per Maus bedient. 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 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, verfügt er im Vergleich zu unseren gängigen Browsern über viele unterschiedliche Funktionen, sodass es viele Möglichkeiten gibt, daraus zu urteilen .

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), und das heißt, Es gibt sicherlich viele andere Möglichkeiten, Headless-Browser zu erkennen.

Benutzeragent

Lassen Sie uns zunächst die gebräuchlichste Methode zur Bestimmung des Browsertyps vorstellen, 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");
 }

User Agent can kann auch aus HTTP-Headern gewonnen werden. Allerdings sind beide Fälle leicht zu fälschen.

Plugins 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 aktuelle Browser-Spracheinstellung 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.“.

而在无头模式里，我们获得的一个是 “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教程》

Das obige ist der detaillierte Inhalt vonWie erkennt JavaScript, dass der aktuelle Browser ein Headless-Browser ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!