好吧。首先,您需要在标头中发送 XSRF 令牌。为此,您需要转到您的 ConfigureServices 方法并设置 AntiForgery 服务以接收此标头。
public void ConfigureServices(IServiceCollection services)
{
services.AddAntiforgery(x => x.HeaderName = "X-XSRF-TOKEN");
services.AddMvc();
}
接下来您需要生成令牌。由于前端和 API 是不同的服务,因此您需要在执行此操作时进行调整。例如,您可以在登录时执行此操作,或者您可以有一个专用端点执行此操作,但最终结果是相同的。
您可以在标头或 cookie 中返回令牌值,这取决于您。在我的示例中,我使用了 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 服务应该已经可以使用(它是您将在 .net 核心服务中使用的“AddMVC”调用的一部分)。
好的,现在我们返回了一个带有令牌值的 cookie。现在我们只需要能够将其发送回去。
这是一些 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”的 cookie,然后自动将其作为标头发送。因为您使用的是 Vue,所以无论如何您基本上都会这样做,但更多的是手动过程。
同样重要的是要注意,不要将其设置为期望 cookie 作为 CSRF 令牌返回。否则无论如何,你已经打败了 CSRF 的全部目的。
然后您可以继续使用 AntiForgery 属性装饰您的操作/控制器。
[AutoValidateAntiforgeryToken]
public class HomeController : Controller
{
总之,它基本上归结为:
- 设置 .net Core AntiForgery 以期望用于 CSRF 令牌的标头值
- 有一个端点,它将手动生成一个令牌供您使用并将其作为 cookie/header 返回
- 让您的前端读取此值并将其存储以供后续请求使用
- 在后续请求中,将令牌值作为标头发送(不是 cookie)
大部分取自这里:http://dotnetcoretutorials.com/2017/05/18/csrf-tokens-angularjsjquery-asp-net-core/