Protéger vos formulaires du spam de manière accessible
Publié le

firemen

Après l'article visant à protéger les emails du spam tout en essayant de proposer une solution alternative accessible à l'internaute ne pouvant exécuter Javascript, voici l'article qui a pour but de proposer un formulaire accessible tout en restant le moins contraignant possible.

Pour commencer, faisons l'état des lieux.
La problématique : les robots remplissent de manière automatique les champs du formulaire de contact (ou tout autre formulaire) pour nous soumettre leurs liens indésirables. Nous allons donc tenter d'y remédier, tout en essayant de ne pas nuire à l'utilisateur.

Les solutions actuellement proposées :

  1. Utiliser un captcha, qui est un test de Turing.
  2. Proposer à l'internaute une question à laquelle il devra répondre avant de pouvoir soumettre le formulaire (c'est également un test de Turing).
  3. Utiliser un service tiers qui filtrera vos messages via une base de données indépendante et/ou avec un algorithme à filtrage évolutif.
  4. Générer son formulaire via Javascript

La solution qui utilise un captcha, pour moi, est la plus contraignante pour l'utilisateur : il m'arrive fréquemment de devoir soumettre plusieurs fois le formulaire avant d'avoir correctement orthographié la série presque illisible de caractères proposée, alors imaginez le calvaire pour les personnes malvoyantes. Les personnes aveugles ne pourront tout simplement pas y répondre. Certains captcha sont plus accessibles que d'autres et proposent également d'écouter la série de caractères, encore faut-il avoir un casque audio ou des haut-parleurs et ne pas être malentendant. Une personne âgée malvoyante et malentendante n'a aucune chance de parvenir à répondre à un captcha.

La seconde possibilité, l'utilisation d'une question dont les robots ne pourront répondre. Le principe fonctionnait très bien au début, mais les robots se sont adaptés et il est de plus en plus difficile de proposer des questions à réponses faciles pour les humains tout en restant indéchiffrables pour les robots. Ce système est, dans la plupart des cas, plus accessible pour l'ensemble de la population, mais peut rester un problème pour les personnes ayant un handicap cognitif.

La troisième voie d'exploration nous amène dans des systèmes propriétaires que l'on ne contrôle pas et qui ne sont pas toujours adaptés à notre cas d'utilisation, qui peuvent être coûteux, et qui ne sont pas forcement toujours efficace ou trop contraignant.

La dernière solution est, je pense, à proscrire absolument. Le formulaire ne sera ni référencé, ni accessible aux personnes n'ayant pas Javascript activé, à éviter donc.

A présent, je vais vous proposer la solution que j'ai mise en place. Elle n'est pas ultime, mais n'étant pas utilisée à grande échelle, les robots ne la prennent pas en compte, et est donc fonctionnelle à l'heure actuelle sur l'ensemble des sites où je l'utilise. Elle a également le mérite de rester accessible, et d'être transparente à la majorité des internautes qui utilisent Javascript.

Cette méthode consiste à proposer un formulaire conventionnel, auquel on ajoutera un ou deux champs factices qu'il ne faudra pas remplir. De préférence, on utilisera un attribut name aguicheur afin de faire tomber les robots dans le panneau.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/HTML; charset=UTF-8" />
        <title>Exemple de formulaire accessible protégé du spam</title>
        <link rel="icon" type="image/png" href="/favicon.png" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />
        <link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
        <script type="text/javascript">document.getElementsByTagName('html')[0].id = 'js';</script>
    </head>
    <body>
        <div>
            <form id="contactForm" action="/contact.html" method="post">
                <fieldset>
                    <legend>Formulaire de contact</legend>
                    <p>Les champs précédés d'une étoile (*) sont obligatoires</p>
                    <div class="forbidden">
                        <label for="firstname">Ne pas remplir ce champ (champs anti-robot) :</label><br />
                        <input type="text" id="firstname" name="firstname" value="" />
                    </div>
                    <div>
                        <label for="contactFormSubject">Sujet * :</label><br />
                        <input type="text" id="contactFormSubject" name="contactFormSubject" value="" />
                    </div>
                    <div>
                        <label for="contactFormName">Nom * :</label><br />
                        <input type="text" id="contactFormName" name="contactFormName" value="" />
                    </div>
                    <div class="forbidden">
                        <label for="website">Ne pas remplir ce champ (champs anti-robot) :</label><br />
                        <input type="text" id="website" name="website" value="" />
                    </div>
                    <div>
                        <label for="contactFormFirstName">Prénom * :</label><br />
                        <input type="text" id="contactFormFirstName" name="contactFormFirstName" value="" />
                    </div>
                    <div>
                        <label for="contactFormEmail" lang="en">Email * :</label><br />
                        <input type="text" id="contactFormEmail" name="contactFormEmail" value="" />
                    </div>
                    <div><input type="submit" value="Envoyer le message" /></div>
                </fieldset>
            </form>
        </div>
    </body>
</html>

Il suffira de rajouter ces trois lignes dans le fichiers CSS afin de cacher ces champs factices aux personnes utilisant Javascript :

1
2
3
#js form .forbidden {
    display: none;
}

Ce bloc CSS cible l'élément ayant un id="js", cet id est ajouté à la balise <html> par du Javascript (voir le script dans la partie <head> du document HTML), ce qui nous permettra de cacher ces champs uniquement aux possesseurs de Javascript, ces champs restent donc à l'heure actuelle visibles aux robots qui tomberont dans le piège.

Il ne vous restera plus qu'à faire le traitement PHP qui va bien (contrôle des champs) en vérifiant en plus que les champs factices soient bien vides. Si jamais ceux-ci ont été remplis, il faudra retourner un message d'erreur demandant à l'internaute de les vider et de valider à nouveau le formulaire.

Voir l'exemple

« Retour à la liste des articles

Vos commentaires

Poster un commentaire