jQuery Ajax调用和Html.AntiForgeryToken()

时间:2010-11-02 00:39:15

标签: asp.net-mvc ajax asp.net-mvc-2 csrf antiforgerytoken

我已经在我的应用程序中根据我在互联网上的一些博客文章中阅读的信息对CSRF attacks进行了缓解。特别是这些帖子是我实施的驱动因素

基本上这些文章和建议说,为了防止CSRF攻击,任何人都应该实现以下代码:

1)在接受POST Http动词

的每个动作上添加[ValidateAntiForgeryToken]
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult SomeAction( SomeModel model ) {
}

2)在向服务器提交数据的表单中添加<%= Html.AntiForgeryToken() %>帮助程序

<div style="text-align:right; padding: 8px;">
    <%= Html.AntiForgeryToken() %>
    <input type="submit" id="btnSave" value="Save" />
</div>

无论如何,在我的应用程序的某些部分,我正在使用jQuery向服务器进行Ajax POST,而根本没有任何形式。例如,当我让用户点击图像来执行特定操作时,会发生这种情况。

假设我有一个包含活动列表的表。我在表的一列上有一个图像,上面写着“将活动标记为已完成”,当用户点击该活动时,我正在进行Ajax POST,如下例所示:

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

在这些情况下如何使用<%= Html.AntiForgeryToken() %>?我应该在Ajax调用的data参数中包含帮助器调用吗?

很抱歉很长的帖子,非常感谢帮助

修改

根据jayrdub回答,我已按以下方式使用

