Invalid CSRF token or invalid. Django + AngularJS

Question

I am getting a CSRF token or an incorrect error while executing a POST request on a remote django api from my localhost machine.

My settings on AngularJS:

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

but im still getting the missing CSRF token or invalid .

I check which headers are being sent and apparently angular is not sending HTTP_X_CSRFTOKEN .

But I see that cookie csrftoken = something has been sent.

Does anyone know what is going on?

Request header

 POST /s/login/ HTTP/1.1 Host: server.somewhere.io:8000 Connection: keep-alive Content-Length: 290 Pragma: no-cache Cache-Control: no-cache Accept: application/json, text/plain, */* Origin: http://localhost User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36 Content-Type: application/json;charset=UTF-8 Referer: http://localhost/thesocialmarkt/ Accept-Encoding: gzip, deflate Accept-Language: en-GB,en;q=0.8,en-US;q=0.6,pt-BR;q=0.4,pt;q=0.2 Cookie: csrftoken=hiYq1bCNux1mTeQuI4eNgi97qir8pivi; sessionid=1nn1phjab5yd71yfu5k8ghdch2ho6exc 

Answer 1

As @Chris Hawkes pointed out this stackoverflow answer given by @Ye Liu

Since the angular application is not supported by django in order for the cookie to be installed, the angular application must execute a GET request for django first.

I have verified that until you request an HTTP request, the csrftoken cookie is not set. So only

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

will not work. First you need to do, if not real, and then comment on the django rest_framework http request.

Update . Your comments prompted me to further study this issue. Please read this blog , which states a,

APARTMENTS. Ask clients to generate and send the same unique secret value in both the Cookie and the regular HTTP header file. Given that the website is read-only / cookie allowed for its own domain, only the real website can send the same value in both headers

So first try with this single request.

 $http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken; 

where you enter $cookies into the controller / service.

If it works, perhaps writing interceptors would be a good choice and also help you debug.

I am sure that you are using a version of AngularJs of at least 1.2, see this set of changes and at the recent end of the angular http service checking csrf with this code,

 var xsrfValue = urlIsSameOrigin(config.url) ? $$cookieReader()[config.xsrfCookieName || defaults.xsrfCookieName] : undefined; if (xsrfValue) { reqHeaders[(config.xsrfHeaderName || defaults.xsrfHeaderName)] = xsrfValue; } 

Therefore, it is necessary that you send the same token that is present in the cookie.

Next, analyze the use of your browser’s developer tool to see the request / response using an http request and analyze headers and cookies.

Answer 2

if you use $ HTTP in AngularJS to request ajax, and if you encounter a CSRF token problem, use this:

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