65

I have django running on an apache server using mod_wsgi, as well as an angularjs app served directly by apache, not by django. I would like to make POST calls to the django server (running rest_framework) but I am having problems with the csrf token.

Is there someway to set the token from the server without putting {% csrf token %} as part of the template (since these pages aren't going through django)?

  1. I would like to be able to get a csrf token through a GET request as a cookie.
  2. I would like to be able to then make POST requests to the django server with the csrf token cookie value.
3
  • Your making that POST call in a Django view? Or from the same domain using another framework? Commented Aug 9, 2013 at 22:20
  • @dan-klasson the latter, same domain no framework though
    – Preom
    Commented Aug 9, 2013 at 22:21
  • 1
    Just read this guide then: docs.djangoproject.com/en/dev/ref/contrib/csrf Commented Aug 9, 2013 at 22:37

5 Answers 5

112

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.

7
  • He still needs to set the cookie somehow. Commented Aug 9, 2013 at 22:47
  • @dan-klasson You're right, his angular app isn't served by Django.
    – Ye Liu
    Commented Aug 9, 2013 at 22:53
  • I gave you a +1 for the explanation on csrf and because it set me on the right path. Unfortunately, this didn't work for me, and I couldn't find a reference to the xsrfCookieNAme and and xsrfHeaderName in the official docs. Thank you, though.
    – Preom
    Commented Aug 10, 2013 at 6:27
  • @Preom FYI, xsrfCookieName and and xsrfHeaderName are documented after angular 1.2.
    – Ye Liu
    Commented May 12, 2014 at 13:42
  • 3
    I am getting the Set-Cookie header in login/ api which is POST. When should I call the GET request and how?
    – Asim K T
    Commented Feb 14, 2016 at 6:57
60
var foo = angular.module('foo', ['bar']);

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

And all modules services and controllers, where $http used, will send requests with csrf token.

2
  • As indicated below, this require AngularJS 1.1.5 or later. Commented Nov 1, 2013 at 20:41
  • This works. Just letting anyone reading this know... Really great post.
    – Mr_Spock
    Commented Apr 20, 2015 at 1:54
11

After searching around, what worked for me was from this post with the following code:

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');
})

This is of course after getting the cookie through a GET request from the django server.

I also looked into some of the other answers here, including Ye Liun's but couldn't find anything in the official docs specifying changes to the defaults options for xsrf on $httpProvider, other than this pull request which didn't work for me at the time of me writing this post.

3
  • I'm seeing a problem with doing things this way. When I emulate a first-time site visit in chrome with ctrl+shift+n, $cookies['csrftoken']; is undefined since I haven't sent any requests to my django server when that line is executed. I do an OPTIONS request first and then set the $http.defaults.headers.post['X-CSRFToken'] globally since the $cookies.csrftoken is then valid. Commented May 31, 2014 at 0:08
  • I solved the undefined issue by calling $cookiesProvider.$get() to generate a new local $cookies from document.cookies and then updating the csrf value on the $http defaults. I did this by shamefully creating a global reference to $cookiesProvider: var cookiesProvider_ref = null; app.config( function($cookiesProvider) {cookiesProvider_ref = $cookiesProvider });. I then use cookiesProvider_ref in my login success() callback to set the $http csrf token header field again. Commented Feb 19, 2015 at 18:10
  • I had to eventually just use the getCookie function recommended from Django's site as I preferred doing that to including a pointless extra trip to the server when the cookie was already sent down. docs.djangoproject.com/en/dev/ref/csrf/#ajax
    – jaywhy13
    Commented Jun 30, 2015 at 18:54
1

I created a Django App for my AngularJS app, in the same Django project as my (REST) API Django App, that only serves the index.html file (which is just a sym.link). In this way the CSRF Cookie is set without an additional GET request.

Please see my answer here about AngularJS Single Page Web Application on Sub-domain A talking to a Django JSON (REST) API on Sub-domain B using CORS and CSRF protection

0

If you have your cookies set to disallow javascript access, you need to do the following. In your template, before creating the django app, add this:

<script>
    window.csrf_token = "{{ csrf_token }}";
</script>

In your angular app, add this:

angularApp.config(["$httpProvider", function($httpProvider) {
    $httpProvider.defaults.headers.common["X-CSRFToken"] = window.csrf_token;
}]);

At least through Django 1.9, the CSRF token does not change with each request. It only changes when a user logs in. If you are doing a single page angular app, you need to make sure you reset the token on login/logout and this should work fine.

NOTE: This does not currently work in Django 1.10 or later due to the CSRF token changing on each request. See Pass Django CSRF token to Angular with CSRF_COOKIE_HTTPONLY

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.