Makina Blog

Le blog Makina-corpus

Un captcha de calcul simple


Ajouter un mécanisme de captcha en quelques lignes de javascript.

Le contexte

Un questionnaire utilisateur est la cible de robot spammeurs, et nous ne voulons pas utiliser un module de captcha pour gérer ce problème (soit parce qu'on n'a pas envie d'ajouter un nième module dans notre CMS, soit parce que les modules existants sont moches et globalement assez inefficaces).

La solution

Nous allons utiliser le principe assez classique de poser une question d'arithmétique écrite en français (par exemple "combien font cinq plus trois ?").

Pour cela nous allons ajouter un champ supplémentaire dans notre formulaire:

<label for="human" id="human-question"></label>
<input id="human-answer" type="text" />

Notons que le champ INPUT n'a pas de NAME, il ne sera donc pas soumis avec les autres valeurs du formulaire.

Ensuite nous allons générer une question en javascript:

var numbers = ["zero", "un", "deux", "trois", "quatre", "cinq", "six", "sept", "huit", "neuf", "dix"];
var num1 = Math.floor(Math.random() * 10);
var num2 = Math.floor(Math.random() * 10);
document.getElementById('human-question').innerHTML = "Combien font " + numbers[num1] + " plus " + numbers[num2] + " ?";

Et dans le submit du formulaire, on va tester le résultat saisie par l'utilisateur:

document.myform.onsubmit = function() {
 var sum = document.getElementById('human-answer').value;
 if(Number.parseInt(sum) != num1 + num2) {
 alert("Désolé, votre calcul est incorrect, cela laisse penser que vous êtes un robot.");
 return false;
 }
};

Par mesure de précaution contre les robots se contentant d'analyse le DOM, il peut être judicieux d'enlever l'attribut ACTION du formulaire, et de ne l'ajouter qu'en cas de calcul correct:

<form action="" method="POST" name="myform">
...

document.myform.onsubmit = function() {
 var sum = document.getElementById('human-answer').value;
 if(Number.parseInt(sum) != num1 + num2) {
 alert("Désolé, votre calcul est incorrect, cela laisse penser que vous êtes un robot.");
 return false;
 } else {
 document.myform.action = "./the_url";
 }
};

Conclusion

Clairement, c'est une solution très simple, elle n'est pas à l'épreuve des balles, en revanche elle est légère, facile à intégrer (aucune dépendance Javascript ou backend), et elle est raisonnablement accessible (certes, la question n'est pas présente dans le DOM au chargement, donc certains outils ne la traiteront pas, mais pour ceux qui interprètent le javascript, le résultat produit est une question en français, clairement plus simple à traiter qu'une image biscornue).

Actualités en lien

Image
Capture d'une partie de carte montrant un réseau de voies sur un fond de carte sombre. Au centre, une popup affiche les information de l'un des tronçons du réseau.
28/02/2024

Géné­rer un fichier PMTiles avec Tippe­ca­noe

Exemple de géné­ra­tion et d’af­fi­chage d’un jeu de tuiles vecto­rielles en PMTiles à partir de données publiques.

Voir l'article
Image
Read The Docs
01/02/2024

Publier une documentation VitePress sur Read The Docs

À l'origine, le site de documentation Read The Docs n'acceptait que les documentations Sphinx ou MKDocs. Depuis peu, le site laisse les mains libres pour builder sa documentation avec l'outil de son choix. Voici un exemple avec VitePress.

Voir l'article
Image
Widget
04/04/2023

Créer une application en tant que composant web avec Stencil

Mise en place dans le cadre de Geotrek, cette solution permet de se passer d'une iFrame pour afficher une application dans n'importe quel site.

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus