Use AntiForgeryToken with ASP.NET 5 and Angular

Question

On an ASP.NET 5 RC1 I have the following

[HttpPost]
public async Task<IActionResult> Create([FromBody]Post post) {
  // Create post
}

I have a CreatePost.html template used by angular with the form:

<form ng-controller="CreatePostController" ng-submit="create()">
  <label>Title</label>
  <input type="text" name="title">
  <label>Content</label>
  <input type="text" name="content">
  <button type="submit">Create</button>
</form>

The is in an HTML page. How to render the ASP.NET AntiForgeryToken? Can I create one on page head and use on all my website forms?
How to send the token when I call the API and verify it?

This might help: http://www.asp.net/web-api/overview/security/preventing-cross-site-request-forgery-(csrf)-attacks — masa, Nov 18 '15 at 20:19
Possible duplicate of [AntiForgery Token implementation in WebAPI+AngularJS app](http://stackoverflow.com/questions/25448204/antiforgery-token-implementation-in-webapiangularjs-app) — Stafford Williams, Nov 19 '15 at 01:11

score 1 · Answer 1 · answered Mar 25 '16 at 19:17

1

Setting in the header the antiforgery token once using AngularJS $http service
1. Expose a web api method to return the antiforgery token .

take a look this article: http://blog.novanet.no/anti-forgery-tokens-using-mvc-web-api-and-angularjs/

answered Mar 25 '16 at 19:17

jecaestevez

119
1
3

Voted up. Here is a page I bookmarked when doing the same thing. [link](http://www.asp.net/web-api/overview/security/preventing-cross-site-request-forgery-csrf-attacks) – Clint B Apr 21 '16 at 14:28

Mr. Hello · Answer 2 · 2016-05-02T00:30:16.610

1

There is a antiforgery middleware available in asp.net core rc1. you can use that. here is a simple blog I wrote on how you can achieve that.

http://fiyazhasan.me/angularjs-anti-forgery-with-asp-net-core/

edited May 02 '16 at 00:30

answered Apr 21 '16 at 06:56

Mr. Hello

68
6

This should be comment – ketan Apr 21 '16 at 07:12

score 0 · Answer 3 · answered Aug 25 '16 at 22:40

If you're using ui-router you can do something like the following. The beauty of this approach is that it only happens on state change not on every request to the server. If you're developing a SPA, and using any templates this will come in handy:

       $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
            if (IsAuthenticated()) {
                SetAntiForgeryCookie();
            }
        });

SetAntiForgeryCookey just does a $http GET request that calls a simple action:

    [HttpGet]
    public IActionResult Get()
    {
        var context = Request.HttpContext;
        var tokens = _antiForgery.GetAndStoreTokens(context);
        context.Response.Cookies
            .Append("XSRF-TOKEN", tokens.RequestToken, new CookieOptions() { HttpOnly = false });

        return new ObjectResult(true);
    }

Then I create an attribute to apply to my actions:

public class ValidateApiAntiForgeryTokenAttribute : ActionFilterAttribute
{
    private readonly IAntiforgery _antiForgery;

    public ValidateApiAntiForgeryTokenAttribute(IAntiforgery antiForgery)
    {
        _antiForgery = antiForgery;
    }

    public override async Task OnActionExecutionAsync(ActionExecutingContext context, ActionExecutionDelegate next)
    {
        await _antiForgery.ValidateRequestAsync(context.HttpContext);
        await base.OnActionExecutionAsync(context, next);
    }
}

The only thing I dont like about this approach is that in order to inject into the attribute I have to use the ServiceFilterAttribute on the action:

[ServiceFilter(typeof(ValidateApiAntiForgeryTokenAttribute))]

Also dont forget the middleware in ConfigureServices:

 services.AddAntiforgery(options => options.HeaderName = "X-XSRF-TOKEN");

Use AntiForgeryToken with ASP.NET 5 and Angular

3 Answers3