如何配置ASP.Net Core防伪机制与Angular SPA协同工作

一、ASP.Net Core 后端配置 #

1. 注册并配置防伪服务 #

在Program.cs中添加防伪服务配置，适配Angular的默认行为：

builder.Services.AddAntiforgery(options =>
{
    options.HeaderName = "X-XSRF-TOKEN"; // Angular自动发送的请求头
    options.Cookie.Name = "XSRF-TOKEN"; // Angular默认读取的Cookie名称
    options.Cookie.SameSite = SameSiteMode.Lax; // 跨域场景可设为None（需配合HTTPS）
    options.Cookie.SecurePolicy = CookieSecurePolicy.Always; // 生产环境建议启用HTTPS时使用
    options.Cookie.HttpOnly = false; // 必须设为false，否则Angular无法通过JS读取Cookie
});

2. 向前端暴露防伪令牌 #

有两种方式让前端获取令牌：

方式一：通过API端点返回令牌

创建专用控制器提供令牌：

[ApiController]
[Route("api/antiforgery")]
public class AntiforgeryController : ControllerBase
{
    private readonly IAntiforgery _antiforgery;

    public AntiforgeryController(IAntiforgery antiforgery)
    {
        _antiforgery = antiforgery;
    }

    [HttpGet("token")]
    public IActionResult GetToken()
    {
        var tokens = _antiforgery.GetAndStoreTokens(HttpContext);
        return Ok(new { RequestToken = tokens.RequestToken });
    }
}

方式二：首次请求自动写入Cookie

如果后端托管Angular静态文件，可在中间件中自动生成令牌：

var antiforgery = app.Services.GetRequiredService<IAntiforgery>();

app.Use(async (context, next) =>
{
    if (context.Request.Path == "/")
    {
        var tokens = antiforgery.GetAndStoreTokens(context);
        context.Response.Cookies.Append("XSRF-TOKEN", tokens.RequestToken,
            new CookieOptions 
            { 
                HttpOnly = false, 
                Secure = true, 
                SameSite = SameSiteMode.Lax 
            });
    }
    await next();
});

3. 启用防伪验证与跨域配置 #

全局启用防伪验证

在Program.cs中为控制器添加全局过滤器，自动验证修改型请求：

builder.Services.AddControllers(options =>
{
    options.Filters.Add(new AutoValidateAntiforgeryTokenAttribute());
});

也可在单个控制器/方法上添加[ValidateAntiForgeryToken]实现局部验证。

跨域场景配置CORS

若Angular与后端不在同一域名，需允许凭证传递：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngular", policy =>
    {
        policy.WithOrigins("http://localhost:4200") // 替换为你的Angular地址
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // 必须开启，否则Cookie无法跨域传递
    });
});

// CORS中间件需放在路由和授权中间件之前
app.UseCors("AllowAngular");

二、Angular 前端配置 #

Angular的HttpClient默认自动处理XSRF令牌，只需注意两点：

1. 跨域请求携带凭证
   发送POST/PUT等请求时，设置withCredentials: true：

import { HttpClient } from '@angular/common/http';

export class DataService {
  constructor(private http: HttpClient) {}

  submitData(data: any) {
    return this.http.post('https://your-api-domain/api/data', data, { withCredentials: true });
  }
}

2. 自定义令牌配置（可选）
   若后端修改了Cookie/请求头默认名称，可在AppModule中自定义：

import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    HttpClientXsrfModule.withOptions({
      cookieName: 'CUSTOM-XSRF-COOKIE', // 对应后端Cookie名称
      headerName: 'CUSTOM-XSRF-HEADER' // 对应后端请求头名称
    })
  ]
})
export class AppModule {}

三、验证配置有效性 #

通过浏览器开发者工具检查：

• 首次请求后，Application标签的Cookies列表中是否存在XSRF-TOKEN。
• 发送POST请求时，Request Headers里是否包含X-XSRF-TOKEN，且值与Cookie一致。
• 后端返回状态码是否为200（验证失败会返回400错误）。

内容的提问来源于stack exchange，提问作者Turp