3

Without Django Rest Framework, I used to create forms / POST requests like so:

<form id='loginForm' method="post" action="/register/">{% csrf_token %}
    ...
</form>

but I stared using Django Rest Framework and AngularJS on the frontend and I wasn't sure how to use the CSRF token, so I decided to do some research. I came across this website: http://blog.kevinastone.com/getting-started-with-django-rest-framework-and-angularjs.html and if you scroll down to the "Interlude: AngularJS + CSRF Protection" section, it says that I need to add the following script:

// Add the CSRF Token
var app = angular.module('example.app'); // Not including a list of dependent modules (2nd parameter to `module`) "re-opens" the module for additional configuration
app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.headers.common['X-CSRFToken'] = '{{ csrf_token|escapejs }}';
}]);

I then came across this SO post: Django csrf token + Angularjs which says that after adding

django.middleware.csrf.CsrfViewMiddleware

to my MIDDLEWARE_CLASSES is settings.py, all I need to add is the following lines 

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

Note that when I looked at other SO posts which explain how to do user authentication / registration using DRF and AngularjS (for example, this post: User Authentication in Django Rest Framework + Angular.js web app ) the answers do not include the lines:

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

With that said, what's the correct way to add CSRF Protection using Django Rest Framework and AngularJS?

Community
  • 1
  • 1
SilentDev
  • 20,997
  • 28
  • 111
  • 214
  • You may like to have a look at http://stackoverflow.com/questions/18156452/django-csrf-token-angularjs – Rajesh Kaushik Jul 13 '15 at 17:39
  • @RajeshKaushik right, I mentioned about that link in my post. Basically, I want to know what the recommended way to do it is because when I looked around, I found multiple ways to do is (I linked to the different ways I've seen / read in my post). I'm a bit confused because different people do it different ways and I'm not sure what the best approach is. – SilentDev Jul 13 '15 at 21:33
  • 1
    Sorry I don't remember the exact setup, but I demonstrate how to set it up in this video. https://www.youtube.com/watch?v=VZ8NIoLN-yQ]' – Chris Hawkes Jul 13 '15 at 23:40

1 Answers1

4

Your second way ($httpProvider.defaults) is probably the best way to do it. See the angular docs on http here. The xsrfCookieName and xsrfHeaderName options are relatively new in Angular. (I think they came in in 1.3, if memory serves...) So the other code you found probably just predated the newer, better way to do it. No need for a rendering or escape call in the template = cleaner code.

mitchell_st
  • 116
  • 4