L'autre jour, en voulant protéger le formulaire de contact d'un nouveau site contre le spam avec Google reCaptcha comme d'habitude, je me rends sur ma console de développeur. Sauf que, au lieu d'avoir l'affichage habituel, on me demande de créer un profil de facturation ? Mais ? C'était pas gratuit la dernière fois ?

Eh ben non, plus maintenant. Google nous refait le coup de Google Maps. Même si les plafonds sont très élevés, il est hors de question que je crée un profil de facturation. Alors bon, pour le moment les reCaptcha créés avant fonctionnent toujours (ils filtrent peut-être un peu moins efficacement les bots), mais pour combien de temps ?

Bref, il est temps de migrer vers une autre solution. Je n'ai hélas rien trouvé de convaincant en open source donc j'ai testé hCaptcha, une solution fournie par la société californienne Intuition Machines, Inc. HCaptcha prétend être beaucoup plus RGPD-compatible, sans expliquer clairement pourquoi… apparemment hCaptcha collecterait beaucoup moins de données sur les utilisateurs qui remplissent les formulaires. Une solution qui, grâce à son adoption par le fournisseur de DNS et de reverse-proxy Cloudflare en 2020, se vante d'équiper 15% des sites web.

Avec son interface mal traduite en français, hCaptcha surprend un peu. Mais bon, l'inscription est très facile, et l'implémentation (calquée sur celle de reCaptcha) aussi. En plus, hCaptcha récompense le propriétaire du site avec des jetons pouvant être convertis en argent ou donnés à une organisation à but non lucratif.

On est payés ? Oui, parce que le concepteur de hCaptcha gagne de l'argent en louant l'accès à sa solution à des entreprises qui veulent mener des expériences de classification d'images. Bon, ne rêvons pas, à moins d'avoir un trafic démentiel, cela m'étonnerait de voir arriver le moindre fifrelin…

A noter que ce captcha ne fonctionnera pas sur un site Free.fr, car il s'appuie sur curl, fonction bloquée sur les hébergements Free.

Inscription

Aller sur le site de hCaptcha. Cliquer sur le bouton S'inscrire tout en haut à droite. La page qui suit n'a pas encore été traduite. Choisir « Add hCaptcha for Publishers to my website or app », ce qui mène à une nouvelle page avec un petit formulaire.

Saisissez votre email (de préférence celui associé à votre compte Paypal) et votre pays. Cochez « Je suis un humain ».

Validez votre adresse dans le mail « Vérifiez l'adresse e-mail avec hCaptcha » reçu de la part de status@hcaptcha.com. Dans mon cas, j'ai eu droit à un joli message d'erreur, mais ça a fonctionné quand même et j'ai pu accéder à l'étape suivante, celle du choix et de la confirmation du mot de passe. Aucune autre info demandée.

Enfin, pendant qu'un nouveau mail intitulé « Bienvenue sur hCaptcha! » atterrissait dans ma boîte, je suis arrivée sur l'accueil du tableau de bord…

Utilisation

Direction l'onglet « Des sites ». Bon oui, là encore, y a des progrès à faire en termes de traduction.

Site par défaut

Un site par défaut a été déjà créé avec sa clé publique. Pour récupérer cette clé, cliquer sur le bouton Paramètres à droite de la ligne correspondant au site pour afficher les détails du site. Sous les statistiques, la Sitekey.

Cliquer sur le bouton « Copie » pour la récupérer dans le presse-papier.

Puisque le nom de domaine est un champ facultatif, il est est probable que vous puissiez utiliser sa clé sur tous vos projets, mais j'ai préféré créer une clé par site (ne serait-ce que pour le suivi).

Création d'un site

Sous l'onglet « Des sites », cliquer sur le bouton « +Nouveau site » en haut à droite, sous le nom de profil.

Le nom de domaine se définit sans le https, le www ou le slash final.

J'ai mis le slider de niveau de difficulté du Captcha sur facile. J'avais espoir que cela faciliterait la tâche à l'utilisateur, mais non : il aura à chaque fois des photos à résoudre. Un niveau difficile rapporte peut-être plus ?

Je n'ai pas l'impression que le choix des centres d'intérêt ait un réel impact sur les photos proposées dans le captcha (je récolte à chaque fois des camions ou des avions). A voir à l'usage !

Valider en cliquant sur le bouton violet Sauver.

Récupérer la clé privée

Où est la clé privée ? Sous votre onglet Paramètres.

