How to implement X-XSRF-TOKEN with angular2 app and net core app?

Question

I have my net core app and antiforgery middlweare set up in Startup.cs:

        services.AddAntiforgery(options => options.HeaderName = \"X-XSRF-TOKEN\");


        

Answer 1

Thanks to the CookieXSRFStrategy provided by Angular, Angular does that part for you.

In the case of Angular, you will be using their $http service for sending AJAX requests. This service will automatically include a header with the name X-XSRF-TOKEN if it can find the token value as a cookie with the name XSRF-TOKEN.

At the .net end you just have to create some middleware that will get the request token, and store its value as the XSRF-TOKEN cookie (HttpOnly = false).

Validation Process:-

1) The application will send back to the browser a cookie XSRF-TOKEN with the request token and another cookie .AspNetCore.Antiforgery.* with the cookie token.

2) Whenever Angular sends an Ajax request, the request will include a header X-XSRF-TOKEN with the request token and the cookie .AspNetCore.Antiforgery.* with the cookie token.

3) The Antiforgery validation will make sure that both tokens are valid and share the same secret, etc.

Since the default header name for the request token is RequestVerificationToken, we need to change it and make sure Antiforgery searches for the request token in a header with name X-XSRF-TOKEN. Let’s just manually add Antiforgery and setup the options in the ConfigureServices method:

services.AddAntiforgery(opts => opts.HeaderName = "X-XSRF-Token");

Now we need to make sure we generate the tokens and include the request token in a cookie with name XSRF-TOKEN so Angular $http service can read it and include it as the header.

This cannot be an http only cookie, since Angular code needs to read the cookie value so it can be included as a header in subsequent requests!

Answer 2

What you are talking about is inserting header x-xsrf-token into your request and send it to the backend.

You can accomplish that with modifying header options when you make http call:

Service

@Injectable
export class YourService {

    constructor(private http: Http) { }

    makeSomeRequst(data: any) {

        let headers = new Headers({ 'X-XSRF-TOKEN': yourTokenFromLocalStorage });
        let options = new RequestOptions({ headers: headers });

        this.http.post('url to your API call', data, options)
            .subscribe(result => {
                console.log('Your request was done and compliant to security on backend');
            }, err => {
                console.error('There was a problem with authentication');
                console.log(err)
            });
    }

}

With this, you will modify header and insert token to comply with your security mechanism. If you want to make that automated, you can follow this tutorial on how to create interceptor for http calls and insert token for all of them in one place, not to do it manually in every service:

You need to extend Angular's Http and provide new dependenices into your module. Follow the full tutorial here:

https://medium.com/aviabird/http-interceptor-angular2-way-e57dc2842462