$("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 个答案:

答案 0 :(得分:238)

我使用像这样的简单js函数

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

由于页面上的每个表单都具有相同的令牌值,因此只需将此类内容放在最顶层的母版页中

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

然后在你的ajax调用do(编辑以匹配你的第二个例子)

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

答案 1 :(得分:29)

我喜欢360Airwalk提供的解决方案,但可能会有所改进。

第一个问题是,如果使用空数据生成$.post(),jQuery不会添加Content-Type标头,在这种情况下,ASP.NET MVC无法接收并检查令牌。所以你必须确保标题始终存在。

另一项改进是支持带有内容的所有HTTP动词:POST,PUT,DELETE等。虽然您的应用程序中只能使用POST,但最好有一个通用的解决方案,验证您使用任何动词收到的所有数据都具有防伪令牌。

$(document).ready(function () {
    var securityToken = $('[name=__RequestVerificationToken]').val();
    $(document).ajaxSend(function (event, request, opt) {
        if (opt.hasContent && securityToken) {   // handle all verbs with content
            var tokenParam = "__RequestVerificationToken=" + encodeURIComponent(securityToken);
            opt.data = opt.data ? [opt.data, tokenParam].join("&") : tokenParam;
            // ensure Content-Type header is present!
            if (opt.contentType !== false || event.contentType) {
                request.setRequestHeader( "Content-Type", opt.contentType);
            }
        }
    });
});

答案 2 :(得分:21)

我知道还有很多其他答案,但是这篇文章很简洁,并且会强制您查看所有的HttpPost,而不仅仅是其中一些:

http://richiban.wordpress.com/2013/02/06/validating-net-mvc-4-anti-forgery-tokens-in-ajax-requests/

它使用HTTP标头而不是尝试修改表单集合。

服务器

//make sure to add this to your global action filters
[AttributeUsage(AttributeTargets.Class)]
public class ValidateAntiForgeryTokenOnAllPosts : AuthorizeAttribute
{
    public override void OnAuthorization( AuthorizationContext filterContext )
    {
        var request = filterContext.HttpContext.Request;

        //  Only validate POSTs
        if (request.HttpMethod == WebRequestMethods.Http.Post)
        {
            //  Ajax POSTs and normal form posts have to be treated differently when it comes
            //  to validating the AntiForgeryToken
            if (request.IsAjaxRequest())
            {
                var antiForgeryCookie = request.Cookies[AntiForgeryConfig.CookieName];

                var cookieValue = antiForgeryCookie != null
                    ? antiForgeryCookie.Value 
                    : null;

                AntiForgery.Validate(cookieValue, request.Headers["__RequestVerificationToken"]);
            }
            else
            {
                new ValidateAntiForgeryTokenAttribute()
                    .OnAuthorization(filterContext);
            }
        }
    }
}

客户端

var token = $('[name=__RequestVerificationToken]').val();
var headers = {};
headers["__RequestVerificationToken"] = token;

$.ajax({
    type: 'POST',
    url: '/Home/Ajax',
    cache: false,
    headers: headers,
    contentType: 'application/json; charset=utf-8',
    data: { title: "This is my title", contents: "These are my contents" },
    success: function () {
        ...
    },
    error: function () {
        ...
    }
});

答案 3 :(得分:19)

请勿使用 Html.AntiForgeryToken 。相反,请按照Preventing Cross-Site Request Forgery (CSRF) Attacks in ASP.NET MVC Application中的说明,使用Web API中的 AntiForgery.GetTokens AntiForgery.Validate

答案 4 :(得分:16)

我觉得这里是一名先进的死灵法师,但这仍然是4年后MVC5的一个问题。

要正确处理ajax请求,需要在ajax调用时将防伪令牌传递给服务器。将它集成到您​​的帖子数据和模型中是混乱和不必要的。将令牌添加为自定义标头是干净且可重复使用的 - 您可以对其进行配置,这样您就不必每次都记住这样做。

有一个例外 - 不显眼的ajax不需要对ajax调用进行特殊处理。令牌在常规隐藏输入字段中照常传递。与常规POST完全相同。

_Layout.cshtml

在_layout.cshtml中我有这个JavaScript块。它不会将令牌写入DOM,而是使用jQuery从MVC Helper生成的隐藏输入文字中提取它。作为标题名称的Magic字符串在属性类中定义为常量。

<script type="text/javascript">
    $(document).ready(function () {
        var isAbsoluteURI = new RegExp('^(?:[a-z]+:)?//', 'i');
        //http://stackoverflow.com/questions/10687099/how-to-test-if-a-url-string-is-absolute-or-relative

        $.ajaxSetup({
            beforeSend: function (xhr) {
                if (!isAbsoluteURI.test(this.url)) {
                    //only add header to relative URLs
                    xhr.setRequestHeader(
                       '@.ValidateAntiForgeryTokenOnAllPosts.HTTP_HEADER_NAME', 
                       $('@Html.AntiForgeryToken()').val()
                    );
                }
            }
        });
    });
</script>

注意在beforeSend函数中使用单引号 - 呈现的输入元素使用双引号来破坏JavaScript文字。

客户端JavaScript

执行此操作时,调用上面的beforeSend函数,并自动将AntiForgeryToken添加到请求标题中。

$.ajax({
  type: "POST",
  url: "CSRFProtectedMethod",
  dataType: "json",
  contentType: "application/json; charset=utf-8",
  success: function (data) {
    //victory
  }
});

服务器库

处理非标准令牌需要自定义属性。这是基于@ viggity的解决方案,但正确处理不引人注目的ajax。此代码可以隐藏在您的公共库中

[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)]
public class ValidateAntiForgeryTokenOnAllPosts : AuthorizeAttribute
{
    public const string HTTP_HEADER_NAME = "x-RequestVerificationToken";

    public override void OnAuthorization(AuthorizationContext filterContext)
    {
        var request = filterContext.HttpContext.Request;

        //  Only validate POSTs
        if (request.HttpMethod == WebRequestMethods.Http.Post)
        {

            var headerTokenValue = request.Headers[HTTP_HEADER_NAME];

            // Ajax POSTs using jquery have a header set that defines the token.
            // However using unobtrusive ajax the token is still submitted normally in the form.
            // if the header is present then use it, else fall back to processing the form like normal
            if (headerTokenValue != null)
            {
                var antiForgeryCookie = request.Cookies[AntiForgeryConfig.CookieName];

                var cookieValue = antiForgeryCookie != null
                    ? antiForgeryCookie.Value
                    : null;

                AntiForgery.Validate(cookieValue, headerTokenValue);
            }
            else
            {
                new ValidateAntiForgeryTokenAttribute()
                    .OnAuthorization(filterContext);
            }
        }
    }
}

服务器/控制器

