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

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