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");

in ConfigureServices method, and

        app.UseAntiForgeryMiddleware();

in Configure method.

Antiforgery middleware:

public class AntiForgeryMiddleware
    {
        private readonly IAntiforgery antiforgery;
        private readonly AntiforgeryOptions options;
        private readonly RequestDelegate next;

        public AntiForgeryMiddleware(RequestDelegate next, IAntiforgery antiforgery, IOptions<AntiforgeryOptions> options)
        {
            this.next = next;
            this.antiforgery = antiforgery;
            this.options = options.Value;
        }

        public async Task Invoke(HttpContext context)
        {
            try
            {
                if (string.Equals(context.Request.Path.Value, "/", StringComparison.OrdinalIgnoreCase) ||
                    string.Equals(context.Request.Path.Value, "/index.html", StringComparison.OrdinalIgnoreCase))
                {
                    // We can send the request token as a JavaScript-readable cookie, and Angular will use it by default.
                    var tokens = antiforgery.GetAndStoreTokens(context);
                    context.Response.Cookies.Append("XSRF-TOKEN", tokens.RequestToken, new CookieOptions() { HttpOnly = false });
                }

                if (string.Equals("POST", context.Request.Method, StringComparison.OrdinalIgnoreCase))
                {
                    await antiforgery.ValidateRequestAsync(context);

                    context.Response.StatusCode = 204;
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }

            await next(context);
        }
    }

I use

[ValidateAntiForgeryToken]

on my controller action.

How do I set up angular2 post request to send x-xsrf-token header which will match net core app?

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!