asp.net - 使用 Angular 在 ASP.NET Core 中的 CSRF token 验证失败

Question

我正在尝试使用 CSRF-Token 来保护我的应用程序，因此我使用了 Angular 文档。他们说，如果在 Cookies 中你有一个名为 XSRF-TOKEN 的 cookie，那么这个 cookie 将自动提供给 Headers 中的后端，这确实是真的。每次我从我的 Angular 前端应用程序发出 POST 请求时，cookie 都会放在 header 中(作为 X-XSRF-TOKEN)。因此，我在 ASP .NET Core 中将默认的 Anti Forgery Token Cookie 名称更改为 XSRF-TOKEN:

// Startup.cs
services.AddAntiforgery(options =>
{
    options.HeaderName = "X-XSRF-TOKEN";
    options.Cookie = new CookieBuilder()
    {
        Name = "XSRF-TOKEN"
    };
});

我还在请求流中提供了 token 属性作为过滤器:

services.AddControllers(opt =>
{
    opt.Filters.Add(typeof(LoadFilter), Int32.MinValue); // my other custom filter
    opt.Filters.Add<AutoValidateAntiforgeryTokenAttribute>();
})

还有一个中间件负责将 token 存储在 cookie 中并在 POST 请求到来时对其进行验证:

    public class ValidateAntiForgeryTokenMiddleware
    {
        private readonly RequestDelegate _next;
        private readonly IAntiforgery _antiForgery;

        public ValidateAntiForgeryTokenMiddleware(RequestDelegate next, IAntiforgery antiForgery)
        {
            _next = next;
            _antiForgery = antiForgery;
        }

        public async Task Invoke(HttpContext context)
        {
            if (HttpMethods.IsGet(context.Request.Method))
            {
                _antiForgery.GetAndStoreTokens(context);
            }
                
            if (HttpMethods.IsPost(context.Request.Method))
            {
                await _antiForgery.ValidateRequestAsync(context);
            }
            await _next(context);
        }
    }

    public static class ApplicationBuilderExtensions
    {
        public static IApplicationBuilder UseAntiForgeryTokens(this IApplicationBuilder app)
        {
            return app.UseMiddleware<ValidateAntiForgeryTokenMiddleware>();
        }
    }

现在，每当我向后端服务器发出 GET 请求时，都会设置 XSRF-TOKEN cookie。但是，当我使用具有相同值的 XSRF-TOKEN cookie 和 X-XSRF-TOKEN header 发出 POST 请求时，出现错误。第一个错误，在我的本地开发机器上:

Antiforgery token validation failed. Validation of the provided antiforgery token failed. The cookie token and the request token were swapped

第二个错误，在我的开发服务器上，它会产生另一个错误，即使代码是相同的:

The required antiforgery cookie ".AspNetCore.Antiforgery.6zP9GDvCs-o" is not present.

此外，如果我在 ValidateAntiForgeryTokenMiddleware 中手动添加 cookie，一切似乎都能正常工作。但是，我有两个 XSRF-TOKENS，这似乎不是一个好的解决方案，因为它把安全方面放在另外两个地方，而我认为一个 cookie 就足够了。

Answer 1

在 Angular 边添加拦截器。确保在每个请求中添加 withCredentials: true。

http-xsrf-interceptor.ts

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, 
HttpXsrfTokenExtractor } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class XsrfInterceptor implements HttpInterceptor {
constructor(private tokenExtractor: HttpXsrfTokenExtractor) { }

intercept(req: HttpRequest<any>, next: HttpHandler): 
Observable<HttpEvent<any>> {
    req = req.clone({ withCredentials: true });
    const headerName = 'X-XSRF-TOKEN';
    const token = this.tokenExtractor.getToken() as string;
    if (token !== null) {
        req = req.clone({ headers: req.headers.set(headerName, token) });
    }
    return next.handle(req);
  }
}

app.module.ts - 在提供者部分。

   {
        provide: HTTP_INTERCEPTORS,
        useClass: XsrfInterceptor,
        multi: true
    },