Axios csrf token django

je construis une « application web hybride » (je posterai dessus dans un futur proche) en utilisant Vue à l’avant et Django à l’arrière. Une « application web hybride » se situe entre une SPA et un site web classique. Le serveur envoie le modèle HTML, le modèle HTML a un composant Vue, puis Vue prend place, monte dessus et fait ses tâches.

L’application se compose de plusieurs formulaires. Lorsque l’utilisateur appuie sur le bouton, le composant Vue effectue une requête (alias AJAX) à l’aide de la bibliothèque axios et le serveur répond avec des données JSON. La raison pour laquelle je souhaite effectuer un appel AJAX et non un envoi de formulaire habituel est que je ne souhaite pas que la page se rafraîchisse et que l’état de mon application Vue se réinitialise. Pour l’instant ça va.

Étant donné que ma vue Django est protégée, je veux qu’axios gère correctement le jeton CSRF pour moi et que tout fonctionne de manière transparente. Heureusement, il dispose de deux paramètres de configuration ( et ) qui Définissez l’en-tête approprié de la demande afin de transmettre le jeton CSRF au serveur.

Cependant, vous donne la possibilité d’ajouter des en-têtes (supplémentaires) à l’aide de l’objet config. C’est là que je me suis embrouillé. Quel est l’intérêt d’avoir deux paramètres distincts pour la gestion alors que vous pouvez les configurer manuellement dans les objets ?

Tout d’abord,

1. le formulaire n’inclut pas de champ de saisie caché nommé parce que nous voulons le passer au serveur en utilisant uniquement les en-têtes HTTP. Plus d’informations à ce sujet dans la section de la documentation Django.
2. Le jeton csrf est transmis au composant Vue en tant que prop. Ainsi, le composant connaît le jeton.

Communication Axios-Django avec les paramètres par défaut

Commençons par la toute première réponse du serveur au client lorsque ce dernier demande une page. Notez que nous utiliserons les valeurs par défaut que Django et axios fournit, en ce qui concerne le CSRF (aussi, j’ai supprimé certains en-têtes de demande/réponse non pertinents).

1. La toute première réponse du serveur. à cette valeur très longue !

1. La page s’affiche et le formulaire apparaît. Nous remplissons le formulaire et cliquons sur soumettre. Voici les en-têtes de requête :

Et voici les en-têtes 😢 de réponse :

Il semble que Django ne soit pas en mesure de vérifier le token CSRF. Mais comment Django le cherche-t-il ? N’oubliez pas que nous ne l’incluons pas à l’intérieur de l’entrée cachée.

Comment Django recherche le jeton CSRF

Django recherche deux fois le jeton csrf.

Lors de la première recherche, Django essaie d’obtenir le jeton qui s’est défini au début de la communication avec le client (regardez l’en-tête ci-dessus). Il y a deux endroits pour cela. S’il est stocké sous la forme d’un , Django le recherchera. Aussi si à l’intérieur du .

La deuxième phase est celle où le formulaire est soumis (une demande) et où la vue Django est protégée par CSRF. Maintenant, Django devra faire correspondre le jeton de la première phase avec celui de cette requête. Django cherche d’abord un paramètre de requête nommé à l’intérieur du dictionnaire. Comme nous ne le fournissons pas, Django l’ignore et recherche dans le dictionnaire un en-tête nommé (par défaut ).

Pour en revenir à notre application, il n’y a pas d’en-tête dans les en-têtes de requête ci-dessus. Ainsi, Django n’est pas en mesure de vérifier le jeton qui vient lorsque le formulaire est soumis avec le premier. Ainsi, vous obtenez un beau code de statut !

Solution(s)

Chaque solution présente des avantages et des inconvénients. Je mentionnerai les deux dans chaque cas.

Dans l’appel Axios, nous faisons ceci :

Actualisez tout et réessayons. Voici les en-têtes de la requête :

Et la réponse

Maintenant que la requête inclut l’en-tête (qui est la valeur par défaut de Django) avec le jeton comme valeur, le mécanisme CSRF vérifie le jeton initial et le nouveau jeton et répond avec le code d’état !

• Avantages : très simple à utiliser et il fonctionne avec le réglage.
• Inconvénients : si votre application comporte de nombreux formulaires, vous devez penser à la passer à chaque appel. Explicite vaut mieux qu’implicite, mais de nombreux développeurs sont paresseux. Ce qui nous amène à la deuxième solution.

À l’intérieur

de votre fichier (ou d’un autre fichier dont vous conservez vos configurations), entrez ceci :

Désormais, dans chaque appel axios que vous effectuez, axios intégrera l’en-tête approprié pour vous.

Voici les en-têtes de la demande :

Alerte spoiler ! La réponse contient un état code.

• Avantages : comme dit précédemment, vous le déclarez une fois dans votre fichier de configuration js et vous l’oubliez.
• Inconvénients : malheureusement, tourner Django vous donnera un

Tweaks/Playground

Vous pouvez changer les noms d’en-tête sur Django et axios et les choses fonctionneront toujours. Exemple :

Bien sûr, la même chose doit apparaître dans les paramètres d’axios :

La toute première réponse du serveur est celle-ci :

Et puis vient le formulaire de demande d’envoi :

La réponse est un statut !

Conclusion

La lecture du code source d’une bibliothèque (comme un Django) vous permet de comprendre certaines choses en profondeur et de savoir comment certaines pièces s’emboîtent. Essayez-le et vous ne perdrez pas !

Personnellement, je préfère la première approche (l’explicite) car pour des raisons de sécurité, j’ai toujours allumé. C’est une très bonne pratique et après tout....

L’explicite vaut mieux que l’implicite.

https://www.python.org/dev/peps/pep-0020/