现在您只需将该属性应用于您的Action。更好的是,您可以将属性应用于控制器,并且将验证所有请求。

[HttpPost]
[ValidateAntiForgeryTokenOnAllPosts]
public virtual ActionResult CSRFProtectedMethod()
{
  return Json(true, JsonRequestBehavior.DenyGet);
}

答案 5 :(得分:15)

我刚刚在我当前的项目中实现了这个实际问题。我为所有需要经过身份验证的用户的ajax-POST做了这个。

首先,我决定挂钩我的jquery ajax调用,所以我不要经常重复自己。此javascript代码段确保所有ajax(post)调用都将我的请求验证令牌添加到请求中。注意:.Net框架使用名称__RequestVerificationToken,因此我可以使用标准的Anti-CSRF功能,如下所示。

$(document).ready(function () {
    var securityToken = $('[name=__RequestVerificationToken]').val();
    $('body').bind('ajaxSend', function (elm, xhr, s) {
        if (s.type == 'POST' && typeof securityToken != 'undefined') {
            if (s.data.length > 0) {
                s.data += "&__RequestVerificationToken=" + encodeURIComponent(securityToken);
            }
            else {
                s.data = "__RequestVerificationToken=" + encodeURIComponent(securityToken);
            }
        }
    });
});

在您需要令牌可用于上述javascript的视图中,只需使用常用的HTML-Helper。您基本上可以随意添加此代码。我将它放在if(Request.IsAuthenticated)语句中:

@Html.AntiForgeryToken() // you can provide a string as salt when needed which needs to match the one on the controller

在您的控制器中,只需使用标准的ASP.Net MVC Anti-CSRF机制。我是这样做的(虽然我实际上使用过Salt)。

[HttpPost]
[Authorize]
[ValidateAntiForgeryToken]
public JsonResult SomeMethod(string param)
{
    // do something
    return Json(true);
}

使用Firebug或类似工具,您可以轻松查看POST请求现在如何附加__RequestVerificationToken参数。

答案 6 :(得分:11)

我认为您所要做的就是确保POST请求中包含“__RequestVerificationToken”输入。另一半信息(即用户cookie中的令牌)已经通过AJAX POST请求自动发送。

如,

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

答案 7 :(得分:5)

您也可以这样做:

$("a.markAsDone").click(function (event) {
    event.preventDefault();

    $.ajax({
        type: "post",
        dataType: "html",
        url: $(this).attr("rel"),
        data: $('<form>@Html.AntiForgeryToken()</form>').serialize(),
        success: function (response) {
        // ....
        }
    });
});

这是使用Razor,但如果您使用的是WebForms语法,那么您也可以使用<%= %>代码

答案 8 :(得分:4)

除了我对@ JBall答案的评论之外,这对我来说是最终的答案。我正在使用MVC和Razor,我正在使用jQuery AJAX提交表单,因此我可以使用一些新结果更新部分视图,并且我不想进行完整的回发(和页面闪烁)。

照常在表单中添加@Html.AntiForgeryToken()

我的AJAX提交按钮代码(即onclick事件)是:

