I am currently attempting to get security working properly with Angular 4 (4.3.5) on the newly released Asp.Net Core 2.0, and specifically anti forgery tokens.
I am using JavascriptServices, which provides the starter application (its the default Angular template in Visual Studio 2017.3). Javascript services hosts the main page of the Angular site on a .cshtml page. This actually turns out to be quite beneficial, as I can then lock everything down using standard forms authentication (dot net core Identity), which redirects the user to a separate (non Angular) login page at /Account/Login when the user is not logged in. You can then log in on that page and get redirected to the home page and the spa is up and running within the context of the authorised user.
That working application may be found here.
The final piece of the puzzle is the get the ValidateAntiForgeryToken attributes working. This is fine when you log in to the Account/Login page, as it is not running in the context of angular 4. But when I am running within Angular 4 on the home page, when I make a post back to the server, the post will be blocked by the ValidateAntiForgeryToken if that attribute is present.
Because of this I have commented out the ValidateAntiForgeryToken attribute on the Account/Logout method. This is because I am logging out from the site using an Angular http post. It works when the attribute is not being used, but it fails/is blocked when it is used.
Following the Angular 4 documention, found here, I have changed the Anti Forgery Token name to match what Angular 4 recognises. To do this, I modified my Startup.cs file, adding in some lines, as follows:
public void ConfigureServices(IServiceCollection services)
{
services.AddAntiforgery(options =>
{
options.Cookie.Name = "XSRF-TOKEN";
options.Cookie.HttpOnly = false;
});
...
}
This should enable the Angular app to access the Anti Forgery cookie with the name Angular 4 expects.
Within my app, I have just changed over to use the new HttpClient service (apparently the Http service has been deprecated!) which is supposed to use an interceptor to send the XSRF_TOKEN automatically to the server.
But I have been unable to make this work.
I tried a standard post call using the 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 the old service both with and 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 anyone else managed to get this working?