Lutter contre le Spam dans les Formulaires Web : La Technique du Honeypot

Le spam dans les formulaires web est un fléau qui touche la majorité des sites internet. Que ce soit pour récolter des adresses e-mail, diffuser des liens malveillants ou simplement perturber le fonctionnement normal d’un site. Pour contrer ces attaques, diverses techniques ont été développées, parmi lesquelles la méthode du honeypot. Dans cet article, nous allons explorer cette technique pour protéger vos formulaires web.

Comprendre le Spam dans les Formulaires Web

Les formulaires web sont des cibles privilégiées pour les spammeurs. En automatisant le remplissage et l’envoi de formulaires, les robots peuvent rapidement inonder un site de données indésirables. Ce phénomène peut non seulement compromettre la sécurité des utilisateurs, mais aussi alourdir inutilement les bases de données et consommer des ressources serveur. Pour lutter contre ce problème, les développeurs web ont recours à plusieurs techniques, parmi lesquelles les CAPTCHA, l’analyse comportementale et la technique du honeypot.

La Technique du Honeypot : Principe et Fonctionnement

Le terme honeypot (qui signifie “pot de miel” en anglais) fait référence à un piège conçu pour attirer les robots spammeurs. L’idée derrière cette technique est simple : ajouter un champ de formulaire invisible pour les utilisateurs humains, mais visible pour les robots.

Voici comment cela fonctionne en pratique :

1. Ajout d’un Champ Caché : Un champ de formulaire est ajouté et rendu invisible via du CSS ou du JavaScript. Ce champ peut avoir un nom attrayant pour les robots, comme “email” ou “username”, ce qui les incite à le remplir. Personnellement, souvent inutilisé dans mes formulaires, j’utilise “city”.
2. Détection du Remplissage : Lorsque le formulaire est soumis, le serveur vérifie si ce champ caché a été rempli. Comme ce champ est invisible pour les utilisateurs humains, un utilisateur légitime ne le remplira jamais.
3. Blocage du Spam : Si le champ est rempli, le formulaire est considéré comme une tentative de spam, et l’envoi est bloqué ou ignoré.

Mise en Œuvre de la Technique du Honeypot dans un Formulaire Web

Pour implémenter la technique du honeypot dans un formulaire web, vous pouvez suivre les étapes suivantes. Je vais vous guider à travers un exemple simple en HTML et PHP pour illustrer comment cela fonctionne.

1. Création du Formulaire avec un Champ Caché – Méthode simple

La première étape consiste à créer un formulaire HTML classique avec un champ caché qui servira de honeypot.
Ce champ doit être invisible pour les utilisateurs humains, mais détectable par les robots.

<form action="submit_form.php" method="POST">
    <label for="name">Nom :</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email :</label>
    <input type="email" id="email" name="email" required>

    <!-- Champ honeypot caché -->
    <div style="display:none;">
        <label for="website">Website :</label>
        <input type="text" id="website" name="website">
    </div>

    <input type="submit" value="Envoyer">
</form>

Dans cet exemple, le champ website est caché grâce à l’attribut style="display:none;". Un utilisateur humain ne verra jamais ce champ, mais un robot pourrait le remplir par erreur.

2. Création du Formulaire avec un Champ Caché – Méthode avancé

Pour rendre le champ honeypot complètement invisible aux utilisateurs humains tout en restant accessible aux robots, nous pouvons utiliser une technique avancée basée sur le positionnement absolu avec CSS. Cette méthode permet de sortir le champ et son label du cadre visible de la page, sans utiliser la propriété display:none;, qui pourrait être détectée par des robots plus sophistiqués.

Exemple de Mise en Œuvre avec du CSS

Voici comment vous pouvez modifier le code HTML et CSS pour créer un champ honeypot avec un positionnement absolu :

<form action="submit_form.php" method="POST">
    <label for="name">Nom :</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email :</label>
    <input type="email" id="email" name="email" required>

    <!-- Champ honeypot caché avec positionnement absolu -->
    <label for="website" class="honeypot-label">Website :</label>
    <input type="text" id="website" name="website" class="honeypot-field">

    <input type="submit" value="Envoyer">
</form>

Et voici le CSS associé pour rendre ce champ invisible tout en le gardant accessible aux robots :

/* Style pour le champ honeypot */
.honeypot-label {
    position: absolute;
    left: -10000px;
    top: -10000px;
}

.honeypot-field {
    position: absolute;
    left: -10000px;
    top: -10000px;
}

Je vous encourage vivement à changer le nom de la class utilisée.

3. Vérification du Honeypot côté Serveur

La prochaine étape est d’ajouter une vérification dans le script qui traite le formulaire (par exemple, en PHP). L’idée est de vérifier si le champ caché a été rempli. Si c’est le cas, il s’agit probablement d’une tentative de spam, et le traitement du formulaire peut être interrompu.

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Récupération des données du formulaire
    $name = $_POST['name'];
    $email = $_POST['email'];
    $website = $_POST['website'];

    // Vérification du honeypot
    if (!empty($website)) {
        // Le champ honeypot est rempli, donc c'est probablement un spam
        die("Échec de l'envoi du formulaire.");
    }

    // Si le honeypot n'est pas rempli, continuer le traitement
    // Par exemple, envoyer un email, enregistrer les données dans une base de données, etc.
    // mail($to, $subject, $message);
    echo "Formulaire soumis avec succès.";
}
?>

Dans ce code PHP, nous vérifions si le champ website est vide.
Si ce champ contient une valeur, cela indique qu’un robot a probablement rempli le formulaire, et nous bloquons le traitement en utilisant die() pour arrêter l’exécution du script.
Parfois, j’aime faire des redirections sur un autre site, souvent vers une vidéo Youtube, ou même ajouter un sleep(30); pour faire patienter le bot avant de lui afficher une erreur ou une redirection.

En termes d’accessibilité, ce système a sûrement quelques lacunes, ajouter des aria-hidden= true donnerait des indications aux bots, à tester en fonction de votre situation, si les bots ne sont pas trop agressifs sur votre site, un aria devrait être utilisé.

Ceci offre une piste et une alternative aux captcha bien trop intrusive, et maintenant, totalement incapable de lutter contre le spam.