Une alternative au captcha, en quelques lignes

Ayant besoin d’un captcha pour un formulaire mais voyant la tête de tout ce que je pouvais trouver, j’ai commencé à chercher des solutions alternatives. Ces solutions devaient être discrètes, esthétiques et lisibles… Malheureusement mes recherches m’ont amené uniquement à remettre en cause l’utilité des captchas. Du coup, j’ai préféré une solution maison avec JQuery, que je partage ici.

Qu’est-ce qu’un Captcha ?

Le CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart, en français : test public de Turing complètement automatique ayant pour but de différencier les humains des ordinateurs) est parfois considéré comme un test de turing inversé. Test de turing ? Ce test qui vise à mettre un humain et un robot face à face. Si lors de la conversation l’humain croit avoir à faire à un autre humain, le test est réussi. L’idée du captcha est donc de vérifier que l’utilisateur qui y est confronté est bien un humain.

Une sécurité ou un frein ?

Il y a différentes sortes de captcha, la plupart sont ces caractères illisibles que vous vous efforcez à déchiffrer :

Le problème c’est que très souvent l’image doit être rechargée car non déchiffrable. A qui n’est-ce pas arrivé de faire 2, 3 essais avant d’arriver à recopier un captcha correctement ? N’est-ce pas un frein potentiel, sachant que le fait de remplir un formulaire est déjà une épreuve lorsque la tendance est à la facilitation ?

Malgré tout, une sécurité absolue ?

Les chiffres parlent d’eux-même. L’université de Stanford a publié une étude sur les Captcha. Voici par exemple le temps nécessaire (en secondes) pour casser les différents captcha du marché et la précision des tentatives.

Source : http://web.stanford.edu/~jurafsky/burszstein_2010_captcha.pdf

Entre décodages manuels industrialisés et lectures automatiques, on voit bien que nos précieux captcha qui nous donnent bien du fil à retordre, en donnent moins aux hackers. Dans cette étude on constate même que le temps moyen de résolution par un humain est proche de celui nécessaire à un robot. Rassurant, n’est-ce pas ?

Une proposition d’alternative compréhensible par un humain

Quitte à être « facilement » craquable, pourquoi ne pas proposer quelque chose de simple ? En fait, il s’agit aussi d’une question esthétique. En effet, sachant qu’il existe déjà des moyens en arrière-boutique des CMS du marché pour contourner le spam (filtrage par adresses IP, détection de mots-clefs, fréquences d’envoi, …), le captcha apparaît parfois comme une surprotection.
De fait, j’ai choisi d’explorer une piste plus simple : un champ comme un autre dans mon formulaire demandant la résolution d’un calcul aléatoire simple à l’aide de JQuery. Voici le rendu :

 

Côté HTML

Rien d’extraordinaire : un formulaire, un label et champ, un bouton submit :

<form action="monfichier.php" id="monformulaire">
        <span id="labelcaptcha">Quel est le résultat de </span>
        <input type="text" placeholder="" name="captcha" id="captcha" required="required" class="c-text" >
        <button type="submit" name="submit" id="submit">ENVOYER LE MESSAGE</button>
</form>

Chaque élément est donc identifiable par notre bout de JQuery.

Côté Javascript

On commence par définir la partie gauche du calcul :

var gauche = Math.floor((Math.random() * 4) + 5);

Si je décrypte : Math.random() * 4 donne un chiffre aléatoire entre 0 et 3, auquel je rajoute 5. On aura donc un chiffre aléatoire entre 5 et 8.
Pour la partie droite de l’opération simple, c’est plus ou moins pareil, entre 1 et 4 donc :

var gauche = Math.floor((Math.random() * 4) + 1);

Ensuite on choisit l’opérateur aléatoirement entre – et +. C’est pour ça que j’ai choisi de prendre le chiffre de gauche supérieur strict à celui de droite. Car si on fait une soustraction, le résultat sera négatif. Et ça, je ne le voulais pas :

var operateurChoice = Math.floor(Math.random() * 2);
var operateur = "-";
if(operateurChoice){ operateur="+" ; }

Ensuite nous allons « écrire » le calcul dans la page, en le rajoutant dans le placeholder du champs texte associé ainsi qu’au label :

$("#captcha").attr("placeholder",gauche+operateur+droite+" = ?");
$("#labelcaptcha").html( $("#labelcaptcha").html() + " " + gauche + " " + operateur + " " + droite + " = ?");

Et enfin, on intercepte la soumission du formulaire pour analyser le contenu du champ captcha. Si le résultat est ok, alors on continue la soumission du formulaire. Sinon, on fait des trucs pour dire à l’internaute qu’il s’est trompé :

$('#submit').click(function(){
	if( eval($('#captcha').val()) == eval(gauche+operateur+droite)){
		$("#monformulaire").submit();
	}
	else{
		$("#captcha").css({"border-color":"red", "background-color":"#FFAEAE" });
		return false;
	}
});

Voici le code dans sa totalité :

var gauche = Math.floor((Math.random() * 4) + 5);
var droite = Math.floor((Math.random() * 4) + 1);
var operateurChoice = Math.floor(Math.random() * 2);
var operateur = "-";
if(operateurChoice){ operateur="+" ; }
$("#captcha").attr("placeholder",gauche+operateur+droite+" = ?");
$("#labelcaptcha").html( $("#labelcaptcha").html() + " " + gauche + " " + operateur + " " + droite + " = ?");
$('#submit').click(function(){
	if( eval($('#captcha').val()) == eval(gauche+operateur+droite)){
		$("#monformulaire").submit();
	}
	else{
		$("#captcha").css({"border-color":"red", "background-color":"#FFAEAE" });
		return false;
	}
});

Conclusion

Ce n’est pas la solution la plus sécurisée du monde, mais elle est manifestement aussi sécurisée que beaucoup de captchas illisibles et compliqués à mettre en place. Ici nous avons quelque chose de discret et lisible, et c’est tout ce que je lui demandais 🙂
 

Une autre alternative encore plus simple

Merci à @severin_bruhat (http://severin-bruhat.com) qui m’a corrigé dans ma lancée en proposant cette alternative encore plus simple et élégante !

On utilise la technique du honeypot (http://www.commentcamarche.net/faq/16507-les-honeypots-pots-de-miel#principe-de-fonctionnement)
L’idée est donc de fournir un leurre à destination d’un robot. Ce leurre, c’est un champ qui sera masqué en CSS. Un robot seul le verra et le remplira donc, contrairement à un humain.
Il suffit donc à la soumission du formulaire de vérifier le contenu de ce champ. S’il est vide, c’est que c’est un humain qui l’a rempli et on pourra y aller !
Plus d’infos : http://www.dexmedia.com/blog/honeypot-technique/