Protéger ses formulaires avec Cloudflare

bonjour antoine solution engineer chez cloudflare dans cette vidéo je voulais vous parler de comment on peut protéger efficacement les soumissions de formulaire ces pages de login contre des attaques automatisées alors qu'est le problème ici sur cette page de login on va voir que j'essaye de m'authentifier donc voilà j'ai un incroyable chole donc le mot de passe était pas bon mais la problématique c'est que si je copie cette requête au pied à ce coeur et que dans ma console le col cette appel et que je suis capable de le rejouer de manière automatisée donc là dans mon terminal je pourrais très bien si j'étais un attaquant juste faire une boucle et changer les paramètres de email password pour tenter une infinité de couples login mot de passe jusqu'à trouver un bon couple login mot de passe pour voler un compte alors la première chose qu'on peut faire pour se protéger contre cette attaque c'est de faire un challenge lorsqu'on envoie un login je vous montre un exemple ici j'essaye de m'authentifier sur ce site de connecter et là on a le déclenchement d'un challenge donc en tant qu'utilisateur légitime j'ai réussi à passer et le site me dit voilà ce login mot de passe c'est pas bon mais il sait de rejouer un un peu cet appel donc ici je prends le poste je fais copy copy as curl et je vais le rejouer donc en essayant de rejouer cette requête on voit qu'elle est fou moi ici just a moment et on a cloudflare qui nous a nous envoie un challenge que curl est incapable de résoudre donc on est bloqué donc on va implémenter ça sur cette application donc je vais aller dans security rules mais créer une nouvelle règle une règle custom et je vais appeler ça challenge login est ce que je vais faire c'est je veux dire quand la requête match match le humain le slash et puis a et login la chipia et c'est juste lâche login et que le hostname est égal à le hostname de mon site et que le la méthode est un post et ce que je pourrais faire aussi c'est pour améliorer ma règle et mon expérimentisateur pour pas challenger tout le monde alors ça dépend de la situation mais je pourrais aussi choisir un critère pour identifier le trafic automatisé donc par exemple le bote score peut être une bonne solution on va laisser comme ça et comme action je vais choisir manette challenge donc je vais dire à cloudflare de choisir entre un de choisir le type de challenge interactif ou non interactif et je vais le mettre en premier et je vais déployer donc maintenant si je retourne sur mon application et que j'essaye de me loguer j'ai cloudflare qui m'envoie un challenge donc pour me dire pour tester mon navigateur donc ce qui fait que si j'essaye de rejouer ces requêtes c'est la login copie copie à ce cas je peux plus en fait je n'arrive plus à rejouer les requêtes là on voit qu'on est on est bloqué donc idéalement je le redis l'idée ce n'est pas de challenger tous les utilisateurs mais de rajouter une condition dans la règle pour cibler certains vous avez certains pays à vous choisir en fonction de votre contexte maintenant j'aimerais vous montrer une autre une autre façon que des applications web une façon d'implémenter les logins et comment comment on peut résoudre les problématiques de credential stuffing avec cette façon donc ici j'ai une login qui est implémenté avec des requêtes ajax donc c'est à dire que vous voyez ici j'ai aucun rechargement de la page et à chaque fois que je me logine j'ai une requête qui part dans mon indicateur et qui me renvoie ici du json donc on va tester est-ce que je peux rejouer cette requête copier à ce qu'on a essayé je suis capable de jouer la requête on voit incorrect donc ce qu'on va faire c'est qu'on va mettre en place un challenge et vous allez voir la difficulté qu'on va avoir alors je vais reprendre ma règle de tout à l'heure je vais juste la dupliquer et là notre passe c'est slash api slash login et je vais garder le challenge déployé alors maintenant que la règle est déployée je ne peux plus me loguer de manière automatisée donc notre règle fonctionne mais maintenant si je retourne sur ma page va avoir un problème ici c'est que mon mot de passe n'est pas bon et j'ai plus du tout le message dans mon application et en fait mon login est cassé puisque ici quand j'envoie normalement une requête sur slash api slash login j'attends du json en retour et là je me retrouve en fait avec du html donc j'ai une erreur dans mon application unexpected token et oui effectivement il ne s'attend pas à avoir du html et il en a html doctype is not valid json donc ça c'est quelque chose d'important c'est que on ne peut pas challenger du trafic d'API donc pour challenger du trafic d'API ici ce qu'on n'arrive pas à faire la recommandation ça va être pour protéger son login d'utiliser le module turnstyle de cloudflare alors il vous suffit d'aller sur votre compte pas sur un domaine mais sur le compte global aller sur application security et turnstyle là vous allez faire ajouter un widget et vous allez ajouter des hostname donc ici dans notre cas on va ajouter hello.antoine.dia.cc et donc là je vais choisir mon hostname on va mettre un nom, protect login par exemple et je vais choisir manage, je vais laisser Cloudflare choisir quel est le meilleur turnstyle à faire et là je vais avoir deux choses en fait un site key et un site secret key donc garder ce site key et ce secret key devers vous et ce qu'on va devoir faire et c'est dans la documentation sur notre page de login on va mettre un script ce script ici qui va faire tourner le turnstyle et on va ajouter aussi quelque part dans notre javascript ou sur la page ici entre deux badis script notre une fonction donc turnstyle callback c'est dans la documentation avec ici notre site key et ici on voit qu'on sélectionne un élément donc id mywidget et c'est l'endroit ça définit l'endroit ici j'ai une div avec l'id mywidget qui est l'endroit qui va en fait où est-ce qu'on va injecter le turnstyle donc me voilà ici dans le code de mon application sur la page où j'ai mon turnstyle ici j'ai mon widget donc là en dessous de mes éléments email password voilà ici et puis après j'ai le callback turnstyle et je mets myside key ici une fois fait vous allez avoir ce genre d'affichage donc avec le turnstyle juste en dessous mais attention ça c'est qu'une partie de l'implémentation parce que ce que va faire turnstyle donc il va ajouter un champ à notre formulaire avec une valeur dans la clé cf-turnstyle-response et ce que vous allez devoir faire c'est du côté backend valider avec votre clé que la signature la réponse ici du turnstyle le code est valide donc c'est ce que vous avez ici avec server-side integration code et côté backend ici j'ai cette route qui reçoit la soumission du formulaire pour le login et ce que je dois faire c'est récupérer cette clé cf-turnstack-réponse et la valider server-side alors comment ça se passe la validation on va être dans la documentation mais l'idée de la validation il faut envoyer à Cloudflare à setup-api le secret ainsi que votre votre token le token que vous avez reçu de la part de l'utilisateur et ce qui vous dira si l'authentification si le temps fil a été validé ou pas et maintenant si je fais un test je peux essayer de me login puis je vais le refaire en Ajax pardon login with Ajax ok voilà j'ai bien l'erreur qui marche bien et avec le challenge le turnstee et si l'attaquant par exemple essaye de rejouer à un code turnstile je fais copy copy as curl on voit que ça marche pas donc pour rappel sur le turnstile premièrement vous créez le turnstile dans cloudflare vous mettez l'élément là où vous voulez que le widget affiche vous ajoutez le script ici front-end le callback ensuite vous faites la validation server side et vous allez être protégé j'espère que cette vidéo a été intéressante merci de l'avoir regardée et à disposition pour la moindre question à bientôt