asp.net core 在vue等spa程序中防止csrf攻击

关于CSRF攻击的基本认识，asp.net core的官方文档上已经写的很清楚了。

简单提炼一下：如果你的网站登录了你的银行网站，恰好你访问了钓鱼网站，钓鱼网站就往银行网站，提交了一个转账表单，然后你的钱就被提走了（这是最基本的逻辑）

在mvc和razor pages技术做的网页，表单内部会默认因此了一个token字段，用于判断表单是否合法。
但是在全局启用了csrf验证的网站，难免会有js提交，或者有些网站后台等强交互的场景，使用了vue react 等js技术。

启用header验证token

 builder.Services.AddAntiforgery(opt =>
 {
     opt.HeaderName = "X-XSRF-TOKEN";
 });

添加csrf验证

在控制器上贴上[AutoValidateAntiforgeryToken]特性

访问wwwroot下的静态文件的时候，通过cookie输出csrf-token

 [HttpGet("/admin"), AllowAnonymous]
 public IActionResult Index([FromServices] IWebHostEnvironment webHostEnvironment)
 {
     var token = antiforgery.GetAndStoreTokens(HttpContext).RequestToken;
     HttpContext.Response.Cookies.Append("XSRF-TOKEN", token!, new CookieOptions()
     {
         HttpOnly = false
     });
     var html = Path.Combine(webHostEnvironment.WebRootPath, "admin", "index.html");
     if (System.IO.File.Exists(html)==false)
     {
         return Content("<h1>没有找到该文件</h1>", "text/html");
     }
     return PhysicalFile(html, "text/html");
 }

JavaScript读取csrf-token，并添加到请求的header里

我使用的是axios

http.interceptors.request.use((req) => {
  //jwt等操作
  req.headers.set("client", "web");
  req.headers.set("X-Requested-With", "XMLHttpRequest");
  let csrf = utils.getCookieValue("XSRF-TOKEN");
  if (csrf) {
    req.headers.set("X-XSRF-TOKEN", csrf);
  }
  return req;
});

然后请求，通过验证

-- 好像axios会自动带上XSRF-TOKEN，并放到header的X-XSRF-TOKEN上，果然知名开源库比我想得远。。。