Django + Angular 5 开发设置 CSRF 处理答案

【问题标题】：Django + Angular 5 development setup CSRF handlingDjango + Angular 5 开发设置 CSRF 处理
【发布时间】：2018-08-19 19:46:26
【问题描述】：

在 CSRF 验证方面，我当前的开发设置存在一些问题。由于我同时运行 Angular 开发服务器和 django 开发服务器，并且（自然）需要向后端发送请求，因此 CSRF 成为一个问题。 Django 通常在用户连接时分发令牌，但现在前端和后端如此断开连接，我无法以自然方式获取 CSRF 令牌。

我现在尝试的是添加一个 @csrf_exempt 装饰函数来获取 cookie，也可以使用 @ensure_csrf_cookie 装饰函数。我遇到的问题是，仍然在为请求设置适当的标头以包含 CSRF 令牌时，服务器仍然向我返回一条消息，指出不包含 CSRF cookie（废话！）。

所以，我的问题首先是如何正确设置 CSRF 令牌的标头，这就是我目前的做法（下面的打字稿）：

  constructor(private httpClient: HttpClient) {
    const cookies = document.cookie.split(';');
    for (let cookie of cookies) {
      cookie = cookie.trim();
      const re = new RegExp('^csrftoken');
      if (re.test(cookie)) {
        this.csrfToken = cookie;
        // this.csrfToken = cookie.substr(10, cookie.length);
        break;
      }
    }
    console.log('[RequestService] Got token: ' + this.csrfToken);
  }

  post(url: string, body: {}) {
    return this.httpClient.post(url, body, { headers: new HttpHeaders({ 'x-csrftoken': this.csrfToken }) });
  }

正如您在上面看到的，我已经注释掉了 cookie 提取的一部分。注释部分将删除初始的 'csrftoken=' 并保留令牌本身。我应该去掉 'csrftoken=' 部分还是留在那里？

这是我想用来获取更新 cookie 的 django 视图：

@csrf_exempt
@ensure_csrf_cookie
def get_csrf_token(request):
    return HttpResponse(status=200)

请求通过函数，但是当我使用document.cookies 手动检查当前的 cookie 时，我发现它仍然是没有更新的旧 cookie :(。

我曾想过在 django 中使用 CSRF_USE_SESSIONS 设置来强制每个请求发送更新的 CSRF，但对于这样一个简单的问题来说，这似乎有点过头了。

请指教！

【问题讨论】：

标签： django angular cookies csrf web-development-server

【解决方案1】：

答案在于我需要在我的 http 请求上设置另一个选项。该请求还有另一个名为 withCredentials 的选项字段需要设置为 true 才能包含 CSRF 信息。

我还需要对我得到的 cookie 进行子字符串化，以便仅包含 CSRF 令牌，而不包含前置的“csrftoken=”，这是在我提取它的构造函数内的注释行中完成的。

【讨论】：