使用ASP.NET Core和JQuery启用Antiforgery Token

Question

我在ASP.NET Core 1.0.1中使用JQuery,我有Ajax调用:

$("#send-message").on("submit", function (event) {
  event.preventDefault();
  var $form = $(this);   
  $.ajax({
    url: "api/messages",
    data: JSON.stringify($form.serializeToJSON()),
    dataType: "json",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    type: "post"
  })
  .done(function (data, status, xhr) { })
  .fail(function (xhr, status, error) { });

到ASP.NET核心操作:

[HttpPost("messages")]
public async Task<IActionResult> Post([FromBody]MessagePostApiModelModel model) {
   // Send message
}

表单位于共享视图中,如下所示:

<form id="send-question" method="post">
  <textarea name="content"></textarea>
  <button class="button" type="submit">Enviar</button>
</form>

当我提交表单时,我收到错误:

Microsoft.AspNetCore.Antiforgery.AntiforgeryValidationException: The required antiforgery header value "RequestVerificationToken" is not present.

如何使用JQuery Ajax调用启用ASP.NET Core的AntiForgeryToken？

UPDATE

我需要在表单中添加以下asp-controller和asp-action:

<form asp-controller="QuestionApi" asp-action="Post" id="send-question" method="post">
</form>

这将生成防伪令牌.我需要手动将令牌添加到JQuery调用的标头中,如下所示:

  headers: {
    "Accept": "application/json",
    "Content-Type": "application/json",
    "RequestVerificationToken": $form.find("input[name='af_token']").val()
  },

有一个更好的方法吗？

如果没有表单我怎么解决这个问题,而且我只有一个A标签,当点击它时会调用Ajax？我可以在页面头上生成一个通用的防伪令牌,以供该页面的所有ajax调用使用吗？

Answer 1

mode777的答案只需要一点点补充就可以完成这项工作(我试过了):

$(document).ajaxSend(function(e, xhr, options) {
    if (options.type.toUpperCase() == "POST") {
        var token = $form.find("input[name='af_token']").val();
        xhr.setRequestHeader("RequestVerificationToken", token);
    }
});

实际上,如果您还使用Ajax提交,则根本不需要使用表单.把它放在你的_layout中:

 <span class="AntiForge"> @Html.AntiForgeryToken() </span>

然后通过将此添加到您的javascript来获取令牌:

$(document)
   .ajaxSend(function (event, jqxhr, settings) {
        if (settings.type.toUpperCase() != "POST") return;
        jqxhr.setRequestHeader('RequestVerificationToken', $(".AntiForge" + " input").val())
})

@HtmlAntiForgeryToken使用防伪令牌生成隐藏的输入字段,与使用表单时相同.上面的代码找到它使用类选择器来选择span,然后在其中获取输入字段以收集令牌并将其添加为标头.

Answer 2

注意:此答案适用于ASP.NET Core 2.0.它可能不适合旧版本.

这是我在深入挖掘aspnet源代码一段时间后所做的事情:

public static class HttpContextExtensions
{
    public static string GetAntiforgeryToken(this HttpContext httpContext)
    {
        var antiforgery = (IAntiforgery)httpContext.RequestServices.GetService(typeof(IAntiforgery));
        var tokenSet = antiforgery.GetAndStoreTokens(httpContext);
        string fieldName = tokenSet.FormFieldName;
        string requestToken = tokenSet.RequestToken;
        return requestToken;
    }
}

你可以在这样的视图中使用它:

<script>
    var data = {
        yourData: "bla",
        "__RequestVerificationToken": "@Context.GetAntiforgeryToken()"
    };
    $.post("@Url.Action("ActionName")", data);
</script>

您可以修改扩展方法,以您希望的任何形式返回字段的名称,例如:G.一个JSON片段.

Answer 3

在 Asp.Net Core 中，您可以直接请求令牌，如文档所述：

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf    
@functions{
    public string GetAntiXsrfRequestToken()
    {
        return Xsrf.GetAndStoreTokens(Context).RequestToken;
    }
}

并在 javascript 中使用它：

function DoSomething(id) {
    $.post("/something/todo/"+id,
               { "__RequestVerificationToken": '@GetAntiXsrfRequestToken()' });
}

您可以添加推荐的全局过滤器，如文档所述：

services.AddMvc(options =>
{
    options.Filters.Add(new AutoValidateAntiforgeryTokenAttribute());
})