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
Exemple de génération et d’affichage d’un jeu de tuiles vectorielles en PMTiles à partir de données publiques.
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.
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.