C'est également là que vous pouvez choisir entre garder les gains pour vous ou en faire don à la fondation Wikimedia.

Installation sur le site

Inclure le script (dans la balise <head> ou juste après l'emplacement où vous voulez que la captcha s'affiche)

<script src="https://hcaptcha.com/1/api.js" async defer></script>

Inclure la balise dans laquelle le captcha va s'afficher (dans data-sitekey, la clé publique, celle que vous avez récupérée dans la paramètres du site). Oui, la syntaxe est identique à reCaptcha.

<div class="h-captcha" data-sitekey="xx000000-0000-0x00-xxxx-000xx00x00xx"></div>

Ajouter le script de vérification. L'implémentation dépend du langage que vous utilisez. De plus en plus de plugin WordPress intègrent hCaptcha. Voici un petit exemple php…

Je définis une variable avec ma clé privée et ma clé publique

$cle_hcaptcha = array( "publique"=>"xx000000-0000-0x00-xxxx-000xx00x00xx", "privee" =>"0xc8ABX00000a0000x0x00xx0000XX00XxX0100000");

Et une fonction qui englobe le processus de vérification et qui renvoie true si le test a échoué et false s'il a réussi (j'aurais aussi bien pu faire l'inverse, hein)

function check_hcaptcha($response){ // $_POST['h-captcha-response']
  global $cle_hcaptcha;
  $data = array(
    'secret' => $cle_hcaptcha['privee'],
    'response' => $response
  );
  $verify = curl_init();
  curl_setopt($verify, CURLOPT_URL, "https://hcaptcha.com/siteverify");
  curl_setopt($verify, CURLOPT_POST, true);
  curl_setopt($verify, CURLOPT_POSTFIELDS, http_build_query($data));
  curl_setopt($verify, CURLOPT_RETURNTRANSFER, true);
  $response = curl_exec($verify);
  // var_dump($response);
  $responseData = json_decode($response);
  if($responseData->success) {
    $code_invalide=false;
  } 
  else {
    $code_invalide=true;
  } 
  return $code_invalide;
}

Il ne me reste plus qu'à appeler la fonction sur la variable retournée par hCaptcha après validation du formulaire.

$code_invalide = check_hcaptcha( $_POST['h-captcha-response']);

Ensuite, j'utilise le résultat de la variable $code_invalide pour valider le formulaire ou afficher un message d'erreur (à adapter en fonction de votre site et de vos besoins).

if($code_invalide) {
  echo $erreur="Vous avez fait une erreur en recopiant le code de securité";
}
else
{ 
  // envoi du formulaire
}

Résultat : la case à cocher s'affiche à l'emplacement que vous avez défini, et au clic une série de photos est proposée à l'utilisateur.

Callback

Exactement comme reCaptcha, il est possible d'avoir recours à un callback, c'est à dire une fonction javascript qui est appelée si le captcha a été correctement résolu. Par exemple, pour activer le bouton Valider du formulaire. L'attribut data-callback est identique à celui de reCaptcha.

<div class="h-captcha" data-callback="captchaCallback" data-sitekey="<?php echo $cle_hcaptcha['publique'] ?>"></div>

Cette fonction, la voici (à adapter selon vos besoins et l'id de votre bouton Valider… là je l'ai fait en jQuery mais ça peut aussi se définir en js vanilla)

function captchaCallback() {
    $('#submitBtn').removeAttr('disabled');
    $('#submitBtn').css('opacity','1');
};

Ce qui ne dispense pas de la vérification de la variable de retour $_POST[‘h-captcha-response'] !

Accessibilité

Et les non-voyants dans cette histoire ? Ils sont encore une fois laissés de côté ? Pas tout à fait. Si vous cliquez sur le bouton ellipsis (les 3 petits points à gauche de la flèche reload), vous verrez s'afficher un petit menu. Choisir Accessibilité pour valider le dépôt d'un cookie qui dispensera l'utilisateur de résoudre le test visuel. Plus d'infos ici…

RGPD

Rien n'est prévu pour hCaptcha dans l'assistant de Tarteaucitron. Mais je suppose qu'il est tout de même préférable de mentionner l'utilisation de hCaptcha dans sa page de politique de confidentialité…

Sources

hCaptcha revendique être désormais le plus grand service indépendant de CAPTCHA, opérant déjà sur 15 % de l'Internet

Bye Bye reCAPTCHA et bonjour hCaptcha

Developer guide (doc officielle)