Angular后续请求头正确CSRF令牌值如何获取（后端为Node.js）

核心错误原因 #

你之前传值错误的根本原因是对csurf库的令牌生成逻辑不了解：

• 响应Set-Cookie里的_csrf值是加密盐值，仅用于服务端校验时做解密参考，不能直接放到X-XSRF-TOKEN请求头中使用
• 你需要主动从服务端获取明文的CSRF令牌，这个值才是请求头需要携带的正确参数

服务端（Express）配置修正 #

你需要新增一个公开接口用于前端获取明文令牌，参考配置如下：

const express = require('express');
const cookieParser = require('cookie-parser');
const csurf = require('csurf');
const app = express();

// 前置中间件必须放在csurf之前
app.use(cookieParser());
// 配置csurf的cookie存储规则
const csrfProtect = csurf({
  cookie: {
    httpOnly: true,
    sameSite: 'lax',
    secure: process.env.NODE_ENV === 'production' // 生产环境建议开启
  }
});

// 新增CSRF令牌获取接口，前端应用初始化时优先调用
app.get('/api/csrf-token', csrfProtect, (req, res) => {
  // req.csrfToken() 生成的就是前端需要携带的明文令牌
  res.send({ csrfToken: req.csrfToken() });
});

// 所有需要防护的业务接口都要加上csrfProtect中间件
app.post('/api/your-business-api', csrfProtect, (req, res) => {
  res.send({ code: 0, msg: '校验通过' });
});

前端（Angular 7）配置修正 #

两种配置方式二选一即可：

方式1：手动加请求头 #

• 应用初始化时先调用/api/csrf-token接口，拿到返回的csrfToken值本地存储
• 后续所有POST/PUT/DELETE等非GET请求，在请求头中添加X-XSRF-TOKEN: 存储的csrfToken值即可
• 跨域场景下必须给请求开启withCredentials: true，否则Cookie无法携带导致校验失败

方式2：使用Angular自带的XSRF模块 #

Angular的HttpClientXsrfModule可以自动处理令牌携带，只需修改app.module.ts配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    // 配置和服务端匹配的cookie名和请求头名
    HttpClientXsrfModule.withOptions({
      cookieName: 'XSRF-TOKEN',
      headerName: 'X-XSRF-TOKEN'
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用这种方式需要同步修改Express端csurf配置，把明文令牌存在名为XSRF-TOKEN的Cookie中：

const csrfProtect = csurf({
  cookie: {
    name: 'XSRF-TOKEN', // 改cookie名和Angular配置匹配
    httpOnly: false, // 必须关，否则JS读不到Cookie
    sameSite: 'lax'
  }
});

校验规则确认 #

只要满足以下两个条件，csurf就会校验通过：

• 请求携带了服务端之前种下的_csrf（或自定义名）Cookie
• X-XSRF-TOKEN头携带的明文令牌和Cookie中的盐值匹配

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