Getting ValidateAntiForgeryToken working with Angular 4 and Asp.Net Core 2 -

i attempting security working angular 4 (4.3.5) on newly released asp.net core 2.0, , anti forgery tokens.

i using javascriptservices, provides starter application (its default angular template in visual studio 2017.3). javascript services hosts main page of angular site on .cshtml page. turns out quite beneficial, can lock down using standard forms authentication (dot net core identity), redirects user separate (non angular) login page @ /account/login when user not logged in. can log in on page , redirected home page , spa , running within context of authorised user.

that working application may found here.

the final piece of puzzle validateantiforgerytoken attributes working. fine when log in account/login page, not running in context of angular 4. when running within angular 4 on home page, when make post server, post blocked validateantiforgerytoken if attribute present.

because of have commented out validateantiforgerytoken attribute on account/logout method. because logging out site using angular http post. works when attribute not being used, fails/is blocked when used.

following angular 4 documention, found here, have changed anti forgery token name match angular 4 recognises. this, modified startup.cs file, adding in lines, follows:

public void configureservices(iservicecollection services) {             services.addantiforgery(options =>             {                 options.cookie.name = "xsrf-token";                 options.cookie.httponly = false;             }); ... } 

this should enable angular app access anti forgery cookie name angular 4 expects.

within app, have changed on use new httpclient service (apparently http service has been deprecated!) supposed use interceptor send xsrf_token automatically server.

but have been unable make work.

i tried standard post call using httpclient service:

this.httpclient.post(this.baseurl + 'account/logout', "", options).subscribe(result => {     location.replace("/"); }, error => {     console.error(error); }) 

i tried adding headers manually:

let token = this.cookieservice.get("xsrf-token"); console.log(token);  var httpheaders = new httpheaders({ 'xsrf-token': token })  this.httpclient.post(this.baseurl + 'account/logout', "", { headers: httpheaders }).subscribe(result => {     location.replace("/"); }, error => {     console.error(error); }) 

i tried using old service both , without added headers:

let token = this.cookieservice.get("xsrf-token");         console.log(token);          let headers = new headers({             //'content-type': 'application/json',             'x-xsrf-token': token         });         let options = new requestoptions({ headers: headers });         this.http.post(this.baseurl + 'account/logout', "", options).subscribe(result => {             location.replace("/")         }, error => console.error(error)); 

unfortunately, i've had no luck. has else managed working?

ok, i've figured out solution.

my index.cshtml page looks this:

@html.antiforgerytoken()  <app>loading...</app>  <script src="~/dist/vendor.js" asp-append-version="true"></script> @section scripts {     <script src="~/dist/main-client.js" asp-append-version="true"></script> } 

what generate anti-forgery token on server side, , place in hidden input field on page. when view page source, hidden input field looks this:

<input name="__requestverificationtoken" type="hidden" value="cfdj8daenvkvnl9ehpvzhkqwhc-pet4enm_svdteygzje4wnh34sbfg_d_aphtpzbm1jekquhssx1kwbivxaotpsovfmks5n_dln0sr3xrg-n2s0ofaa3-yvg87qdzxym1ybsyh7dlribu5it3wi2iyzwqyo4b1i_irtmikz41gmuldze8ve72zvqmehzav5rqihkw" /> 

in logout method, obtain token , submit in headers server-side controller. name of header requestverificationtoken, no underscores necessary.

logout() {      let token: = $("input[name=__requestverificationtoken]").val();     if (token !== null) {         var httpheaders: = new httpheaders({ 'requestverificationtoken': token });          this.httpclient.post("/account/logout", null, { headers: httpheaders }).subscribe(() => {             window.location.replace("/account/login");         }, error => {             console.log(error);         });     } } 

on server-side, antiforgery filter runs, compares submitted value, , if value expected, allow server side account/logout method executed.

the server-side method looks this:

// // post: /account/logout [httppost] [validateantiforgerytoken] public async task<iactionresult> logout() {   await _signinmanager.signoutasync();   return redirecttoaction(nameof(homecontroller.index), "home"); } 

putting break point in logout method prove executes.

there might gotcha here. not sure whether token changes on each request. haven't done testing on this. if does, new token need added page after each request.

also, did not need modify behaviour of default cookie. not doing angular 4 way. purely asp.net approach. is, in configureservices method in startup.cs file, have commented out cookie changes:

public void configureservices(iservicecollection services)         {             //services.addantiforgery(options =>             //{             //    options.cookie.name = "xsrf-token";             //    options.cookie.httponly = false;             //}); 

if think you've found better way of doing this, means, please post solution.