//User clicks the SUBMIT button
$("#btnSubmit").click(function (event) {

//prevent this button submitting the form as we will do that via AJAX
event.preventDefault();

//Validate the form first
if (!$('#searchForm').validate().form()) {
    alert("Please correct the errors");
    return false;
}

//Get the entire form's data - including the antiforgerytoken
var allFormData = $("#searchForm").serialize();

// The actual POST can now take place with a validated form
$.ajax({
    type: "POST",
    async: false,
    url: "/Home/SearchAjax",
    data: allFormData,
    dataType: "html",
    success: function (data) {
        $('#gridView').html(data);
        $('#TestGrid').jqGrid('setGridParam', { url: '@Url.Action("GetDetails", "Home", Model)', datatype: "json", page: 1 }).trigger('reloadGrid');
    }
});

我已经离开了“成功”动作,因为它显示了如何更新包含MvcJqGrid的局部视图以及如何刷新它(非常强大的jqGrid网格,这是一个非常棒的MVC包装器)。

我的控制器方法如下所示:

    //Ajax SUBMIT method
    [ValidateAntiForgeryToken]
    public ActionResult SearchAjax(EstateOutlet_D model) 
    {
        return View("_Grid", model);
    }

我不得不承认不是将整个表单的数据作为模型发布的粉丝,但如果你需要这样做,那么这是一种有效的方法。 MVC只是使数据绑定太容易,而不是分配16个单独的值(或弱类型的FormCollection),这是可以的,我猜。如果你知道的更好,请告诉我,因为我想生成强大的MVC C#代码。

答案 9 :(得分:4)

从每个$ .ajax调用https://gist.github.com/scottrippey/3428114发现这个非常聪明的想法它会修改请求并添加令牌。

// Setup CSRF safety for AJAX:
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
    if (options.type.toUpperCase() === "POST") {
        // We need to add the verificationToken to all POSTs
        var token = $("input[name^=__RequestVerificationToken]").first();
        if (!token.length) return;

        var tokenName = token.attr("name");

        // If the data is JSON, then we need to put the token in the QueryString:
        if (options.contentType.indexOf('application/json') === 0) {
            // Add the token to the URL, because we can't add it to the JSON data:
            options.url += ((options.url.indexOf("?") === -1) ? "?" : "&") + token.serialize();
        } else if (typeof options.data === 'string' && options.data.indexOf(tokenName) === -1) {
            // Append to the data string:
            options.data += (options.data ? "&" : "") + token.serialize();
        }
    }
});

答案 10 :(得分:3)

1.定义从服务器获取令牌的函数

@function
{

        public string TokenHeaderValue()
        {
            string cookieToken, formToken;
            AntiForgery.GetTokens(null, out cookieToken, out formToken);
            return cookieToken + ":" + formToken;                
        }
}

2.在发送到服务器之前获取令牌并设置标头

var token = '@TokenHeaderValue()';    

       $http({
           method: "POST",
           url: './MainBackend/MessageDelete',
           data: dataSend,
           headers: {
               'RequestVerificationToken': token
           }
       }).success(function (data) {
           alert(data)
       });

第3。对您处理Post / get

的方法的HttpRequestBase进行Onserver验证
        string cookieToken = "";
        string formToken = "";
        string[] tokens = Request.Headers["RequestVerificationToken"].Split(':');
            if (tokens.Length == 2)
            {
                cookieToken = tokens[0].Trim();
                formToken = tokens[1].Trim();
            }
        AntiForgery.Validate(cookieToken, formToken);

答案 11 :(得分:1)

我知道自问题发布以来已经过了一段时间,但我找到了非常有用的资源,它讨论了AntiForgeryToken的使用方法,并且使用起来不那么麻烦。它还提供了jquery插件,可以轻松地在AJAX调用中包含防伪令牌:

Anti-Forgery Request Recipes For ASP.NET MVC And AJAX

我贡献不多,但也许有人会发现它很有用。

答案 12 :(得分:1)

这是我见过的最简单的方法。注意:确保视图中有“ @ Html.AntiForgeryToken()”

  $("a.markAsDone").click(function (event) {
        event.preventDefault();
        var sToken = document.getElementsByName("__RequestVerificationToken")[0].value;
        $.ajax({
            url: $(this).attr("rel"),
            type: "POST",
            contentType: "application/x-www-form-urlencoded",
            data: { '__RequestVerificationToken': sToken, 'id': parseInt($(this).attr("title")) }
        })
        .done(function (data) {
            //Process MVC Data here
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            //Process Failure here
        });
    });

答案 13 :(得分:0)

我发现的解决方案不是针对ASPX,而是针对Razor,而是一个可解决的问题。

我通过在请求中添加AntiForgery解决了它。 HTML Helper不会通过调用创建HTML ID

@Html.AntiForgeryToken()

为了将令牌添加到请求后,我刚刚使用jquery将AntiForgery id添加到了隐藏字段中:

$("input[name*='__RequestVerificationToken']").attr('id', '__AjaxAntiForgeryForm');

这导致控制器接受带有[ValidateAntiForgeryToken]属性的请求

答案 14 :(得分:0)

