.NET 6后端+Vue.js SPA是否需配置AntiForgeryToken及实现方法

是否需要配置AntiForgery令牌？ #

需要。只要你的后端采用基于Cookie的认证机制（比如ASP.NET Core Identity、Cookie认证方案），浏览器会自动在跨域请求中携带Cookie，这就给CSRF攻击留下可乘之机——攻击者可诱导已登录用户访问恶意站点，触发伪造请求到你的后端。哪怕是SPA，只要符合这个场景，就必须做CSRF防护。

如果后端用的是Token-based认证（比如JWT存在localStorage），且请求时手动在Header里携带Token，这种情况CSRF风险极低，无需强制配置，但安全扫描工具可能仍会告警，可结合实际认证方式调整防护策略。

具体实现步骤 #

1. 后端.NET 6配置 #

启用AntiForgery服务

在Program.cs中注册服务，配置令牌的Cookie名称与前端请求Header名称：

builder.Services.AddAntiforgery(options =>
{
    options.Cookie.Name = "X-CSRF-TOKEN";
    options.HeaderName = "X-XSRF-TOKEN"; // 前端请求时需携带的Header键名
});

配置验证范围

• 全局验证：让所有POST/PUT/DELETE等修改请求自动验证，在Program.cs中添加全局过滤器：

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

• 局部验证：仅给特定控制器/方法加验证，直接标记[ValidateAntiForgeryToken]特性：

[ApiController]
[Route("api/[controller]")]
public class UserController : ControllerBase
{
    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult CreateUser(UserDto model)
    {
        // 业务逻辑实现
        return Ok();
    }
}

提供令牌获取接口

新增GET接口供前端获取AntiForgery令牌：

[HttpGet("get-csrf-token")]
public IActionResult GetCsrfToken()
{
    var token = HttpContext.RequestServices.GetRequiredService<IAntiforgery>().GetAndStoreTokens(HttpContext);
    return Ok(new { token = token.RequestToken });
}

2. 前端Vue.js实现 #

获取并存储令牌

在Vue项目入口文件（如main.js）或请求封装模块中，先调用后端接口获取令牌并存储：

import axios from 'axios';

async function initCsrfToken() {
    const response = await axios.get('/api/get-csrf-token');
    localStorage.setItem('XSRF-TOKEN', response.data.token);
}

initCsrfToken();

请求时自动携带令牌

通过axios拦截器，给所有非GET请求添加X-XSRF-TOKEN Header：

axios.interceptors.request.use(config => {
    if (config.method !== 'get') {
        const token = localStorage.getItem('XSRF-TOKEN');
        if (token) {
            config.headers['X-XSRF-TOKEN'] = token;
        }
    }
    return config;
});

跨域场景注意事项 #

若前后端跨域，需确保后端CORS配置允许携带Cookie和自定义Header：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowVueApp",
        policy => policy.WithOrigins("http://localhost:5173") // 你的Vue项目地址
                        .AllowAnyHeader()
                        .AllowAnyMethod()
                        .AllowCredentials()); // 必须开启，允许携带Cookie
});

// 在中间件链中启用CORS
app.UseCors("AllowVueApp");

内容的提问来源于stack exchange，提问作者Juan Andres solanas