web-dev-qa-db-ja.com

ASP.NET CoreとJQueryでAntiforgeryトークンを有効にする

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 Coreアクションへ：

[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.

ASP.NET CoreのAntiForgeryTokenをJQuery Ajax呼び出しで有効にするにはどうすればよいですか？

[〜＃〜]更新[〜＃〜]

次の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()
  },

これを行うより良い方法はありますか？

フォームがなく、クリックするとAjax呼び出しを行うAタグしかない場合、これをどのように解決しますか？そのページからのすべてのajax呼び出しで使用される共通の偽造防止トークンをページヘッドに生成できますか？

jqueryajaxasp.net-coreantiforgerytoken
15
Miguel Moura

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は、フォームを使用する場合と同じように、偽造防止トークンを使用して非表示の入力フィールドを生成します。上記のコードは、クラスセレクターを使用してスパンを選択し、その内部の入力フィールドを取得してトークンを収集し、ヘッダーとして追加します。

16
Pieter van Kampen

注：この回答は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フラグメント。

9
ygoe

これにより、GETされないすべてのajax呼び出しにヘッダーを追加するグローバルajaxイベントを登録できます。

$(document).ajaxSend(function(e, xhr, options) {
    if (options.type.toUpperCase() != "GET") {
        xhr.setRequestHeader("RequestVerificationToken", token);
    }
});
3
mode777

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());
})
2
Ruard van Elburg

ygoe's answer に加えて、XSRFトークンをヘッダーとして渡したい場合は、例えばX-XSRF-Token：

var ajax = {
    url: "/users",
    data: data,
    type: "post",

    // ...
};

var antiForgeryToken = $("input[name=__RequestVerificationToken]").val();
if (antiForgeryToken) {
    ajax.headers = {};
    ajax.headers["X-XSRF-Token"] = antiForgeryToken;
};

$.ajax(ajax);

次に、それぞれの偽造防止オプションを指定する必要があります。

public void ConfigureServices(IServiceCollection services)
{
    // your services to inject are also configured here ...

    services.AddAntiforgery(options => options.HeaderName = "X-XSRF-Token");
    services.AddMvc();
}

次に、標準のValidateAntiForgeryToken属性を使用してリクエストを検証できます。

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult Users(UserModel user)
{
    // ...
}
0
Dmitry Karpenko