How to implement ValidateAntiForgeryToken with angular 7 and asp.net web api

Question

My app's server side is built in Asp.Net web api and the client side is angular 7.

I can find many examples of how to implement ValidateAntiForgeryToken when using web forms, angularjs, working with Razor and etc.

But I cannot find any article or quesion explaining how to implement this with web api and how to call it from the angular service.

Can someone show a short example of the server side and client side implementing this?

You can have a look at a similar kind of question here https://stackoverflow.com/questions/53086456/anti-forgery-with-token-api-and-angular — Shahid Manzoor Bhat, Dec 19 '19 at 08:39

score 2 · Answer 1 · answered Dec 19 '19 at 08:44

You can use a combination of the following:

Web api create antiforgery token guide

Setup the application

    public void ConfigureServices(IServiceCollection services)
    {      
        services.AddAntiforgery(options =>
        {
            options.HeaderName = "X-XSRF-TOKEN";                               
        });

Create the controller action that will get you the token. You can also do this in a filter.

[ApiController]
public class AntiForgeryController : Controller
{
    private IAntiforgery _antiForgery;
    public AntiForgeryController(IAntiforgery antiForgery)
    {
        _antiForgery = antiForgery;
    }

  [Route("api/antiforgery")]
  [IgnoreAntiforgeryToken]
  public IActionResult GenerateAntiForgeryTokens()
  {
      var tokens = _antiForgery.GetAndStoreTokens(HttpContext);
      Response.Cookies.Append("XSRF-REQUEST-TOKEN", tokens.RequestToken, new Microsoft.AspNetCore.Http.CookieOptions
      {
          HttpOnly = false
      });            
      return NoContent();
  }

Apply it to every controller

public void ConfigureServices(IServiceCollection services)
{
    //...
    services.AddMvc(options =>
    {
        options.Filters.Add(new ValidateAntiForgeryTokenAttribute());
    });
    //...

Now for the client side, you can use the built in antiforgery mechanism http angular guide

imports: [
  HttpClientModule,
  HttpClientXsrfModule.withOptions({
    cookieName: 'Enter chosen name',
    headerName: 'Enter chosen name',
  }),
],

thanks for your answer. Is the 3td step is assuming the second step was not implemented as controller but as filter? can you provide filter example? and about the angular - after I import this modeule how do I use it? — Batsheva, Dec 19 '19 at 09:01
No, you need the controller to get the cookie. The filter does the validation itself. — Athanasios Kataras, Dec 19 '19 at 09:33

How to implement ValidateAntiForgeryToken with angular 7 and asp.net web api

1 Answers1