Robots

par · Publié · Mis à jour

Un bot Internet, un robot web, un robot ou simplement un bot, est une application logicielle qui exécute des tâches automatisées sur Internet, généralement dans le but d’imiter une activité humaine.

Un bot Internet joue le rôle de client dans un modèle client-serveur. Les robots Internet sont capables d’effectuer des tâches simples et répétitives beaucoup plus rapidement qu’une personne ne pourrait le faire. L’utilisation la plus répandue des robots est l’exploration de sites web, dans laquelle un script automatisé récupère, analyse et classe des informations à partir de serveurs web.

Plus de la moitié du trafic web est généré par des robots !!

 

Quelques types de robots :

Les robots d’indexation, tels que le Googlebot, sont la principale utilisation des robots informatiques. Ils parcourent le web en indexant les pages pour le compte de moteurs de recherche.

Des bots dialogueur, communément appelés chatbot, permettent aux clients de communiquer avec les entreprises, des administrations ou d’autres entités, sans avoir à communiquer avec une personne physique.

Un spambot est un bot informatique conçu pour assister ou envoyer du spam. Un spambot peut par exemple collecter des adresses email sur les pages web, ou bien envoyer du spam sur différents supports Internet : boites mail, commentaire de forums, messagerie instantanée, …

 

 

 

 

Pour tester les pages web de cet article et réaliser les activités, il sera nécessaire d’utiliser les outils de développement du navigateur web utilisé.

Il est également conseillé d’utiliser VSCodium avec un plugin tel que Live Server (voir documentation du plugin).

Titre du spoiler

Live Server permet de lancer un serveur de développement local avec une fonction de rechargement en direct pour les pages statiques et dynamiques.

  • Ouvrir un fichier .html dans VSCodium
  • Lancer le serveur de développement : en bas à droite de la fenêtre de VSCodium cliquer sur
  • Le contenu HTML (avec toutes les ressources nécessaires) est chargé puis affiché sur une nouvelle page web du navigateur par défaut.

Toute modification du contenu du fichier .html est automatiquement répercuté sur le navigateur, tant que le serveur « tourne ».

 

 

Un premier robot

Une façon de réaliser un robot est d’utiliser Javascript (coté client), qui propose des méthodes pour agir sur les éléments du DOM, et déclencher des événements.

 

Avec une unique case à cocher

Voici un exemple avec une case à cocher (checkbox) :

<!DOCTYPE html>
<html lang="fr-FR">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Robot</title>
    </head>
<body>
    <div>
        <input type="checkbox" id="checkbox" name="chk" />
        <label for="chk">Case pour bot</label>
        <p id="info"></p>
    </div>
</body>
<script>
    var chk = document.getElementById("checkbox");
    chk.addEventListener("click", (event) => {
        let info = document.getElementById("info");
        info.innerHTML = `Case : ${chk.checked}`;
    });
</script> 
</html>

Quelques explications :

  • on récupère l’objet du DOM correspondant à une case à cocher par son identifiant : var chk = document.getElementById("checkbox");
  • afin de vérifier que cela déclenche bien un événement, on attache une fonction à appeler chaque fois que la case est cliquée : chk.addEventListener...
    (ici, on modifie le contenu d’une balise <p> pour afficher un message)

 

Et voici le code Javascript d’un robot rudimentaire, qui simule un clic de souris toutes les 3 secondes sur la case à cocher :

  • à intervalle de temps régulier (grâce à la fonction setInterval), on clique sur la case : chk.click();
var per = 3; // periode des clicks
setInterval(function() {
    chk.click();
}, 1000*per);
Ajouter ce code au contenu de la balise <script> pour constater son action sur la page.

Résultat :

 

Avec plusieurs cases à cocher

Voici un autre exemple qui permet de cliquer aléatoirement sur chacune des cases à cocher du document (tout le document !) :

<!DOCTYPE html>
<html lang="fr-FR">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Robot</title>
    </head>
<body>
    <div>
        <input type="checkbox" id="checkbox1" name="chk1" />
        <label for="chk1">Case pour bot 1</label></br>
        <input type="checkbox" id="checkbox2" name="chk2" />
        <label for="chk2">Case pour bot 2</label></br>
        <input type="checkbox" id="checkbox3" name="chk3" />
        <label for="chk3">Case pour bot 3</label></br>
        <p id="info"></p>
    </div>
</body>
<script>
    var chks = document.querySelectorAll("input[type=checkbox]");
    var per = 1; // période des clics (en secondes)
    var info = document.getElementById("info");

    setInterval(function() {
        let n = Math.floor(Math.random()*chks.length);
        chks[n].click();
    }, 1000*per);

    for (const chk of chks) {
        chk.addEventListener("click", (event) => {
            info.innerHTML = `Dernière case cliquée : ${chk.name}`;
        });
    }
