Posting a JSON model to ASP.Net MVC3 with Anti-forgery token

Question

So, I've been banging my head against the wall with this, and I can't find any good sources for this. Maybe I'm forgetting how the model binding stuff works in MVC3, but here's what I'm trying to do: I have some an editor bound up with Knockout to handle editing of a model. There's not much to the model:

public class SetupTemplate
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Template { get; set; }
}

The signature of the action i'm trying to call is:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult UpdateTemplate(SetupTemplate template)

From another question on here, I picked up this rather helpful snippet to get the anti-forgery token:

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

Which all comes together with me trying to post an update via ajax:

payload = window.addAntiForgeryToken(ko.mapping.toJS(self.data));
$.ajax({
    type: "post",
    url: endpoint,
    data: payload,
    success: function(data) {
        //Handle success
    }});

Which results in this in the form data section of the Chrome developer tools

Id:1
Name:Greeting
Template: [Template Text]
__RequestVerificationToken: [The really long anti-forgery token]

The antiforgery token is picked up, but my model is null. Most examples I've seen of this just use a single parameter passed along, and not a model.

I'm sure I'm missing something obvious, any insights on what it could be?

EDIT: In response to @Mark, changing the call to this:

$.ajax({
type: "post",
dataType: "json",
contentType: 'application/json',
url: endpoint,
data: JSON.stringify(payload),
success: function(data) {
    //Do some stuff
}});

Results in a request payload of this:

{"Id":1,"Name":"Greeting","Template":"...","__RequestVerificationToken":"..."}:

And the server not picking up the anti-forgery token. This was tried both with and without the contentType parameters to $.ajax().

score 2 · Answer 1 · answered Dec 07 '12 at 21:16

The mapping did not work with the parameter as template because it clashes with one of the property that has the same name (bearing case). If you use anything other than template it will work well for that controller parameter.

There is a so link explaining the details, I'm not able to find that now easily.

public class SetupTemplate
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Template { get; set; }
}

score 2 · Answer 2 · answered Nov 19 '13 at 11:32

Here is my solution. Define a jQuery function like this:

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

    // (!) use ValidateJsonAntiForgeryToken attribute in your controller
    $.ajaxJsonAntiforgery = function (settings) {

        var headers = {};
        headers['__RequestVerificationToken'] = $.getAntiForgeryToken();

        settings.dataType = 'json';
        settings.contentType = 'application/json; charset=utf-8';
        settings.type = 'POST';
        settings.cache = false;
        settings.headers = headers;
        return $.ajax(settings);
    };
})(jQuery);

It just puts your verification token to headers. You also need filter attribute to check your antiforgery token. Here it is:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Helpers;
using System.Web.Mvc;

namespace MyProject.Web.Infrastructure.Filters
{

    [AttributeUsage(AttributeTargets.Method | AttributeTargets.Class,
                    AllowMultiple = false, Inherited = true)]
    public sealed class ValidateJsonAntiForgeryTokenAttribute
                                : FilterAttribute, IAuthorizationFilter
    {
        public void OnAuthorization(AuthorizationContext filterContext)
        {
            if (filterContext == null)
            {
                throw new ArgumentNullException("filterContext");
            }

            var httpContext = filterContext.HttpContext;
            var cookie = httpContext.Request.Cookies[AntiForgeryConfig.CookieName];
            AntiForgery.Validate(cookie != null ? cookie.Value : null,
                                 httpContext.Request.Headers["__RequestVerificationToken"]);
        }
    }
}

In your controller it's really easy, just mark it with new attribute (ValidateJsonAntiForgeryToken):

[Authorize, HttpPost, ValidateJsonAntiForgeryToken]
public ActionResult Index(MyViewModel viewModel)

And on the client side:

$.ajaxJsonAntiforgery({
    data: dataToSave,
    success: function() { alert("success"); },
    error: function () { alert("error"); }
});

It works for me. Enjoy!

That worked like a champ @roman-pushkin. Thanks for posting your solution. — Ken Palmer, Feb 20 '15 at 18:37
After some time I found that "__RequestVerificationToken" is not a good name. It's better to pick "X-RequestVerificationToken", so proxy servers will let this header go through. — Roman Pushkin, Dec 30 '15 at 19:37

score 1 · Answer 3 · answered Aug 30 '12 at 11:32

1

Can you try using JSON.stringify?

$.ajax({     
   type: "post",     
   url: endpoint,     
   data: JSON.stringify(payload),     
   success: function(data) {         
      //Handle success     
   } 
});

answered Aug 30 '12 at 11:32

VJAI

32,167
23
102
164

I updated my question with a response to this. In short: still no dice. – Matt Sieker Aug 30 '12 at 13:30
1

Is this post http://haacked.com/archive/2011/10/10/preventing-csrf-with-ajax.aspx helps you? – VJAI Aug 30 '12 at 13:34
and this http://stackoverflow.com/questions/2906754/how-can-i-supply-an-antiforgerytoken-when-posting-json-data-using-ajax – VJAI Aug 30 '12 at 13:36
Mark thanks for link 'Preventing CSRF With Ajax' - Phil Haack has resolved this issue for MVC3/4. – vladimir Apr 09 '13 at 16:41

score 1 · Accepted Answer · answered Aug 30 '12 at 14:40

@Mark gets credit for leading me down the right path for this, and pointing me at some links that now let me handle the anti forgery token rather transparently. However, what solved the issue was changing:

public ActionResult UpdateTemplate(SetupTemplate template)

to:

public ActionResult UpdateTemplate(SetupTemplate model)

And now it's properly filling in the values. I'd really like to know why that fixed it, but for now, it works.

score 0 · Answer 5 · answered Aug 17 '16 at 12:57

Actually the following worked for me with a complex object;

var application = {
    Criteria: {
        ReferenceNumber: $("input[name='Criteria.ReferenceNumber'").val()
    },
    AppliedVia: "Office"
};

// get the next step
$.ajax({
    url: form.attr("action"),
    dataType: "html",
    type: "POST",
    data: {
        __RequestVerificationToken: $("input[name=__RequestVerificationToken]").val(),
        application: application
    },
}

One thing of note however is to make sure that the left application in data should be the actual parameter name in your method/action. This works as of MVC 5 (pre .NET Core)

Posting a JSON model to ASP.Net MVC3 with Anti-forgery token

5 Answers5