ASP.NET CoreでJavaScriptのfetch関数を使う

ASP.NET Coreで何も考えずにJavaScriptのfetch関数を使うとCSRF対策機能が働いて400エラー（Bad Request）になります。

対策

service

サービスの設定は.NET 8系のテンプレートだとProgram.csにある。

builder.Services.AddAntiforgery(x => x.HeaderName = "X-CSRF-TOKEN");

cshtml

cshtmlの上部（@pageや@modelなどの直下あたり）に以下を追加する。 サーバーサイドでCSRFトークンを生成する。

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Antiforgery
@{
    var requestToken = Antiforgery.GetAndStoreTokens(this.HttpContext).RequestToken;
}

javascript

fetch関数のheadersにCSRFトークンを展開する。

var data = { "head":"hage" }
fetch('/human', {
    method: 'POST',
    headers: {
        "X-CSRF-TOKEN": "@requestToken",
        "Content-Type": "application/json",
        "Accept": "application/json"
    },
    body: JSON.stringify(data)
});

おわり

関連項目

• ASP.NET CoreのPageModelのOnPost関数の引数でJSONを受け取る