</script> 
</html>

 

Un robot autonome

Un robot est sensé être un programme autonome, qui s’exécute sur un document HTML déjà chargé dans le navigateur.

Reprenons une page web avec une case à cocher associée à un événement :

<!DOCTYPE html>
<html lang="fr-FR">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page</title>
    </head>
<body>
    <div>
        <input type="checkbox" id="checkbox" name="chk" />
        <label for="chk">Case pour bot</label>
        <p id="info"></p>
    </div>
</body>
<script>
    var chk = document.getElementById("checkbox");
    chk.addEventListener("click", (event) => {
        let info = document.getElementById("info");
        info.innerHTML = `Case : ${chk.checked}`;
    });
</script> 
</html>

Et un robot, sous la forme d’un fichier robot.js :

var chk = document.getElementById("checkbox");
var per = 3; // periode des clicks

setInterval(function() {
    chk.click();
}, 1000*per);

 

Une fois la page chargée dans le navigateur, on peut lancer le robot en copiant/collant le script dans la console du navigateur.

 

 

Application à une « vraie » page web

Voici une case à cocher « authentique » :

×

 

À l’aide des outils de développement du navigateur, identifier une manière de sélectionner ces deux cases à l’aide d’une commande Javascript lancée dans la console.
Comment sélectionner des éléments du DOM

Pour sélectionner un ou plusieurs éléments du DOM, on peut utiliser une des fonctions de sélection.

L’une d’elles, la fonction document.querySelectorAll, permet la recherche d’éléments HTML à l’aide de sélecteurs CSS.

 

Créer un robot (un fichier robot_choix.js) dont le rôle est de cocher la 2ème case du formulaire (à cliquer uniquement si elle n’est pas déjà cochée !).

Pour exécuter ce script sur la page actuelle :

  • Copier le code Javascript du fichier robot_choix.js,
  • Le coller dans la console du navigateur,
  • Appuyer sur Entrée.
Comment écrire une structure conditionnelle en Javascript
if (condition) { 
    // action 
} else {
    // autre action
}

 

 

Se prémunir des robots

Les robots d’indexation

Pour empêcher les robots d’indexation de visiter tout ou partie d’un site web, il suffit d’ajouter à la racine du site un fichier robots.txt.

Voir les détails sur https://robots-txt.com/

 

Les robots indésirables

On entend par robots indésirables (ou « mauvais » robots) les spam bots, les aspirateurs de site, …

Pour s’en prémunir, il est possible de configurer le serveur web, au moyen par exemple du fichier .htaccess.

Pour en savoir plus : https://dinogeek.me/FR/htaccess/Comment-empecher-les-bots-indesirables-de-crawler-votre-site-.html

 

La technique du « pot de miel »

Comme nous l’avons vu plus haut, un robot programmé pour agir sur une page web (cliquer un bouton, remplir un formulaire, …) doit auparavant effectuer des « recherches » dans le DOM.

Imaginons une page web proposant un formulaire (enregistrement d’utilisateur, envoi de commentaires, …). Si ce formulaire doit donner lieu à l’ajout d’enregistrements dans une base de données, il faut impérativement l’interdire aux robots !!

La technique du « pot de miel » consiste à leurrer le robot en lui proposant un champ de formulaire « attrayant » (avec un nom explicite), mais qui serait invisible pour un utilisateur humain.

Le robot, lui, le verrait et le compléterait … dévoilant ainsi au serveur qu’il s’agit d’un robot et pas d’un humain.

Toute la difficulté de cette technique est de dissimuler ce champ sans que le robot ne s’aperçoive qu’il est invisible pour un humain … et donc que le remplir le trahirait !

 

Voici un petit formulaire simple :

<!DOCTYPE html>
<html lang="fr-FR">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Formulaire</title>
</head>
<body>
    <form>
        <label for="nom">Qui es-tu ?</label><br/>
        <input type="text" id="nom" name="nom" /><br/>
        <input type="submit" onclick="clic(event)" value="Envoyer">
    </form>
    <p id="info"></p>
</body>
<script>
    function clic(event) {
        let nom = document.getElementById('nom').value;
        let info = document.getElementById("info");
        info.innerHTML = `Bonjour ${nom}`;
        event.preventDefault(); // pour éviter la réelle soumission du formulaire (pas de serveur dans cet exercice)
    }
</script> 
</html>

Remarque importante : en principe les informations fournies dans un formulaire sont destinées au serveur. C’est lui qui au final les traite (interaction avec la base de donnée, renvoi de ressources, …).

Dans le cas présent, pour des raisons de simplicité, nous n’utilisons pas de serveur, mais il faut bien garder à l’esprit que ce doit être lui qui traite ces informations !

 

