如何在用户浏览器端存储CSRF Cookie？Angular前端该如何配置？

Angular 原生内置了 XSRF/CSRF 防护能力，无需自行实现复杂的Cookie读取逻辑，按以下步骤配置即可生效：

1. 核心CSRF模块配置 #

首先在应用根模块AppModule或核心共享模块中导入HttpClientXsrfModule，匹配后端的CSRF规则：

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,
    // 此处的参数值替换为后端实际定义的CSRF Cookie名、请求头名
    HttpClientXsrfModule.withOptions({
      cookieName: 'XSRF-TOKEN', 
      headerName: 'X-XSRF-TOKEN',
    }),
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

配置完成后Angular会自动读取对应CSRF Cookie，自动向POST等修改类请求注入对应的CSRF请求头。

2. 跨域场景额外配置 #

如果前端部署域名和后端API域名不一致，必须开启withCredentials配置，才能让浏览器在请求时携带Cookie，有两种配置方式可选：

• 单次请求配置：发送请求时手动添加参数

  // GET请求示例
  this.http.get('https://your-api-domain.com/xxx', { withCredentials: true })
  // POST请求示例
  this.http.post('https://your-api-domain.com/xxx', requestData, { withCredentials: true })
  

• 全局统一配置（推荐）：通过HTTP拦截器批量给所有请求加配置
  第一步新建拦截器文件：

  import { Injectable } from '@angular/core';
  import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  @Injectable()
  export class CredentialsInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
      const modifiedRequest = request.clone({
        withCredentials: true
      });
      return next.handle(modifiedRequest);
    }
  }
  

  第二步在根模块中注册拦截器：

  import { HTTP_INTERCEPTORS } from '@angular/common/http';
  import { CredentialsInterceptor } from './credentials.interceptor';
  
  @NgModule({
    providers: [
      {
        provide: HTTP_INTERCEPTORS,
        useClass: CredentialsInterceptor,
        multi: true
      }
    ]
  })
  export class AppModule { }
  

3. 特殊需求适配 #

Angular默认不会给GET、HEAD请求注入CSRF请求头，如果你的业务要求GET请求也携带CSRF标识，可以在全局拦截器中手动读取CSRF Cookie注入到请求头即可。

注意事项 #

• 跨域场景下后端CORS配置不能把Access-Control-Allow-Origin设为*，必须指定前端的实际域名
• 后端返回的CSRF Cookie必须配置正确的Domain、SameSite属性，否则浏览器会拦截Cookie写入

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