好吧,这里的帖子很多,都无济于事,谷歌的日子又过去了,而且我再也没想到要用wr从头开始编写整个应用程序,然后我注意到Web中有这个小块.confg

 <httpCookies requireSSL="false" domain="*.localLookup.net"/>

现在我不知道为什么添加它,但是后来我注意到了,它在调试模式下而不是在生产模式下被忽略(IE安装到IIS Somewhere)

对我来说,解决方案是2个选项之一,因为我不记得为什么添加了它,所以我不能确定其他因素不依赖它,其次,域名必须全部为小写,而TLD必须不是就像在* .localLookup.net

中完成的ive

也许有帮助也许没有帮助。我希望它能对某人有所帮助

答案 15 :(得分:0)

  

首先在html中使用@ Html.AntiForgeryToken()

 $.ajax({
        url: "@Url.Action("SomeMethod", "SomeController")",
        type: 'POST',
        data: JSON.stringify(jsonObject),
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        async: false,
        beforeSend: function (request) {
            request.setRequestHeader("RequestVerificationToken", $("[name='__RequestVerificationToken']").val());
        },
        success: function (msg) {
            alert(msg);
        }

答案 16 :(得分:0)

我使用ajax帖子来运行删除方法(恰好来自visjs时间轴,但这并不是一个rele))。这就是我的意思:

这是我的Index.cshtml

@Scripts.Render("~/bundles/schedule")
@Styles.Render("~/bundles/visjs")
@Html.AntiForgeryToken()

<!-- div to attach schedule to -->
<div id='schedule'></div>

<!-- div to attach popups to -->
<div id='dialog-popup'></div>

我在此处添加的所有内容均为@Html.AntiForgeryToken(),以使令牌显示在页面

然后在我使用的ajax帖子中:

$.ajax(
    {
        type: 'POST',
        url: '/ScheduleWorks/Delete/' + item.id,
        data: {
            '__RequestVerificationToken': 
            $("input[name='__RequestVerificationToken']").val()
              }
     }
);

将从页面上删除的标记值添加到已发布的字段

在此之前我尝试将值放在标题中,但我得到了相同的错误

随意发布改进。这当然似乎是一个我能理解的简单方法

答案 17 :(得分:0)

function DeletePersonel(id) {

    var data = new FormData();
    data.append("__RequestVerificationToken", "@HtmlHelper.GetAntiForgeryToken()");

    $.ajax({
        type: 'POST',
        url: '/Personel/Delete/' + id,
        data: data,
        cache: false,
        processData: false,
        contentType: false,
        success: function (result) {
        }
    });
}

public static class HtmlHelper {
    public static string GetAntiForgeryToken() {
        System.Text.RegularExpressions.Match value = 
                System.Text.RegularExpressions.Regex.Match(System.Web.Helpers.AntiForgery.GetHtml().ToString(), 
                        "(?:value=\")(.*)(?:\")");
        if (value.Success) {
            return value.Groups[1].Value;
        }
        return "";
    }
}

答案 18 :(得分:0)

360Airwalk解决方案略有改进。这将防伪标记嵌入到javascript函数中,因此不再需要在每个视图中包含@ Html.AntiForgeryToken()。

$(document).ready(function () {
    var securityToken = $('@Html.AntiForgeryToken()').attr('value');
    $('body').bind('ajaxSend', function (elm, xhr, s) {
        if (s.type == 'POST' && typeof securityToken != 'undefined') {
            if (s.data.length > 0) {
                s.data += "&__RequestVerificationToken=" + encodeURIComponent(securityToken);
            }
            else {
                s.data = "__RequestVerificationToken=" + encodeURIComponent(securityToken);
            }
        }
    });
});

答案 19 :(得分:-3)

AntiforgeryToken仍然是一种痛苦,上面的例子都没有为我逐字逐句。在那里太多了。所以我把它们结合起来。需要一个悬挂在iirc周围的表格中的@ Html.AntiforgeryToken

解决如此:

function Forgizzle(eggs) {
    eggs.__RequestVerificationToken =  $($("input[name=__RequestVerificationToken]")[0]).val();
    return eggs;
}

$.ajax({
            url: url,
            type: 'post',
            data: Forgizzle({ id: id, sweets: milkway }),
});

如有疑问,请添加更多$ sign