Protégez vos formulaires du spam avec Cloudflare Turnstile

Billets : Protégez vos formulaires du spam avec Cloudflare Turnstile

Protégez vos formulaires du spam avec Cloudflare Turnstile

Par Matthieu le 20/12/2022

Cloudflare Turnstile s'impose comme une alternative à Google reCaptcha, plus légère et plus respectueuse de la vie privée.

Cloudflare ne cesse d'étoffer son offre, avec depuis quelques mois une alternative gratuite au célèbre Google reCaptcha. Actuellement, environ 97% des millions de sites Web les plus visités utiliseraient le CAPTCHA de Google.

Protect Web Forms From Spam

Le CTO de Cloudflare (John Graham-Cumming) a soulevé de nombreux inconvénients à reCaptcha :

une mauvaise accessibilité, les handicaps visuels peuvent rendre impossible la résolution d'un CAPTCHA,
des préjugés culturels, les CAPTCHA supposent une familiarité avec des objets comme les taxis américains,
une lourdeur ergonomique,
de nombreux fichiers supplémentaires à télécharger, parfois contraignant sur mobile.

D'après John Graham-Cumming :

Le plus gros problème avec CAPTCHA est que l'expérience utilisateur est terrible. Au fur et à mesure que les ordinateurs se sont améliorés pour les résoudre, l'expérience utilisateur n'a fait qu'empirer.

Cloudflare se base sur une étude du comportement de l'utilisateur, le temps de la session. Le système parvient à déterminer s'il s'agit ou non d'un bot. Cloudflare utilise les jetons d'accès privés pour minimiser la quantité de données collectées. Les jetons d'accès privés fonctionnent en demandant à un appareil d'envoyer des informations d'authentification anonymisées (jetons) à un site Web compatible, sans exposer aucune information sensible sur lui-même.

Le système de Cloudflare reste, pour le moment, totalement gratuit :

Puisque nous avons prouvé que cela fonctionnait pour nous, nous voulions donner à chacun la possibilité de se débarrasser du CAPTCHA. Aider à améliorer Internet est notre mission. Nous pensons que donner cela à n'importe quel site Web est un moyen de le faire.

Un compte Cloudflare est à créer : Créer un compte Cloudflare Turnstile.

Analyse

Le résultat de l'analyse par Turnstile peut présenter 3 états :

Success : l'internaute peut valider le formulaire sans action supplémentaire.

Cloudflare Turnstile Success

Failure : robot identifié, impossible de continuer.

Cloudflare Turnstile Failure

Verify : résultat incertain, l'internaute doit cocher une case avant de valider.

Cloudflare Turnstile Verify

Il est possible de configurer Turnstile en mode invisible.

Intégration du Widget

On appelle le script Turnstile dans le head :

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

Puis on ajoute un élément à placer dans le formulaire à protéger :

<div class="cf-turnstile" data-sitekey="<YOUR_SITE_KEY>" data-theme="auto" data-action="contact"></div>

Les options utilisées dans cet exemple sont :

data-sitekey : donnée fournie par Cloudflare
data-theme : le thème du Widget (auto, light, dark)
data-action : nom libre pour identifier le formulaire

D'autres options sont définies dans la documentation officielle : Client-side rendering. Il est également possible de générer le Widget via une fonction Javascript (Explicitly render).

Suite à la validation, un champ caché est ajouté à l'intérieur de l'élément :

<input type="hidden"
   name="cf-turnstile-response"
   id="cf-chl-widget-2bfn1_response"
   value="XXXX.DUMMY.TOKEN.XXXX" />

La valeur du champ cf-turnstile-response doit être contrôlée côté serveur.

Vérification serveur

Un appel à l'API est effectué, la valeur de la réponse dh champ cf-turnstile-response est transmise.

Voici un exemple basique de vérification en PHP avec Curl :

$data = [
   'secret'   => 'SECRET_KEY',
   'response' => $_POST['cf-turnstile-response'] ?? '',
];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://challenges.cloudflare.com/turnstile/v0/siteverify');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 3);
curl_setopt($ch, CURLOPT_TIMEOUT, 3);

$result = json_decode(curl_exec($ch), true);

if (!($result['success'] ?? false)) {
   // Failure
   $errors = $result['error-codes'] ?? ['Unavailable'];
} else {
   // Success
}

Pour plus d'information, consultez la documentation officielle : Server-side validation.

Modules et bundle

Un bundle Symfony et des modules pour Prestashop et Magento (Adobe Commerce) sont proposés par Pixel Open. Pixel Open est une initiative de l'agence Web Pixel développement pour le partage de projets Open-Source.

Une question ? Rejoignez-moi sur le Fédivers :
@magentix@magentix.space