angular, django and csrf

Question

from http://docs.angularjs.org/api/ng.$http , it says we should set default headers to include the token, so i am following it.

my code goes something like this

var myapp = angular.module('myapp', ['ngCookies', 'ui.bootstrap']).
    config(['$routeProvider', function($routeProvider, $httpProvider, $cookies){
        $routeProvider.
            when('/', {
                templateUrl: '/partials/home.html',
                controller: HomeCtrl
            }).
            when('/game/:gameId/shortlist/create',{
                templateUrl: '/partials/create-shortlist.html',
                controller: CreateShortlistCtrl
            }).
            otherwise({redirectTo: '/'});
    }]);

myapp.run(function($rootScope, $http, $cookies, $httpProvider){
    $http.get('/api/get-current-user').success(function(data){
        $rootScope.current_user = data;
        $rootScope.current_team = $rootScope.current_user.team;
    });
    $http.get('/api/get-current-season').success(function(data){
        $rootScope.current_season = data;
    });
    $rootScope.csrf_token = $cookies.csrftoken;
    console.log($httpProvider.defaults.headers.common);
    //$httpProvider.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
});

as you can see, i have applied multiple approaches but am unable to set header with csrf token. the two errors i have encountered are

Uncaught Error: Unknown provider: $httpProviderProvider <- $httpProvider

what am i doing wrong?

Reto Aebersold · Accepted Answer · 2013-06-26 20:17:49Z

21

If you use AngularJS 1.1.3 or newer you can use xsrfHeaderName and xsrfCookieName:

var myapp = angular.module('myapp', ['ngCookies', 'ui.bootstrap']).
  config(['$routeProvider', function($routeProvider, $httpProvider, $cookies){
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    ...

See $location in 1.1.3 the documentation.

answered Jun 26, 2013 at 20:17

Reto Aebersold

16.7k5 gold badges58 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yousuf Jawwad Over a year ago

better method. as it passes the unit/e2e tests with protractor

Mike · Accepted Answer · 2013-07-17 20:47:28Z

You can only use the $httpProvider in the config-method. But the problem is that you cannot use $cookies in the config-method. There only $cookiesProvider is supported. That is described (a bit) in the Module Loading & Dependencies section.

What you can do is set the headers at runtime as suggested in the angularjs.org docs

So to make your example work, you can do the following:

var myapp = angular.module('myapp', ['ngCookies', 'ui.bootstrap']).
    config(['$routeProvider', function($routeProvider){
        $routeProvider.
            when('/', {
                templateUrl: '/partials/home.html',
                controller: HomeCtrl
            }).
            when('/game/:gameId/shortlist/create',{
                templateUrl: '/partials/create-shortlist.html',
                controller: CreateShortlistCtrl
            }).
            otherwise({redirectTo: '/'});
    }]);

myapp.run(function($rootScope, $http, $cookies){
    // set the CSRF token here
    $http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;

    $http.get('/api/get-current-user').success(function(data){
        $rootScope.current_user = data;
        $rootScope.current_team = $rootScope.current_user.team;
    });
    $http.get('/api/get-current-season').success(function(data){
        $rootScope.current_season = data;
    });
});

And don't forget to include the angular-cookies.js file in your html-file!

phani · Accepted Answer · 2015-01-05 20:53:28Z

0

Here is a small lib that could make this more simple https://github.com/pasupulaphani/angular-csrf-cross-domain

answered Jan 5, 2015 at 20:53

phani

1,1341 gold badge11 silver badges24 bronze badges

Collectives™ on Stack Overflow

angular, django and csrf

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related