jQuery Ajax calls and the Html.AntiForgeryToken()

I have implemented in my app the mitigation to CSRF attacks following the informations that I have read on some blog post around the internet. In particular these post have been the driver of my implementation

  • Best Practices for ASP.NET MVC from the ASP.NET and Web Tools Developer Content Team
  • Anatomy of a Cross-site Request Forgery Attack from Phil Haack blog
  • AntiForgeryToken in the ASP.NET MVC Framework – Html.AntiForgeryToken and ValidateAntiForgeryToken Attribute from David Hayden blog

Basically those articles and recommendations says that to prevent the CSRF attack anybody should implement the following code:

  1. Add the [ValidateAntiForgeryToken] on every action that accept the POST Http verb

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult SomeAction( SomeModel model ) {
    }

  2. Add the <%= Html.AntiForgeryToken() %> helper inside forms that submits data to the server

Anyway in some parts of my app I am doing Ajax POSTs with jQuery to the server without having any form at all. This happens for example where I am letting the user to click on an image to do a specific action.

Suppose I have a table with a list of activities. I have an image on a column of the table that says “Mark activity as completed” and when the user click on that activity I am doing the Ajax POST as in the following sample:

$("a.markAsDone").click(function (event) {
    event.preventDefault();
    $.ajax({
        type: "post",
        dataType: "html",
        url: $(this).attr("rel"),
        data: {},
        success: function (response) {
            // ....
        }
    });
});

How can I use the <%= Html.AntiForgeryToken() %> in these cases? Should I include the helper call inside the data parameter of the Ajax call?

Sorry for the long post and thanks very much for helping out

EDIT:

As per jayrdub answer I have used in the following way

$("a.markAsDone").click(function (event) {
    event.preventDefault();
    $.ajax({
        type: "post",
        dataType: "html",
        url: $(this).attr("rel"),
        data: {
            AddAntiForgeryToken({}),
            id: parseInt($(this).attr("title"))
        },
        success: function (response) {
            // ....
        }
    });
});

20 Answers
20

Leave a Comment