Réaliser un robot qui complète automatiquement le formulaire, puis clique sur le bouton « Envoyer ».
ATTENTION : le robot est sensé ignorer les identifiants des champs du formulaire. Il doit procéder par une recherche par balise : utiliser  des sélecteurs CSS avec document.querySelectorAll.
Comment parcourir un tableau en Javascript

En Javascript un tableau (array) peut être parcouru de différentes manières :

Par valeurs :

for (const element of theArray) {
    // ...use `element`...
}

Par indice :

for (let index = 0; index < theArray.length; ++index) {
    const element = theArray[index];
    // ...use `element`...
}

 

Nous allons à présent essayer de leurrer ce robot…

Pour que le leurre soit le plus efficace possible, il faut que le champ de texte (<input type="text" />) :

  • porte un nom/id qui paraisse cohérent ("email", "name", …)
  • soit vide par défaut : value=""
  • ne puisse pas être remplie par l’auto-complétion : autocomplete="off"
  • ne puisse pas être accessible par la touche Tab : tabindex="-1"
  • et soit bien caché (voir plus bas) !!

Et les autres champs, ceux qui doivent être complétés, doivent au contraire porter des noms « étranges » : "emailfkxa", "aanomaa", …

 

Rajouter un champ de texte et faire en sorte qu’il soit invisible pour un utilisateur humain.
Comment cacher un élément d'une page web

Exemples de styles CSS permettant de cacher un élément du DOM :

display: none !important;

Facilement détectable par un robot car c’est la méthode la plus simple.

 

On peut aussi combiner plusieurs techniques :

// transparence
opacity: 0;

// positionnement hors écran
position: absolute; 
top: 0;
left: 0;

// dimensions nulles
height: 0;
width: 0;

// en arrière plan
z-index: -1;

 

Modifier le code Javascript (dans la balise <script> de la page du formulaire) de sorte qu’il détecte l’action d’un robot et affiche "Je ne réponds pas aux bots" au lieu de "Bonjour ...".

 

 

Je ne suis pas un robot

D’une manière plus générale, supposons que l’on souhaite interdire aux robots l’accès à une ressource. Il existe plusieurs moyens pour vérifier que le client n’est pas un robot :

  • CAPTCHA  (acronyme anglais de Completely Automated Public Turing test to tell Computers and Humans Apart) est une famille de tests de Turing permettant de différencier de manière automatisée un utilisateur humain d’un ordinateur.
  • reCAPTCHA est un service de test CAPTCHA proposé par Google aux éditeurs de sites webs pour leur permettre de différencier de manière automatisée les utilisateurs humains des robots. Le système se différencie des CAPTCHA classiques en mettant à profit les capacités de reconnaissance que le test mobilise chez les utilisateurs humains, (pour entraîner par la même occasion les intelligences artificielles que Google développe !).

 

La deuxième version de reCAPTCHA propose à l’utilisateur humain de cliquer sur une case à cocher :

Le système repose en partie sur l’enregistrement des mouvements de la souris, suivi d’une analyse par une IA servant à déterminer s’il s’agit de l’action d’un humain ou bien d’un robot.

 

Essayons de reproduire simplement cela …

Voici une case à cocher destinée à détecter si un robot ou un humain la clique :

<!DOCTYPE html>
<html lang="fr-FR">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>NoRobot</title>
</head>
<body>
    <div>
        <input type="checkbox" id="norobot" name="nr" />
        <label for="nr">Interdit aux robots</label><br/>
        <p id="info"></p>
    </div>
</body>
</html>

 

On lui rajoute, dans une balise <script> du code Javascript chargé de détecter les mouvements de la souris dans la case.

var chk = document.getElementById("norobot"); 
chk.addEventListener("mousemove", (event) => { 
    console.log(event.clientX, event.clientX); // les coordonnées relatives de la position du curseur de la souris
    // Choses à faire quand la souris se déplace sur la case à cocher ...
} );

 

Pour mémoriser les n dernières positions du curseur de la souris sur la case à cocher, on a besoin d’une file. Pour cela on utilise un tableau (array en Javascript) :

var lastpts = []; // file

et une constante entière pour la taille de la file :

const npts = 10;

 

Pour ajouter un point dans la liste, on utilise la méthode push(), et pour tronquer sa taille à npts, on peut utiliser la méthode slice().

 

Lorsque le curseur quitte la case, il faut vider la file.

 

Et en cas de clic sur la case, le programme doit vérifier que la « trace » enregistrée prouve qu’il s’agit d’un humain et pas d’un robot.

En première approche, on considérera que si la file est pleine, cela signifie qu’un humain a effectivement déplacé, manuellement, le curseur de la souris jusqu’au centre de la case.

RAPPEL : en principe, ce rôle de vérification doit se faire coté serveur !!

 

Compléter le programme Javascript associé à la case à cocher de vérification.

Vous aimerez aussi...

  • Formulaires

    Formulaires

  • Web

    Web

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *