Protéger un formulaire de Formit avec un champ de calcul et du CSS
  • 16 octobre 2018
  • Steeve

Toujours le même problème, on reçoit beaucoup trop de spam dans nos boîtes e-mail...La plupart du temps ces messages ne sont pas envoyés par des humains mais par des robots qui remplissent facilement n'importe quel formulaire.

Il y a encore quelques années on pouvait encore les piéger avec une petite astuce simple qui consistait à mettre un champ de formulaire du type hidden et s'il n'était pas vide c'est que c'était un robot qui tentait de vous spammer !HTML
Mais aujourd'hui il est beaucoup plus difficile de les piéger car ils ont étaient programmé par des personnes qui ont pensé à toutes les petites astuces afin que leurs robots arrivent à vous envoyer leurs spams.

Ma petite astuce consiste à utbiliser du CSS2 avec la propriété content qui permet de récupérer des attributs tel que l'attribut href d'un élément HTML a par exemple. Mais aussi les À l'aide des attributs personnalisés du HTML5 (datèrent-*). Et également un peu de PHP pour renvoyer des valeurs aléatoires mais aussi pour pouvoir le vérifier et dire à Formit (Extra MODX) qu'une fois qu'il aura fait ses propres validations, il peut envoyer le formulaire.

Ci-dessous recaptchaQuestion qui permet d'envoyer des valeurs aléatoires (selon un tableau PHP). Il suffit d'appeler le snippet à l'endroit ou l'on veut que le petit calcul (au-dessus du champ qui va récupérer la valeur entrée par l'internaute).

// la liste de ce que je veux afficher, le tableau commence a 1
$tab = array(1 => 	'\', 
					'\',
					'\', 
					'\', 
					'\', 
					'\',
					'\',
					'\',
					'\');
					
// un chiffre aléatoire entre 1 et 9
$num = rand(1, 9);

// une valeur du tableau avec le chiffre rand
$output = $tab[$num];

// retourne le résultat
return $output;

Ci-dessous recaptchaValidate qui quant à lui permet de pouvoir dire à Formit que le champ est validé.

if($value  == 10){
    $success = true;
}else{
    $success = false;
}

if ($success == false) {
  // Note how we can add an error to the field here.
  $validator->addError($key,'Mauvais calcul, veuillez réessayer !');
}

return $success;

Voici comment je paramètre Formit pour qu'il puisse utiliser ceci.

[[!Formit? ... 
&hooks=`spam,email`
....
&customValidators=`recaptchaValidate`
&validate=`
nom:required:stripTags,
calcul:recaptchaValidate`
....
`]]

Et dans le formulaire :



[[!+fi.error.calcul]]

Un peu de CSS et le tour est joué !

.calcul::before {
    content: attr(data-first) "\002B" attr(data-second);
    unicode-bidi: bidi-override;
}

Pour augmenter les chances de bloquer ces robots j'utilise en plus toujours la vieille astuce d'écrite dans ce tutoriel (en Anglais).

Partagez cet article

A propos de l'auteur

Steeve

Passionné d’informatique, de Design, de développement d'application et du Web en général (participation au start-up weekend, hackathon, dev Var, formation Google...), j’ai créé ce site afin de partager mes connaissances sur mon système de gestion de contenu préféré MODX. En espérant participer au développement de la communauté.

Commentaires (0)





Tags autorisés : <b><i><br> Ajouter un nouveau commentaire :