Maison > Article > interface Web > Utilisez JavaScript pour détecter si le navigateur actuel est 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.
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.
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.
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. .
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.
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"); }
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 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 ».
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"); }
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!