Django -Mettre en place les CORS et le CSRF entre un front et un back
9 juin 2022
Dans les applications de nos jours, le front est détaché du back. La communication entre les 2 éléments se fait au travers de requête HTTP.
Cet échange de données doit se faire de manière sécurisée en mettant en place notamment les CORS.
Cet acronyme signifie Cross-Origin Resource Sharing, ou plus simplement le partage d'une ressource HTTP permise entre 2 éléments (origin).
A savoir notre front et notre back dans cet exemple.
Il faut également se protéger du vol d'identité en ajoutant un token CSRF (Cross-Site Request Forgery). Ce dernier est un token généré par le back à chaque requête HTTP pour être intégré dans le front (formulaire par exemple) afin de valider les données. Cette vérification permet au back d'être certains que les données ont été initié dans un contexte connu car le token est généré par le back et vérifié à chaque requête
Nous allons donc commencer par installer une dépendance
Et enfin dans le back il faut mettre en place ensure_csrf_cookie pour que Django ajoute dans le Header le token CSRF afin que votre navigateur le place dans les cookies (afin que le front le récupère)
On utilise soit le décorateur
Maintenant nous allons nous occuper de la partie front, une simple requête via la fonction fetch()
Il est important de rajouter la propriété credentials dans le fetch cela permet d'injecter les cookies dans l'entête HTTP.
Si vous ne faites pas cela vous obtiendrez une erreur 403 !
En suivant ces étapes vous vous assurez de bien respecter le standard et de faire communiquer le front et le back de manière sécurisée.
blog comments powered by Disqus
Cet échange de données doit se faire de manière sécurisée en mettant en place notamment les CORS.
Cet acronyme signifie Cross-Origin Resource Sharing, ou plus simplement le partage d'une ressource HTTP permise entre 2 éléments (origin).
A savoir notre front et notre back dans cet exemple.
Il faut également se protéger du vol d'identité en ajoutant un token CSRF (Cross-Site Request Forgery). Ce dernier est un token généré par le back à chaque requête HTTP pour être intégré dans le front (formulaire par exemple) afin de valider les données. Cette vérification permet au back d'être certains que les données ont été initié dans un contexte connu car le token est généré par le back et vérifié à chaque requête
Configurer le back
Nous allons donc commencer par installer une dépendance
pip install django-cors-headers
pour configurer Django, pour cela il faut ajouter dans le fichier de configuration Et enfin dans le back il faut mettre en place ensure_csrf_cookie pour que Django ajoute dans le Header le token CSRF afin que votre navigateur le place dans les cookies (afin que le front le récupère)
On utilise soit le décorateur
@ensure_csrf_cookie
dans les views, soit la fonction ensure_csrf_cookie()
dans le fichier de routage url.pyConfigurer le front
Maintenant nous allons nous occuper de la partie front, une simple requête via la fonction fetch()
Il est important de rajouter la propriété credentials dans le fetch cela permet d'injecter les cookies dans l'entête HTTP.
Si vous ne faites pas cela vous obtiendrez une erreur 403 !
En suivant ces étapes vous vous assurez de bien respecter le standard et de faire communiquer le front et le back de manière sécurisée.