CSRF 令牌丢失或不正确.Django + AngularJS [英] CSRF token missing or incorrect. Django + AngularJS

问题描述

从我的本地主机向远程 django api 执行 POST 请求时，我收到 CSRF 令牌丢失或不正确的错误.

I'm getting CSRF token missing or incorrect error while doing a POST request to a remote django api from my localhost machine.

我在 AngularJS 上的设置:

My settings on AngularJS:

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

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

}]);

但我仍然收到CSRF令牌丢失或不正确错误.

我检查正在发送哪些标头，显然 angular 没有发送 HTTP_X_CSRFTOKEN.

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

但是我可以看到发送了 cookie csrftoken=something.

But I can see that the cookie csrftoken=something is sent.

有人知道这是怎么回事吗?

Does anyone know what is going on?

请求标头

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

推荐答案

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

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

由于 Angular 应用程序不是由 django 提供的，为了让要设置 cookie，angular 应用程序需要向 django 发出 GET 请求首先.

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 就不会被设置.所以只有

I verified that as long as you don't make http get request, csrftoken cookie doesn't get set. So only

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

行不通.您首先需要制作如果不是真实的然后模拟 http get 请求到 django rest_framework.

would not work. You first need to make if not real then mock http get request to django rest_framework.

更新:您的评论促使我进一步研究它，请阅读此博客 哪里提到了，

Update: Your comments pushed me to further study it, Please read this blog where is has mentioned as,

客户端生成的 CSRF 令牌.让客户端生成并发送在 Cookie 和自定义 HTTP 中具有相同的唯一秘密值标题.考虑一个网站只允许读/写 Cookie对于自己的域，只有真实站点才能在两者中发送相同的值标题

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

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

So lets try with this single request first.

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

您将 $cookies 注入控制器/服务的位置.

where you are injecting $cookies to the controller/service.

如果可行，那么编写 interceptors 可能是不错的选择，也可以帮助您进行调试.

If it works then may be writing interceptors would be good choice, and would help you to debug as well.

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

I am sure you are using AngularJs version at least 1.2, See this changeset and in recent commit 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;
        }

因此，您必须发送 cookie 中存在的相同令牌.

So it's necessary that you are sending same token which is present in cookie.

进一步分析使用浏览器的开发者工具查看 http 请求的请求/响应并分析标头和 cookie.

Further to analyse use developer tool of your browser to see request/response with the http request and analyse headers and cookies.

这篇关于CSRF 令牌丢失或不正确.Django + AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！