Angular 16中HttpXsrfInterceptor等类缺失，如何配置CSRF防护？

一、默认CSRF配置（无需手动注册拦截器） #

Angular 15+ 中，HttpXsrfInterceptor 是内部私有API，不需要手动在providers中注册——导入 HttpClientXsrfModule 时，Angular会自动启用默认的CSRF拦截逻辑。

正确配置步骤：

1. 在核心模块（如AppModule）中导入必要模块：

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

2. 在imports数组中配置CSRF选项：

@NgModule({
  imports: [
    HttpClientModule,
    HttpClientXsrfModule.withOptions({
      cookieName: 'X-COOKIE-CSRF-TOKEN', // 与后端设置的CSRF Cookie名称保持一致
      headerName: 'X-HEADER-CSRF-TOKEN'  // 与后端期望接收的请求头名称保持一致
    })
  ]
})
export class AppModule { }

默认逻辑：Angular会自动从指定Cookie提取Token，仅在POST/PUT/DELETE等非GET/HEAD请求中添加指定请求头，符合CSRF防护的常规规则。

二、自定义拦截器下的CSRF配置 #

当你实现自定义HTTP拦截器时，默认的CSRF拦截逻辑会被覆盖，需要手动在自定义拦截器中整合CSRF Token的提取与添加逻辑：

1. 实现自定义拦截器，注入HttpXsrfTokenExtractor获取Token：

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

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

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // 仅对非GET/HEAD请求添加CSRF头
    if (req.method !== 'GET' && req.method !== 'HEAD') {
      const token = this.tokenExtractor.getToken() as string;
      if (token) {
        req = req.clone({
          setHeaders: {
            'X-HEADER-CSRF-TOKEN': token // 需与HttpClientXsrfModule配置的headerName一致
          }
        });
      }
    }
    return next.handle(req);
  }
}

2. 在模块中注册自定义拦截器：

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

@NgModule({
  providers: [
    { 
      provide: HTTP_INTERCEPTORS, 
      useClass: CustomInterceptor, 
      multi: true 
    }
  ],
  imports: [
    HttpClientModule,
    HttpClientXsrfModule.withOptions({
      cookieName: 'X-COOKIE-CSRF-TOKEN',
      headerName: 'X-HEADER-CSRF-TOKEN'
    })
  ]
})
export class AppModule { }

注意：HttpXsrfCookieExtractor同样是内部私有API，无需手动注册——Angular已为HttpXsrfTokenExtractor提供了默认实现，直接注入即可。

三、常见问题解决 #

1. IDE无法找到HttpXsrfInterceptor/HttpXsrfCookieExtractor
   这两个类是Angular内部私有实现，不对外暴露，因此IDE无法识别，也不应该手动引用，之前文章中的写法是错误的。

2. getToken()始终返回null

• 检查后端设置的Cookie名称与HttpClientXsrfModule配置的cookieName完全一致（大小写敏感）；
• 确保Cookie不是HttpOnly类型——前端JS无法读取HttpOnly Cookie，导致getToken()返回null；
• 验证Cookie的域名、路径与当前应用的域名/路径匹配，否则浏览器不会携带该Cookie；
• 同源请求下Angular默认会携带Cookie，跨域场景需后端配置CORS允许携带Cookie，且请求需设置withCredentials: true。

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