角度重置CSRF令牌 [英] Angular resetting csrf token

问题描述

我正在使用Angular 6，很难将Django的csrf与Angular的csrf集成在一起。
我发现在该线程中 Django在登录时更改了令牌，因为我可以使用具有相同新会话的发布请求进行注册和登录，但登录后却不发布任何内容。

I'm using Angular 6 and having a hard time integrating Django's csrf with Angular's. I found in this thread that Django changes the token on login which, since I can both register and login using post requests with the same new session but not post anything after login seems to make sense.

问题就变成了我如何重置csrf令牌登录时。下面在我的应用模块代码中显示了在我的Angular应用中处理csrf的方式：

The question becomes how I go about resetting the csrf token on login. The way the csrf is handled now in my Angular app is shown in the below code for my app module:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule, XSRFStrategy, CookieXSRFStrategy } from '@angular/http'

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';
import { AlertComponent } from './_directives/alert.component';
import { ProfileComponent } from './profile/profile.component';
import { AuthGuardService } from './_guards/auth-guard.service';
import { AlertService } from './_services/alert.service';
import { AuthService } from './_services/auth.service';
import { UserService } from './_services/User.service';

@NgModule({
  declarations: [
    AppComponent,
    RegisterComponent,
    LoginComponent,
    AlertComponent,
    ProfileComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    HttpClientModule,
    HttpModule
  ],
  providers: [
    {
      provide: XSRFStrategy,
      useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

所以我的问题是，如何让我的应用重置登录时的值？ （不一定专门登录，但是如何获取该值以进行重置。）

So my question is, how do I get my app to reset the value on login? (Not necessarily specifically login, but how do I get that value to reset.)

推荐答案

很好的问题，这有点棘手而且我的回答还未经测试。但是，由于我找不到任何一篇文章/文章，因此在阅读了多个资料后，我决定放下对这个问题的看法：

Great question, this is a little tricky and my response is very much untested. However, since there was no single post/article I could find, I decided to put down what I make of this problem after reading multiple sources:

• Django和Angular默认都了解 CSRF；因此在发出POST请求时，您不需要 手动设置一个明确的CSRF标头值。


• 这与jQuery不同，在jQuery中，您必须从cookie中找到 CSRFToken，然后在标头中 set


• 但是，由于Angular不知道键的名称，从cookie中获取CSRF令牌的键的名称以及名称，在页眉中设置的键中，您需要配置在Angular中的键名。


• 再一次：您只需在此处设置键名，然后而不是值，因为＃1，Angular会自动执行此操作。
  
  

• Django and Angular both understand CSRF by default; so you don't need to manually set an explicit CSRF header value when you make POST requests.
• This is different from say jQuery where you have to find the CSRFToken from the cookie and then set the value it in the headers against the key "X-CSRFToken".
• However, since Angular does not know the name of the keys, the name of the key to get the CSRF token from the cookie, and the name of the key to set in the Header, you need to configure the key names in Angular.
• Once more: You are only setting the key names here, and not the values, because of #1, Angular does this automatically.

Angular的HttpClient内置了对这种技术的客户端一半的支持。在HttpClient指南中了解更多信息。

Angular's HttpClient has built-in support for the client-side half of this technique. Read about it more in the HttpClient guide.

您可以设置键名如下角度1 ：

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

在Angular 2 及更高版本如下所示：

The same can be achieved in Angular 2 and above as follows:

bootstrap(AngularApp, [
      HTTP_PROVIDERS,
      provide(XSRFStrategy, {useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')})
    ]);

• 是的，您是正确的，在登录时，CSRFToken的值更改，您将需要再次获取它，然后才能发出另一个POST请求。在其中也存在您的解决方案，登录后，对同一Django服务器执行简单的GET请求，这将确保它返回的cookie包含新更新的csrftoken 。这与您第一次如何向Django BE API发出POST请求的逻辑相同，这很简单，请事先进行GET请求


• Yes, you are right that upon login, the value of the CSRFToken changes, and you will need to GET it again, before you can make another POST request. And there-in lies your solution as well, after login, do a simple GET request to the same Django server, and it will ensure that the cookie it returns contains the newly updated csrftoken. This follows from the same logic as how do you make a POST request to a Django BE API the first time, simple, make a GET request beforehand




由于django不提供Angular应用，因此要设置
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.

此方法只有在您拥有 CSRF_USE_SESSIONS 设置为 False ，这意味着Django将CSRF令牌值设置为cookie的一部分

This approach only works if you have CSRF_USE_SESSIONS set to False, meaning Django sets the CSRF Token value as part of the cookie

相关阅读：



• http://django-angular.readthedocs.io/en/latest/csrf-protection.html


• > https://docs.djangoproject.com/en/2.0/ref/csrf/#ajax


• https://www.squarefree.com/securitytips/web -developers.html＃CSRF


• https：/ /angular.io/guide/security#xsrf


• https ：//angular.io/guide/http


• http://django-angular.readthedocs.io/en/latest/csrf-protection.html
• https://docs.djangoproject.com/en/2.0/ref/csrf/#ajax
• https://www.squarefree.com/securitytips/web-developers.html#CSRF
• https://angular.io/guide/security#xsrf
• https://angular.io/guide/http

这篇关于角度重置CSRF令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！