jQuery Ajax 调用和 Html.AntiForgeryToken()

Question

我已经按照我阅读的信息在我的应用程序中实施了对 CSRF 攻击 的缓解措施在互联网上的一些博客文章上。特别是这些帖子是我实施的驱动力

• ASP.NET MVC 最佳实践，来自 ASP.NET 和 Web 工具开发人员内容团队
• 跨站请求伪造攻击剖析 来自 Phil Haack 博客
• ASP.NET MVC 框架中的 AntiForgeryToken - Html.AntiForgeryToken 和 ValidateAntiForgeryToken 属性 来自 David Hayden 博客

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

1. 在接受 POST Http 动词的每个操作上添加 [ValidateAntiForgeryToken]

   [HttpPost] [验证防伪令牌] 公共 ActionResult SomeAction( SomeModel 模型 ) { }

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

无论如何，在我的应用程序的某些部分，我正在使用 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 调用的数据参数中包含帮助程序调用吗？

抱歉发了这么长的帖子，非常感谢您帮助

编辑：

根据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) {
            // ....
        }
    });
});

Answer 1

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 "";
    }
}

Answer 2

我正在使用 ajax post 来运行删除方法（恰好来自 visjs 时间线，但这不相关）。这就是我的：

这是我的 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()
              }
     }
);

其中添加了令牌值，从页面上刮下来，到发布的字段

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

请随意发布改进。这似乎是一个我可以理解的简单方法

Answer 3

好吧，这里有很多帖子，但没有一个对我有帮助，谷歌日复一日，我仍然没有进一步，我从头开始编写整个应用程序，然后我注意到我的 Web.confg 中的这个小金块

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

现在我不知道为什么我添加了它，但我后来注意到，它在调试模式下被忽略，而不是在生产模式下（IE安装到IIS某处）

对我来说，解决方案是两个选项之一，因为我不记得为什么我添加了它，我不能确定其他事情不依赖于它，其次，域名必须全部小写，并且 TLD 不像我在 *.localLookup.net 中所做的那样，

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

Answer 4

我找到的解决方案不是针对 ASPX，而是针对 Razor，但是相当可比的问题。

我通过将 AntiForgery 添加到请求中解决了这个问题。 HTML Helper 不会通过调用创建 HTML id

@Html.AntiForgeryToken()

为了将令牌添加到 postrequest，我刚刚使用 jquery 将 AntiForgery id 添加到隐藏字段：

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

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

Answer 5

上面的大部分答案都是针对 MVC 应用程序的。是的，您需要添加
@Html.AntiForgeryToken() 在您的 cshtml 文件上，并获取 js 文件中的安全令牌并将其用于 ajax post 的数据对象。

然而，在 C# 方面，请注意，如果您使用 Razor 页面，请注意您不能在方法顶部使用 [ValidateAntiForgeryToken] 属性。它不会给你一个错误，但不会有任何影响，因为它只适用于 MVC 应用程序。对于 razor 页面，您需要使用“model”类之上的属性。

例如;

[ValidateAntiForgeryToken]
public class IndexModel : PageModel
{
     // rest of the class
}

这会将属性应用于页面上的所有方法。

Answer 6

AntiforgeryToken 仍然是一个痛苦，上面的例子对我来说都没有一个字对我有效。那里太多了。所以我把它们全部结合起来。需要一个 @Html.AntiforgeryToken 以挂在 iirc 周围的形式

解决如下：

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

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

如有疑问，添加更多 $ 符号

Answer 7

我使用像这样的简单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调用中执行（编辑以匹配您的第二个示例）

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

Answer 8

我喜欢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);
            }
        }
    });
});

Answer 9

我知道还有很多其他答案，但这篇文章很好而且简洁，迫使您检查所有 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 () {
        ...
    }
});

Answer 10

我在这里感觉自己像个高级死灵法师，但这在 4 年后的 MVC5 中仍然是一个问题。

为了正确处理 ajax 请求，需要在 ajax 调用时将防伪令牌传递到服务器。将其集成到您的发布数据和模型中是混乱且不必要的。将令牌添加为自定义标头是干净且可重用的 - 并且您可以对其进行配置，这样您就不必每次都记住执行此操作。

有一个例外 - Unobtrusive 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);
            }
        }
    }
}

服务器/控制器

中现在您只需将该属性应用于您的操作即可。更好的是，您可以将该属性应用于控制器，并且所有请求都将得到验证。

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

Answer 11

不要使用Html.AntiForgeryToken。相反，请使用 Web API 中的 AntiForgery.GetTokens 和 AntiForgery.Validate，如 防止 ASP.NET MVC 应用程序中的跨站请求伪造 (CSRF) 攻击 。

Answer 12

我认为您所要做的就是确保“__RequestVerificationToken”输入包含在 POST 请求中。另一半信息（即用户 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) {
            // ....
        }
    });
});

Answer 13

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

首先，我决定挂接我的 jquery ajax 调用，这样我就不会太频繁地重复自己。这个 javascript 片段确保所有 ajax (post) 调用都会将我的请求验证令牌添加到请求中。注意：名称 __RequestVerificationToken 由 .Net 框架使用，因此我可以利用标准的反 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 帮助程序即可。基本上你可以在任何你想要的地方添加这段代码。我将其放在 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 反 CSRF 机制。我是这样做的（虽然我实际上使用了盐）。

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

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

Answer 14

您也可以这样做：

$("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 语法，您也可以使用 <%= %>< /代码> 标签

Answer 15

除了我对 @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# 代码。

Answer 16

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

// 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();
        }
    }
});

Answer 17

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);

Answer 18

首先在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);
        }

Answer 19

我知道这个问题发布已经有一段时间了，但我发现了非常有用的资源，其中讨论了 AntiForgeryToken 的用法并使其使用起来不那么麻烦。它还提供 jquery 插件，以便在 AJAX 调用中轻松包含防伪令牌：

ASP.NET MVC 和 AJAX 的防伪造请求配方

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

Answer 20

这是我见过的最简单的方法。注意：确保您的视图中有“@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
        });
    });

Answer 21

对 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);
            }
        }
    });
});