Makina Blog
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
Générer un fichier PMTiles avec Tippecanoe
SIG
28/02/2024

Publier une documentation VitePress sur Read The Docs
Logiciel libre
01/02/2024

Créer une application en tant que composant web avec Stencil
Application Web & Mobile
04/04/2023
