Angular SSR：如何避免敏感数据被缓存？

一、服务器端缓存用户认证请求的风险 #

如果Angular SSR错误缓存了携带用户认证令牌的API请求并返回给其他用户，会引发以下严重问题：

• 用户隐私泄露：将用户A的个人敏感数据（如账户信息、交易记录、个人偏好）返回给用户B，违反数据隐私合规要求。
• 权限越权：缓存的认证结果可能让普通用户获得管理员权限，或让未授权用户访问受限资源，破坏系统权限控制体系。
• 身份冒充：复用缓存中的认证令牌会话，可能导致后续用户被识别为缓存中的用户，引发操作记录混乱、账户被盗用等风险。
• 数据一致性异常：用户自身更新了认证相关信息（如修改密码、绑定新设备）后，仍获取到旧的缓存数据，导致功能异常。

二、确保认证端点不被缓存的解决方案 #

针对Angular SSR的缓存机制，可以通过以下几种方式禁止认证相关请求被缓存：

1. 为认证请求添加禁止缓存的HTTP头部 #

直接在HttpClient请求中添加Cache-Control等头部，明确告知服务器和SSR不要缓存该请求：

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

// 发起认证相关请求时添加禁止缓存头部
this.http.get('/api/auth/user-info', {
  headers: new HttpHeaders({
    'Cache-Control': 'no-cache, no-store, must-revalidate',
    'Pragma': 'no-cache',
    'Expires': '0'
  })
});

2. 通过HTTP拦截器统一处理认证请求缓存 #

创建全局拦截器，在服务器端渲染时自动为认证相关请求添加禁止缓存规则，避免重复代码：

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { isPlatformServer } from '@angular/common';

@Injectable()
export class AuthNoCacheInterceptor implements HttpInterceptor {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 仅在服务器端执行缓存控制逻辑
    if (isPlatformServer(this.platformId)) {
      // 匹配认证相关的API路径
      if (request.url.includes('/api/auth/') || request.url.includes('/api/user/')) {
        // 克隆请求并添加禁止缓存头部
        const modifiedRequest = request.clone({
          headers: request.headers
            .set('Cache-Control', 'no-cache, no-store, must-revalidate')
            .set('Pragma', 'no-cache')
            .set('Expires', '0')
        });
        return next.handle(modifiedRequest);
      }
    }
    return next.handle(request);
  }
}

记得在AppModule的providers中注册该拦截器：

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: AuthNoCacheInterceptor, multi: true }
]

3. 手动控制TransferState缓存逻辑 #

Angular SSR通过TransferState实现服务器到客户端的数据传递，对于认证请求，可跳过存入TransferState：

import { TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformServer } from '@angular/common';

private readonly USER_INFO_KEY = makeStateKey('user-info');

constructor(
  private http: HttpClient,
  private transferState: TransferState,
  @Inject(PLATFORM_ID) private platformId: Object
) {}

getUserInfo(): Observable<UserInfo> {
  // 客户端优先检查缓存，但认证信息强制跳过
  if (isPlatformBrowser(this.platformId)) {
    // 强制重新发起请求，不使用TransferState缓存
    return this.http.get<UserInfo>('/api/auth/user-info');
  } else {
    // 服务器端请求时，不存入TransferState
    return this.http.get<UserInfo>('/api/auth/user-info');
  }
}

4. 服务器端隔离用户请求上下文 #

确保Angular SSR的服务器端实例为每个用户请求创建独立的上下文，避免不同用户的请求缓存互相污染。例如使用NestJS等框架时，确保请求作用域的服务不共享缓存数据。

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