- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte person00:00:00 :Dans cette partie, on va voir comment enlever le décorateur CSRF exempt ici.Donc on va rajouter le token CSRF dans notre fichier HTML.Il va falloir faire quelques modifications pour pouvoir envoyer le jeton avec notre requête ici.
00:00:14 :Donc ce que je vais faire, c'est déjà rajouter mon formulaire.Donc je rajoute une balise form ici.J'entoure donc mes deux inputs avec ce formulaire.
00:00:22 :Et on va ici mettre non pas une action, mais on va spécifier la méthode qui va être une méthode postpuisqu'on veut envoyer notre formulaire avec une méthode post.
00:00:32 :A l'intérieur de ce formulaire, je vais rajouter la balise qui me permet d'intégrer le jeton CSRF.Donc c'est une balise qui est comprise par Django et qui va automatiquement ajouter un input avec le jeton CSRF.
00:00:44 :Donc cette balise est CSRF token.Je referme ici avec le pourcentage et la collade.Et pour l'instant, je vais juste actualiser ma page.On va aller voir le code source de la page et vous allez voir qu'on a bien un input qui a été rajouté par Django.
00:00:57 :C'est sur View Page Source ici.Et on voit bien qu'on a un input qui est hidden, donc qui est caché avec le nom CSRF middleware tokenet une valeur qui est générée automatiquement par Django.
00:01:08 :Et donc c'est cette valeur que l'on va devoir récupérer et envoyer avec notre requête.Et si je rafraîchis la page et que je refais View Page Source, vous voyez que ici le jeton est à chaque fois différent.
00:01:20 :Donc c'est ça qui rajoute une sécurité supplémentaire.Et donc ce qu'on va devoir faire, c'est ici en javascript récupérer la valeur de ce jeton et l'envoyer avec notre requête.
00:01:29 :La première chose qu'on va faire ici, c'est utiliser ce event pour empêcher le formulaire d'être soumis.Puisque avec ce que j'ai rajouté ici, avec la balise formulaire,et bien automatiquement quand on va cliquer sur notre bouton avec le submit ici,ça va soumettre le formulaire et on va avoir la page qui va se rafraîchir.
00:01:44 :Donc je vais vous montrer ce que ça donne.Là si je mets 5 et 6 et que j'appuie sur Calculer, vous voyez qu'on a le résultat qui s'affiche très rapidement,mais il disparaît par la suite puisque la page est rafraîchie et on perd donc le résultat.
00:01:55 :Donc vous voyez on a le 11 qui s'affiche, la page est ensuite rafraîchie et on perd tout ce qu'on avait d'affiché.Donc ce que je vais faire ici, c'est empêcher le formulaire d'être soumis.
00:02:03 :Donc je vais pour ça utiliser event.preventDefault.Donc ça, ça va permettre d'éviter que le formulaire soit soumis.Donc ça va éviter le comportement par défaut du formulaire.
00:02:13 :Donc si j'actualise et que je refais l'opération, je clique sur Calculer.Et cette fois-ci vous voyez qu'on a bien le résultat qui est affiché et que la page n'est pas rafraîchie.
00:02:21 :Je vais enlever mon décorateur CSRF exempt ici.Donc j'enlève le décorateur, j'enlève l'import.Et donc en enlevant tout ça, là si j'actualise ma page, que je refais donc l'opération et que je clique sur Calculer,cette fois-ci ça ne fonctionne pas puisqu'on a cette erreur, donc le Forbidden CSRF Token Missing.
00:02:37 :Donc là c'est parce qu'on a en fait rajouté notre token CSRF, mais on ne l'a pas envoyé avec notre requête.Donc ce qu'il faut faire c'est déjà récupérer la valeur de ce jeton.
00:02:46 :Donc je vais faire une variable que je vais appeler CSRF Token Value.Et on va là encore avec Query Selector aller récupérer la valeur de notre jeton CSRF.
00:02:56 :Pour ça on va faire Document.QuerySelector et on va aller sélectionner en fait l'élément HTMLqui a l'attribut Name qui est égal à CSRF Middleware Token.
00:03:06 :Donc c'est cet attribut que l'on avait dans le code source.Si je raffiche le code source ici, vous voyez qu'on a un attribut Name qui est égal à CSRF Middleware Token.
00:03:15 :Donc on va prendre ce nom ici, puisqu'il est un peu dur à retenir,et on va cibler donc avec Query Selector ce nom, donc cet attribut nom,en mettant donc une chaîne de caractère et on va mettre entre crochets l'attribut Namequi est égal à CSRF Middleware Token.
00:03:30 :Donc ça, ça va nous permettre de récupérer cet input,donc l'input avec l'attribut Name qui est égal à CSRF Middleware Token.Et nous, ce qu'il nous faut, c'est l'attribut Value,donc la valeur ici qui est associée à cet attribut Value.
00:03:41 :Donc pour ça, je vais tout simplement mettre ici à la fin point Value et on termine avec un point virgule.Donc ça, ça va nous permettre de récupérer le jeton CSRF.
00:03:49 :Donc je vais faire un console.log pour vérifier si on arrive bien à le récupérer.Je reviens sur mon site ici, j'actualise,et on va aller voir dans la console de Google Chrome ce que ça donne.
00:04:00 :Donc je vais faire un clic droit Inspect.On se rend dans la console ici.On met des nombres au hasard, donc je vais remettre 5 et 6.
00:04:07 :J'appuie sur Calculer.Et là, on a bien le jeton qui est affiché.On a ensuite notre requête qui est effectuée et qui ne fonctionne paspuisqu'on n'a pas encore envoyé le jeton,mais pour l'instant, on a bien récupéré la valeur du jeton.
00:04:18 :Donc maintenant, il ne reste plus qu'à envoyer ce jeton avec notre requête.Pour ça, ce qu'on va faire, c'est qu'on va spécifier un header.Donc un header, c'est l'entête de notre requête.
00:04:28 :Donc pour ça, je vais le spécifier à l'intérieur de notre objet ici.On va mettre une virgule.On va à la ligne et on va spécifier une entête.
00:04:35 :Donc l'entête en anglais, c'est headers.Et on va spécifier un objet.Donc je remets des accolades ici.Donc bien faire attention avec vos accolades.On a la première accolade ici et la deuxième qui ferme.
00:04:45 :Et ensuite, on a un nouveau jeu d'accoladequi va nous permettre de spécifier la valeur du jeton CSRF.Donc je mets une chaîne de caractère.
00:04:53 :Et la valeur ici, c'est x-CSRFToken.Donc bien faire attention au majuscule et au minuscule.On a le x en majuscule, un tiret,ensuite CSRF en majuscule et token avec une majuscule sur le T.
00:05:05 :On va ensuite mettre un deux pointset la valeur que l'on a récupérée juste au-dessus ici.Donc la valeur du jeton que l'on associe à cette clé CSRFToken.
00:05:13 :Donc voilà, c'est tout ce qu'il suffit de faire.En fait, on rajoute cette entête avec le CSRFToken et la valeur associée.Donc là normalement, j'ai tout ce qu'il faut.
00:05:21 :Je vais envoyer ce CSRFToken à ma vue.Et donc comme ça, Django va pouvoir vérifier que le jeton n'a pas été modifié.Et il ne va donc cette fois-ci pas me retourner d'erreur.
00:05:30 :Et il va donc processer les données et me retourner le résultat de l'opération.Donc on va vérifier que tout fonctionne correctement.Je rafraîchis ma page, je mets 5, 6, j'appuie sur Calculer.
00:05:39 :Et là, vous voyez que ça fonctionne.On a bien le résultat qui est affiché.Et si je retourne dans mon terminal, je n'ai plus cette erreur.
00:05:45 :Donc l'erreur 403 avec le forbidden CSRFTokenMissing.Puisque cette fois-ci, on a bien envoyé le jeton avec notre requête dans l'entête de la requête.Donc voilà comment récupérer la valeur du jeton.
00:05:56 :Donc comment à l'intérieur de notre formulaire ajouter le jeton déjà avec cette balise CSRFToken.Comment ensuite cibler l'élément HTML avec le name qui est égal à CSRFMiddlewareToken.
00:06:07 :Ce qui nous permet donc de récupérer la valeur du jeton.Et ensuite tout simplement de l'envoyer avec l'entête de notre requête à notre vue Python ici.
00:06:15 :Ce qui permet donc d'avoir cette vérification qui est effectuée.Donc on a quelque chose qui est plus sécuritaire.Puisque le CSRFExempt c'est très pratique.Mais ça fait qu'on a en fait une faille dans notre site.
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.