jQuery Ajax calls and the Html.AntiForgeryToken()

ajax, antiforgerytoken, asp.net-mvc, asp.net-mvc-2, csrf

Solution

I use a simple js function like this

AddAntiForgeryToken = function(data) {
    data.__RequestVerificationToken = $('#__AjaxAntiForgeryForm input[name=__RequestVerificationToken]').val();
    return data;
};

Since every form on a page will have the same value for the token, just put something like this in your top-most master page

<%-- used for ajax in AddAntiForgeryToken() --%>
<form id="__AjaxAntiForgeryForm" action="#" method="post"><%= Html.AntiForgeryToken()%></form>

Then in your ajax call do (edited to match your second example)

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

Problem

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: Add the `[ValidateAntiForgeryToken]` on every action that accept the POST Http verb [HttpPost] [ValidateAntiForgeryToken] public ActionResult SomeAction( SomeModel model ) { } 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) { // .... } }); }); ```

Original source

Related problems