OKです。最初に、ヘッダーにXSRFトークンを送信する必要があります。これを行うには、ConfigureServicesメソッドに行き、このヘッダーを期待するようにAntiForgeryサービスを設定する必要があります。
public void ConfigureServices(IServiceCollection services)
{
services.AddAntiforgery(x => x.HeaderName = "X-XSRF-TOKEN");
services.AddMvc();
}
次に、トークンを生成する必要があります。フロントエンドとAPIは異なるサービスであるため、これを行う際には解決する必要があります。たとえば、ログインしたときや、専用のエンドポイントでこれを行うこともできますが、最終的な結果は同じです。
トークン値をヘッダーに戻すことも、それまでのクッキーを返すこともできます。私の例では、後で説明するCookieを使用しましたが、必要に応じてヘッダーを使用できます。
public class HomeController : Controller
{
private readonly IAntiforgery _antiForgeryService;
public HomeController(IAntiforgery antiForgeryService)
{
_antiForgeryService = antiForgeryService;
}
public IActionResult GetToken()
{
var token = _antiForgeryService.GetTokens(HttpContext).RequestToken;
HttpContext.Response.Cookies.Append("XSRF-TOKEN", token, new CookieOptions { HttpOnly = false });
return new StatusCodeResult(StatusCodes.Status200OK);
}
}
IAntiforgeryサービスが既に使用されることができるはずです(「AddMVC」のそれの一部は、.NETコアサービスで既に使用されます呼び出します)。
これで、トークン値を持つクッキーが返されました。今は、それを送り返すだけでいいのです。ここで
いくつかのjQueryは注意する
今
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.min.js"></script>
<script type="text/javascript">
var token = Cookies.get("XSRF-TOKEN");
$.ajax({
url: "/",
contentType: "application/json",
type: "POST",
headers: {
"X-XSRF-TOKEN": token
}
});
</script>
何かを取材をしているAngularJSはこれを自動的に行いますということです。 $ httpが使用されると、 "XSRF-TOKEN"という名前のクッキーが検索され、自動的にヘッダーとして送信されます。あなたがVueを使用しているので、基本的にはこれをやっていますが、もう少し手作業で作業します。
重要な点は、クッキーをCSRFトークンとして戻すように設定しないことです。とにかくCSRFの全目的を敗北させました。
次に、アクション/コントローラをAntiForgery属性で飾ることができます。それは基本的に沸く何結論
:ヘッダー値がトークンCSRFのために使用することを期待する
- セットアップ.NETコアAntiForgery
- 手動でトークンを生成しますエンドポイントを持っています
- フロントエンドにこの値を読み取り、それ以降の要求に保存します。
- その後の要求でトークンvalを送信しますヘッダ(未クッキー)
として、UEは、ほとんどがここから撮影:http://dotnetcoretutorials.com/2017/05/18/csrf-tokens-angularjsjquery-asp-net-core/
あなたは、フロントエンドに角のようなものを使用していますか? AngularがCSRFトークンなどのデフォルト設定を持っているので、これをあなたの質問に追加できますか? – MindingData
いいえ、vue.jsです。質問を適切に編集しました。 @MindingData – Mardoxx
OK 1秒。ただあなたのためにそれを働いて:) – MindingData