Token CSRF mancante o errato. Django + AngularJS

Question

Ricevo il token CSRF mancante o errore errato mentre faccio una richiesta POST a un django api remoto dal mio computer localhost.

mie impostazioni di AngularJS:

.config(['$httpProvider', function($httpProvider){ 

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

}]); 

ma im ancora trovato la CSRF errore di token mancante o errata.

Controllo quali intestazioni vengono inviate e apparentemente l'angolatura non invia HTTP_X_CSRFTOKEN.

Ma posso vedere che il cookie csrftoken = qualcosa viene inviato.

Qualcuno sa cosa sta succedendo?

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

Come @ Chris Hawkes ha sottolineato a questo StackOverflow risposta data dal @Ye Liu

Dal momento che l'applicazione angolare non è servita da Django, in modo da permettere il cookie da impostare, l'app angolare deve prima eseguire una richiesta GET su django .

Ho verificato che fino a quando non si effettua la richiesta HTTP, il cookie csrftoken non viene impostato. Quindi solo

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

non funzionava. È necessario prima fare se non reale, quindi prendere in giro http ottenere la richiesta di django rest_framework.

Aggiornamento: I vostri commenti mi hanno spinto a studiare ulteriormente, Si prega di leggere questo blog dove si è menzionato come,

lato client GENERATO CSRF-token. Chiedi ai clienti di generare e inviare lo stesso valore segreto univoco in un cookie e un'intestazione HTTP personalizzata. Considerando un sito web è consentito solo per leggere/scrivere un biscotto per il proprio dominio, solo il sito reale può inviare lo stesso valore in entrambe intestazioni

Quindi, consente di provare con questa singola richiesta prima.

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

dove si sta iniettando $cookies al controller/servizio.

Se funziona, allora potrebbe scrivere interceptors sarebbe una buona scelta e ti aiuterà anche a eseguire il debug.

Sono sicuro che stai utilizzando la versione di AngularJs almeno 1.2, Vedere questo changeset e negli ultimi commettono servizio http angolare checking CSRF con questo codice,

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

Quindi è necessario che si sta inviando stesso motivo che è presente in biscotto.

Ulteriori analisi utilizzano lo strumento di sviluppo del browser per visualizzare la richiesta/risposta con la richiesta http e analizzare intestazioni e cookie.

Answer 2

se si utilizza $ http in AngularJS per la richiesta Ajax e se si trovano ad affrontare qualsiasi problema token CSRF quindi utilizzare questo:

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