Comment JavaScript détecte-t-il que le navigateur actuel est un navigateur sans tête ?

Qu'est-ce qu'un navigateur sans interface ?

Le navigateur sans tête fait référence à un navigateur qui peut fonctionner avec une interface graphique. Je peux contrôler le navigateur sans tête pour effectuer automatiquement diverses tâches via la programmation, comme effectuer des tests, prendre des captures d'écran de pages Web, etc.

est Qu'est-ce qu'un navigateur "headless" ?

Le mot « sans tête » vient de l'original « ordinateur sans tête ». Entrée de Wikipédia sur « ordinateur sans tête » :

Un système sans tête est un système configuré sans moniteur (c'est-à-dire « tête »), sans clavier et sans système informatique ou appareil exploité par une souris. Les systèmes sans tête sont généralement contrôlés via une connexion réseau, mais certains périphériques système sans tête nécessitent une gestion des périphériques via une connexion série RS-232. Les serveurs utilisent généralement le mode sans tête pour réduire les coûts d'exploitation.

Pourquoi détecter les navigateurs headless ?

En plus des deux cas d'utilisation inoffensifs mentionnés précédemment, les navigateurs sans tête peuvent être utilisés pour automatiser des tâches malveillantes. La forme la plus courante consiste à explorer le Web, à simuler du trafic ou à détecter les vulnérabilités d'un site Web.

PhantomJS est un navigateur sans tête très populaire. Parce qu'il est basé sur le framework Qt, il possède de nombreuses fonctionnalités différentes par rapport à nos navigateurs courants, il existe donc de nombreuses façons d'en juger. .

Cependant, à partir de Chrome 59, Google a publié un Google Chrome sans tête. Il est différent de PhantomJS dans la mesure où il est développé sur la base de Google Chrome orthodoxe, et non d'autres frameworks, ce qui rend difficile pour le programme de distinguer s'il s'agit d'un navigateur normal ou d'un navigateur sans tête.

Ci-dessous, nous présenterons plusieurs méthodes pour déterminer si un programme s'exécute dans un navigateur normal ou un navigateur sans tête.

Détection des navigateurs sans tête

Remarque : Ces méthodes n'ont été testées que sur quatre appareils (2 Linux, 2 Mac), et cela dit, il existe certainement de nombreuses autres façons de détecter les navigateurs sans tête.

Agent utilisateur

Tout d'abord, présentons la manière la plus courante de déterminer le type de navigateur, en vérifiant l'agent utilisateur. La valeur de l'agent utilisateur du navigateur sans tête Chrome version 59 sur un ordinateur Linux est :

« Mozilla/5.0 (X11 ; Linux x86_64) AppleWebKit/537.36 (KHTML, comme Gecko) HeadlessChrome/ 59.0.3071.115 Safari/537.36”

Ainsi, nous pouvons détecter s'il s'agit d'un navigateur Chrome sans tête comme celui-ci :

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

L'agent utilisateur peut également être utilisé Obtenu à partir des en-têtes HTTP. Cependant, les deux cas sont facilement falsifiés.

Plugins Plugins

navigator.plugins renverra un tableau contenant les informations du plug-in dans le navigateur actuel. Habituellement, le navigateur Chrome ordinaire possède des plug-ins par défaut, tels que la visionneuse PDF Chrome ou Google Native Client. En revanche, en mode sans tête, il n'y a pas de plugins et un tableau vide est renvoyé.

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

Langue

Dans Google Chrome, il existe deux propriétés JavaScript qui peuvent obtenir le paramètre de langue actuel du navigateur : navigator.langue et navigateur. langues. Le premier fait référence à la langue de l'interface du navigateur, et le second renvoie un tableau qui stocke toutes les langues de deuxième choix de l'utilisateur du navigateur. Cependant, en mode sans tête, navigator.langues ​​renvoie une chaîne vide.

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

WebGL

WebGL fournit un ensemble d'API qui peuvent effectuer un rendu 3D dans un canevas HTML. Grâce à ces API, nous pouvons interroger le fournisseur de pilotes graphiques et le moteur de rendu.

Dans Google Chrome ordinaire sous Linux, les valeurs du moteur de rendu et du fournisseur que nous obtenons sont : "Google SwiftShader" et "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教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!