Django csrf token + Angularjs

by

Django and AngularJS both have CSRF support already, your part is quite simple.

First, you need to enable CSRF in Django, I believe you have already done so, if not, follow Django doc https://docs.djangoproject.com/en/1.5/ref/contrib/csrf/#ajax.

Now, Django will set a cookie named csrftoken on the first GET request and expects a custom HTTP header X-CSRFToken on later POST/PUT/DELETE requests.

For Angular, it expects the cookie named XSRF-TOKEN and will do POST/PUT/DELETE requests with X-XSRF-TOKEN header, so you need to do a little bit tweak to make the two go with each other:

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

Add above two lines somewhere in your js code, module.config() block is a good place for this.

That’s it.

NOTE: This is for angular 1.1.5, older versions might need different approach.

Update:

Since the angular app isn’t served by django, in order to let the cookie to be set, angular app needs to do a GET request to django first.

More Related Contents:

  1. Django Template Variables and Javascript
  2. AngularJS with Django – Conflicting template tags
  3. Passing Python Data to JavaScript via Django
  4. Error: [ngModel:datefmt] Expected `2015-05-29T19:06:16.693209Z` to be a date – Angular
  5. Returning JSON array from a Django view to a template
  6. Django authentication and Ajax – URLs that require login
  7. Passing data from Django to D3
  8. How to use the variables from “views.py” in JavasScript, “” in Django Template?
  9. How do I find what is common between 2 lists? [duplicate]
  10. simple form input request in angular
  11. What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
  12. How can I group data with an Angular filter?
  13. AngularJS : Difference between the $observe and $watch methods
  14. How to validate inputs dynamically created using ng-repeat, ng-show (angular)
  15. How to convert raw javascript object to a dictionary?
  16. How to make ng-bind-html compile angularjs code
  17. How to get the difference of two dates in mm-dd-hh format in Javascript
  18. How to make a directive update ng-model on jquery on event?
  19. Set active tab style with AngularJS
  20. How do I mock a service that returns promise in AngularJS Jasmine unit test?
  21. How to set default browser window size in Protractor/WebdriverJS
  22. Showing alert in angularjs when user leaves a page
  23. How can I access a variable outside a promise `.then` method?
  24. AngularJS – placeholder for empty result from filter
  25. Dynamically assign ng-model
  26. Accessing Angular inside Protractor Test
  27. How to implement hierarchical multilevel datatable in javaScript?
  28. What is the difference between Polymer elements and AngularJS directives?
  29. $resource callback (error and success)
  30. AngularJS: initialize ZURB Foundation JS

Leave a Comment