如何将 csrf 令牌添加到 Angular 2 应用程序答案

【问题标题】：How to add csrf token to angular 2 application如何将 csrf 令牌添加到 Angular 2 应用程序
【发布时间】：2016-12-25 07:20:04
【问题描述】：

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

如何将 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;
}

【问题讨论】：

标签： angular spring-security csrf csrf-protection spring-restcontroller

【解决方案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} 为您的应用程序实施自定义策略。

【讨论】：

在哪里添加上述选项@Nicolas？
在模块提供者中，我在答案中添加了详细信息
以下组件不适用于我。我正在使用 RC4。 ==================================================== === @Component({ providers: [ {provide: XSRFStrategy, useValue: new CookieXSRFStrategy('myCookieName', 'My-Header-Name')}, {provide: XSRFStrategy, useClass: MyXSRFStrategy} ] })
@NicolasHenneaux 我收到此错误"Could not verify the provided CSRF token because your session was not found"
我对 RC.4 进行了编辑。 @GauravRam 你使用什么策略？你确定你的服务器端工作正常吗？

【解决方案2】：

在直接使用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');
}

【讨论】：

【解决方案3】：

你能通过下面的JavaScript读取cookie值（默认为“XSRF-TOKEN”）吗？

document.cookie

（不是开发者工具。）

如果无法读取，你可能搞错了如何设置cookie。

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

cookie.setPath("/");

【讨论】：

【解决方案4】：

就我而言，问题出在背面（正如正确指出的 harufumi.abe） - 我的 cookie 带有路径 /my-domain 而不是 /。在后端添加设置后（spring boot 2.0）

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

一切都开箱即用。

【讨论】：