Django csrf token + Angularjs

Question

J'ai django qui fonctionne sur un serveur apache utilisant mod_wsgi, ainsi qu'une application angularjs servie directement par apache, et non par django. Je voudrais faire des appels POST au serveur de django (qui utilise rest_framework) mais j'ai des problèmes avec le jeton csrf.

Existe-t-il un moyen de définir le jeton à partir du serveur sans mettre {% csrf token %} comme partie du modèle (puisque ces pages ne passent pas par django) ?

1. J'aimerais pouvoir obtenir un jeton csrf par le biais d'une requête GET en tant que cookie.
2. J'aimerais pouvoir ensuite effectuer des requêtes POST vers le serveur django avec la valeur du cookie de la jeton csrf.

Answer 1

Django et AngularJS ont tous deux déjà un support CSRF, votre rôle est assez simple.

Tout d'abord, vous devez activer CSRF dans Django, je pense que vous l'avez déjà fait, sinon, suivez la doc Django. https://docs.djangoproject.com/en/1.5/ref/contrib/csrf/#ajax .

Maintenant, Django va définir un cookie nommé csrftoken sur la première requête GET et attend un en-tête HTTP personnalisé X-CSRFToken sur les demandes POST/PUT/DELETE ultérieures.

Pour Angular, il attend le cookie nommé XSRF-TOKEN et fera des demandes POST/PUT/DELETE avec X-XSRF-TOKEN Il faut donc faire quelques ajustements pour que les deux aillent de pair :

$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';

Ajoutez les deux lignes ci-dessus quelque part dans votre code js, le bloc module.config() est un bon endroit pour cela.

C'est tout.

NOTE : Ceci est pour angular 1.1.5, les versions plus anciennes peuvent nécessiter une approche différente.

Mise à jour :

Comme l'application angulaire n'est pas servie par django, pour que le cookie soit défini, l'application angulaire doit d'abord faire une requête GET à django.

Answer 2

var foo = angular.module('foo', ['bar']);

foo.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}]);

Et tous les modules services et contrôleurs, où $http est utilisé, enverront des requêtes avec le jeton csrf.

Answer 3

Après avoir cherché, j'ai trouvé ce qui a fonctionné pour moi. ce poste avec le code suivant :

angular.module( '[your module name]',
    ... [some dependencies] ...
    'ngCookies',
    ... [other dependencies] ...
)
.run( function run( $http, $cookies ){

    // For CSRF token compatibility with Django
    $http.defaults.headers.post['X-CSRFToken'] = $cookies.get('csrftoken');
})

Cela se fait bien sûr après avoir obtenu le cookie par une requête GET du serveur django.

J'ai également examiné certaines des autres réponses ici, y compris celle de Ye Liun, mais je n'ai rien trouvé dans la documentation officielle qui spécifie des changements aux options par défaut pour xsrf sur $httpProvider, autre que cette demande de retrait ce qui n'a pas fonctionné pour moi au moment où j'ai écrit ce billet.

Answer 4

J'ai créé une application Django pour mon application AngularJS, dans le même projet Django que mon application Django API (REST), qui ne sert que le fichier index.html (qui est juste un lien symétrique). De cette façon, le cookie CSRF est activé sans requête GET supplémentaire.

Veuillez consulter ma réponse ici concernant Application Web AngularJS à page unique sur le sous-domaine A communiquant avec une API Django JSON (REST) sur le sous-domaine B en utilisant la protection CORS et CSRF.

Answer 5

Jetez un coup d'œil à mon semis de domaines croisés angular/django. Il a un login fonctionnel qui définit le jeton et des requêtes fonctionnelles. Graine d'Angularjs/Django