Mettre en place les CORS et le CSRF entre un front et un back

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

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

Copier le code
1
2
3
4
5
6
7
8
9
CSRF_COOKIE_HTTPONLY = False # Pour permettre de récupérer les cookies en JS et les injecter dans le header

CORS_ALLOW_ALL_ORIGINS = False # Pour filtrer que les domaines à valider

CORS_ORIGIN_WHITELIST = (
"http://localhost:3000/", # Le domaine (front) qui sera accepter par le back
)

CORS_ALLOW_CREDENTIALS = True # Pour injecter les cookies dans le header JS

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.py

Configurer le front

Maintenant nous allons nous occuper de la partie front, une simple requête via la fonction fetch()

Copier le code
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const csrftoken = getCookie("csrftoken");

fetch(
  `${process.env.REACT_APP_URL}`, 
  {
    headers: {
      "X-CSRFToken": csrftoken, // Token récupéré des cookies
      Accept: `application/json`,
      "Content-Type": `application/json`,
  },
  credentials: "include", // Pour ajouter les cookies dans le header sinon erreur 403
  ...

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.