angularjs - CSRF token 丢失或不正确。 Django + AngularJS

Question

从我的 localhost 机器向远程 django api 发出 POST 请求时，我收到 CSRF token 丢失或不正确的错误。

我在 AngularJS 上的设置:

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

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

}]);

但我仍然得到 CSRF token 丢失或不正确 错误。

我检查正在发送哪些 header ，显然 Angular 没有发送 HTTP_X_CSRFTOKEN .

但我可以看到 cookie csrftoken=something 已发送。

有谁知道发生了什么？

请求头

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

正如@Chris Hawkes 指出@Ye Liu 给出的这个stackoverflow 答案

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.

我验证了只要你不发出http get请求， csrftoken cookie 没有设置。所以只有

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

行不通。如果不是真实的，您首先需要对 django rest_framework 进行模拟 http get 请求.

更新 : 您的评论促使我进一步研究，请阅读 blog哪里提到过，

CLIENT-SIDE GENERATED CSRF-TOKENS. Have the clients generate and send the same unique secret value in both a Cookie and a custom HTTP header. Considering a website is only allowed to read/write a Cookie for its own domain, only the real site can send the same value in both headers

所以让我们先尝试这个单一的请求。

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

您在哪里注入(inject) $cookies到 Controller /服务。

如果它有效，那么可能会写 interceptors将是不错的选择，并且还可以帮助您进行调试。

我确定您使用的 AngularJs 版本至少为 1.2，请参阅此 changeset
在最近提交的 Angular http 服务中使用此代码检查 csrf，

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

因此，您必须发送 cookie 中存在的相同 token 。

进一步分析使用浏览器的开发工具来查看 HTTP 请求的请求/响应并分析 header 和 cookie。