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 stackoverflow.com/questions/53086456/… — Shahid Manzoor Bhat
– Shahid Manzoor Bhat, Commented Dec 19, 2019 at 8:39

Athanasios Kataras · Accepted Answer · 2019-12-19 08:44:23Z

2

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',
  }),
],

answered Dec 19, 2019 at 8:44

Athanasios Kataras

26.7k6 gold badges40 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Batsheva Over a year ago

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?

Athanasios Kataras Over a year ago

No, you need the controller to get the cookie. The filter does the validation itself.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related