「ASP.NET CoreでJavaScriptのfetch関数を使う」の版間の差分
ナビゲーションに移動
検索に移動
Administrator (トーク | 投稿記録) |
Administrator (トーク | 投稿記録) |
||
| 11行目: | 11行目: | ||
cshtmlの上部（@pageや@modelなどの直下あたり）に以下を追加する。 | cshtmlの上部（@pageや@modelなどの直下あたり）に以下を追加する。 | ||
サーバーサイドでCSRFトークンを生成する。 | サーバーサイドでCSRFトークンを生成する。 | ||
| − | <source lang=""> | + | <source lang="text"> |
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Antiforgery | @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Antiforgery | ||
@{ | @{ | ||
2024年3月7日 (木) 01:39時点における最新版
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)
});
おわり
