如何在Angular 2应用程序中添加CSRF令牌

Question

我已在Java后端（在SecurityConfig.java文件中）启用了CSRF，以维护angular2和spring应用程序之间的用户会话。但是，当提交文章时，我没有看到任何CSRF令牌绑定到POST请求。

如何在我的 angular2 应用程序中添加 CSRF 令牌（添加到 post 请求）的可能方法。

---

loginService.ts

  userLogin(loginDTO){
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    var result = this._http.post(this._rest_service_login, JSON.stringify(loginDTO),options)
        .map(res => res.json());
    return result;
}

- Sadun89

Answer 1

您应该查看Angular2的开发者指南。您可以通过使用提供程序来实现策略（或使用现有策略）。

RC.5

@NgModule({
 (...) 
    providers: 
    [
        { provide: XSRFStrategy, useValue: new CookieXSRFStrategy('myCookieName', 'My-Header-Name')},
    ]
}) 
export class AppModule { }

RC.4

bootstrap(
    AppComponent,
    [
        { provide: XSRFStrategy, useValue: new CookieXSRFStrategy('myCookieName', 'My-Header-Name')},
    ]
);

您可以通过使用以下提供程序{ provide: XSRFStrategy, useClass: MyXSRFStrategy}来实施应用程序的自定义策略。

- Nicolas Henneaux

---

在哪里添加上述选项，@Nicolas？ - Gaurav Ram

在模块提供程序中，我已在答案中添加了细节。 - Nicolas Henneaux

以下组件与我不兼容。 我正在使用RC4。=====================================================@Component({ providers: [ {provide: XSRFStrategy, useValue: new CookieXSRFStrategy('myCookieName', 'My-Header-Name')}, {provide: XSRFStrategy, useClass: MyXSRFStrategy} ] }) - Sadun89

@NicolasHenneaux 我遇到了这个错误："由于未找到您的会话，因此无法验证提供的CSRF令牌"。 - Gaurav Ram

@NicolasHenneaux 我正在使用像你上面提到的RC.5策略。是的，服务器工作正常。一旦页面启动，对于GET请求它可以正常工作，但是当我从列表中进行编辑、POST或DELETE操作时，就会出现上述错误。 - Gaurav Ram

Answer 2

你能否通过以下方式在JavaScript中读取cookie值（默认为“XSRF-TOKEN”）？

document.cookie

（不是开发者工具。）

如果无法读取，您可能错误地设置了cookie。

cookie路径必须设置为根目录("/")，如下所示。

cookie.setPath("/");

- harufumi.abe

Answer 3

在我的情况下，问题出在后端（正如harufumi.abe所指出的那样） - 我的cookie带有路径/my-domain而不是/。 在后端（spring boot 2.0）添加设置后，问题得到解决。

# Path of the session cookie.
server.servlet.session.cookie.path=/

一切都开始顺利运作。

- midorum

Answer 4

你在使用 new CookieXSRFStrategy('myCookieName', 'My-Header-Name')} 时，可能会遇到 CookieXSRFStrategy: Calling function 'CookieXSRFStrategy', function calls are not supported 的错误。为了避免这个错误，可以使用以下工厂方法：

@NgModule({
 (...) 
    providers: 
    [
        { provide: XSRFStrategy, useFactory: xsrfFactory},
    ]
}) 
export class AppModule { }

export function xsrfFactory() {
    return new CookieXSRFStrategy('myCookieName', 'My-Header-Name');
}

- Radouane ROUFID