使用ajax post时如何处理CSRF攻击？

Question

我基本上想制作一个ajax帖子来发送一些stateId并从该州返回一些城市列表。

<form id="frmAjax" action="#">
    @Html.DropDownList("states", (SelectList)ViewBag.States)
    @Html.AntiForgeryToken()
</form>

我这样做的请求是这样的：

function PopulateTable() {
        var x=$("#frmAjax").serialize();
        $.ajax({
            url: '@Url.Action("GetCities")',
            type: 'POST',
            dataType: 'json',
            data: [1]
            success: function (data) {
                var target = $(".displayData tbody");
                target.empty();
                for (var i = 0; i < data.length; i++) {
                    target.append('<tr><td>' + data[i].Id + '</td><td>' + data[i].Name + '</td><td>' + data[i].Population+ '</td></tr>');
                }
            }
        });
    }

操作是这样的

    [ValidateAntiForgeryToken]
    public JsonResult GetCities([2])
    {
        var cities= new Service().GetCities(stateId);
        return Json(classes);
    }

我应该用什么来代替 [1] 和 [2] 以便它可以工作？我基本上希望这个 ajax 帖子与使用 AntiForgeryToken() 和 ValidateAntiForgeryToken 的常规帖子一样安全。 谢谢。

Answer 1

你几乎就在那里：

function PopulateTable() {
    $.ajax({
        url: '@Url.Action("GetCities")',
        type: 'POST',
        dataType: 'json',
        data: $("#frmAjax").serialize(),
        success: function (data) {
            var target = $(".displayData tbody");
            target.empty();
            for (var i = 0; i < data.length; i++) {
                target.append('<tr><td>' + data[i].Id + '</td><td>' + data[i].Name + '</td><td>' + data[i].Population+ '</td></tr>');
            }
        }
    });
}

然后：

[ValidateAntiForgeryToken]
[HttpPost]
public JsonResult GetCities(int stateId)
{
    var cities = new Service().GetCities(stateId);
    return Json(cities);
}

这显然假设你使用视图模型（顺便说一下，你应该总是使用它）并且：

@Html.DropDownListFor(x => x.StateId, Model.States)

或者如果你不想使用视图模型（违反我的建议），请确保你提供一个这个弱类型助手的正确名称：

@Html.DropDownList("stateId", (SelectList)ViewBag.States)