anti-forgery form field "__RequestVerificationToken" is not present when using jQuery Ajax and the Html.AntiForgeryToken()

Question

I implemented the Razor equivalent for the solution described in the accepted answer for this Question: jQuery Ajax calls and the Html.AntiForgeryToken() But I kept getting the following exception:

System.Web.Mvc.HttpAntiForgeryException (0x80004005): The required anti-forgery form field "__RequestVerificationToken" is not present.

edit

I manged to workaround it doing this:

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

function CallAjax(url, type, data, success, error) {

    var ajaxOptions = { url: url, type: type, contentType: 'application/json'};

    if (type == 'POST') {
        var fd = new window.FormData();
        fd = AddAntiForgeryToken(fd);
        $.each(data, function (i, n) {
            fd.append(i,n);
        });
        data = fd;
        ajaxOptions.processData = false;
        ajaxOptions.contentType = false;
    }

    ajaxOptions.data = data;

    if (success) ajaxOptions.success = success;

    //If there is a custom error handler nullify the general statusCode setting.
    if (error) {
        ajaxOptions.error = error;
        ajaxOptions.statusCode = null;
    };

    $.ajax(ajaxOptions);
}

But unfortunately FormData() is only supported in latest browser versions. Any workaround that could work before FormData() as introduced?

edit I wonder why the ValidateAntiForgeryTokenAttribute looks for the AntyForgeryToken only in the Form data, and doesn't look for it in the rout values as you can see below in the code of the sealed classes AntiForgeryTokenStore and AntiForgeryWorker?

public void Validate(HttpContextBase httpContext)
{
  this.CheckSSLConfig(httpContext);
  AntiForgeryToken cookieToken = this._tokenStore.GetCookieToken(httpContext);
  AntiForgeryToken formToken = this._tokenStore.GetFormToken(httpContext);
  this._validator.ValidateTokens(httpContext, AntiForgeryWorker.ExtractIdentity(httpContext), cookieToken, formToken);
}


public AntiForgeryToken GetFormToken(HttpContextBase httpContext)
{
  string serializedToken = httpContext.Request.Form[this._config.FormFieldName];
  if (string.IsNullOrEmpty(serializedToken))
    return (AntiForgeryToken) null;
  else
    return this._serializer.Deserialize(serializedToken);
}

Answer 1

Well, after digging some more I found a nice solution to my problem in this link: ASP.NET MVC Ajax CSRF Protection With jQuery 1.5

As far as I understand the solution described in the chosen answer for this question: jQuery Ajax calls and the Html.AntiForgeryToken(), shouldn't work (indeed it failed for me).

Answer 2

Create antiforgerytoken:

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    <input ...>
}

Create a function to add the token to the ajax request :

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

You can then use it like this:

$.ajax({
   type: "POST",
   url: '@Url.Action("MyMethod", "MyController", new {area = "MyArea"})',
   dataType: "json",
   traditional: true,
   data: addRequestVerificationToken( { "id": "12345678" } );
})
.done(function(result) {
   if (result) {
       // Do something
   } else {
       // Log or show an error message
   }
   return false;
});