Utilisez JavaScript pour détecter si le navigateur actuel est un navigateur sans tête

Qu'est-ce qu'un navigateur sans tête ?

Le navigateur sans tête fait référence à un navigateur pouvant 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.

Pourquoi est-il appelé un navigateur « sans tête » ?

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 fait référence à un système informatique qui a été configuré pour fonctionner sans écran (c'est-à-dire « tête »), clavier et 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 devrions-nous détecter les navigateurs sans tête ?

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 de l'identifier.

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). En d'autres termes, il doit exister de nombreuses autres méthodes pour détecter les navigateurs sans tête. .

Agent utilisateur

Introduisez d'abord la méthode la plus courante pour 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 obtenu à partir des en-têtes HTTP. Cependant, les deux cas sont facilement falsifiés.

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 les paramètres de langue actuels du navigateur : navigator.langue et navigator.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.".

En mode headless, celui que nous obtenons est "Mesa OffScreen" - c'est le nom de la technologie de rendu qui n'utilise aucun système de fenêtre, et "Brian Paul" - la source originale de l'open source Programme de bibliothèque graphique 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");
}

Toutes les versions de navigateurs sans tête n'ont pas les deux mêmes valeurs. Cependant, actuellement dans les navigateurs sans tête, il existe deux valeurs : « Mesa Offscreen » et « Brian Paul ».

Fonctionnalités du navigateur

Modernizr peut détecter la prise en charge par le navigateur actuel de diverses fonctionnalités HTML et CSS. J'ai trouvé que la seule différence entre Chrome normal et Chrome sans tête est qu'il n'y a pas de fonction de délié en mode sans tête. Elle est utilisée pour détecter si les déliés hidpi/retina sont pris en charge

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

Échec du chargement de l'image

<.>Enfin, la dernière méthode que j'ai trouvée est aussi celle qui semble la plus efficace. Le point de départ est de vérifier la hauteur et la largeur des images qui ne peuvent pas être chargées normalement dans le navigateur.

Dans Chrome normal, la taille de l'image chargée sans succès est liée au zoom du navigateur, mais elle n'est certainement pas nulle. Dans le navigateur Chrome sans tête, la largeur et la hauteur de cette image sont toutes deux égales à 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");
    }
}

Tutoriel recommandé : "

Tutoriel vidéo javascript"

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!