如何将csrf标记添加到angular 2应用程序

Question

我已经在java后端（在 SecurityConfig.java 文件中）启用了CSRF，因为它维护了angular2和spring app之间的用户会话。但是当帖子提交被解雇时，我还没有看到任何绑定到POST请求的CSRF令牌。

如何将 CSRF 令牌添加到 angular2 应用中。 （添加到帖子请求）

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;
}

Answer 1

你应该看一下developer guide of 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}为您的应用实施自定义策略。

Answer 2

直接使用CookieXSRFStrategy: Calling function 'CookieXSRFStrategy', function calls are not supported时，您可能会new CookieXSRFStrategy('myCookieName', 'My-Header-Name')}。使用工厂来避免此错误，如下所示：

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

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

Answer 3

您可以通过以下方式在JavaScript中阅读Cookie值（默认＆＃34; XSRF-TOKEN＆＃34;）吗？

document.cookie

（不是开发者工具。）

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

cookie路径必须设置为root（＆＃34; /＆＃34;），如下所示。

cookie.setPath("/");

Answer 4

在我的情况下，问题出在背面（正确指出harufumi.abe） - 我的Cookie附带路径 / my-domain 而不是 / < / em>的。 在后端添加设置后（spring boot 2.0）

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

一切都开始开箱即用。