How to add csrf token to angular 2 application

Question

I have enabled the CSRF in the java back-end (in SecurityConfig.java file) due to maintain user sessions between the angular2 and spring app. but when the post submission fired, I haven't seen any CSRF token binded to the POST request.

How would be possible way to add the CSRF token to my angular2 app. (add to the post request )

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

Nicolas Henneaux · Answer 1 · 2016-08-23T05:37:08.303

9

You should have a look at the developer guide of Angular2. You can implement a strategy (or use an existing one) by using providers.

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')},
    ]
);

You can also implement a custom strategy for your application by using the following provider { provide: XSRFStrategy, useClass: MyXSRFStrategy}.

edited Aug 23 '16 at 05:37

answered Aug 18 '16 at 11:35

Nicolas Henneaux

11,507
11
57
82

Where to add the above mentioned options @Nicolas? – Gaurav Ram Aug 19 '16 at 21:16
In the module providers, I have add details in the answer – Nicolas Henneaux Aug 19 '16 at 21:25
Below component does not work with me. Im using RC4. ===================================================== **`@Component({ providers: [ {provide: XSRFStrategy, useValue: new CookieXSRFStrategy('myCookieName', 'My-Header-Name')}, {provide: XSRFStrategy, useClass: MyXSRFStrategy} ] })`** – Sadun89 Aug 21 '16 at 19:56
@NicolasHenneaux I'm getting this error `"Could not verify the provided CSRF token because your session was not found"` – Gaurav Ram Aug 22 '16 at 21:27
I have made an edit for RC.4. @GauravRam What strategy do you use ? Are you sure your server side is working correctly ? – Nicolas Henneaux Aug 23 '16 at 05:39
@GauravRam above segment not working n RC.0 or RC.1 – Sadun89 Aug 23 '16 at 06:54
@NicolasHenneaux am using RC.5 strategy like how you mentioned above. Yes, the server is working fine. Once page starts it works fine for GET request and after when I EDIT, POST or DELETE something from the list I get the above mentioned error. – Gaurav Ram Aug 23 '16 at 20:50

score 0 · Answer 2 · answered May 22 '17 at 12:40

You may have CookieXSRFStrategy: Calling function 'CookieXSRFStrategy', function calls are not supported while using new CookieXSRFStrategy('myCookieName', 'My-Header-Name')} directly. Use a factory to avoid this error like below :

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

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

score 0 · Answer 3 · answered Jun 27 '17 at 07:57

0

Can you read the cookie value(default "XSRF-TOKEN") in JavaScript by below?

document.cookie

(not developer tool.)

if it can't read,you maybe mistake how to set the cookie.

cookie path must be set root("/") like below.

cookie.setPath("/");

answered Jun 27 '17 at 07:57

harufumi.abe

817
9
8

score 0 · Answer 4 · answered May 21 '18 at 13:30

In my case, the problem was on the back side (as correctly pointed out harufumi.abe) - my cookies came with a path /my-domain instead of /. After adding the setting on the backend (spring boot 2.0)

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

everything began to work out of the box.

How to add csrf token to angular 2 application

4 Answers4

RC.5

RC.4

Linked