借助Angular 16 SSR保护敏感数据的可行性及注意事项

是的，用Angular SSR完全可以实现你要的敏感逻辑保护——服务器端执行的代码不会被打包到客户端bundle里，刚好适合你这种没有独立后端、想把业务逻辑藏在SSR层的场景。下面是具体的实践要点和注意事项：

核心思路 #

把包含API密钥、第三方请求逻辑的服务拆分出服务器端专属实现，客户端只保留调用SSR层代理接口的逻辑，这样敏感数据和核心逻辑只会在SSR服务器上运行，不会暴露给浏览器。

具体实现步骤 #

1. 拆分服务，区分服务器/客户端实现 #

先定义一个抽象接口来规范服务方法，然后分别写服务器端和客户端的实现：

// recipe.service.ts
import { Observable } from 'rxjs';
import { Recipe } from './models/recipe.model';

// 抽象接口，统一服务方法定义
export abstract class RecipeService {
  abstract getRecipes(): Observable<Recipe[]>;
}

// server-recipe.service.ts (仅服务器端使用)
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { RecipeService } from './recipe.service';
import { Recipe } from './models/recipe.model';
import { fromApiResponseForList } from './mappers/recipe.mapper';

@Injectable()
export class ServerRecipeService implements RecipeService {
  // 从服务器环境变量读取API密钥，绝对不要硬编码
  private readonly apiKey = process.env.RECIPE_API_KEY;
  private readonly apiUrl = 'https://第三方API地址';

  constructor(private http: HttpClient) {}

  getRecipes(): Observable<Recipe[]> {
    const params = new HttpParams()
      .set('apiKey', this.apiKey)
      .set('number', '16');

    return this.http.get<any>(`${this.apiUrl}/complexSearch`, { params })
      .pipe(
        map(response => response.results.map(fromApiResponseForList)),
        catchError(() => of([]))
      );
  }
}

// client-recipe.service.ts (仅客户端使用)
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { RecipeService } from './recipe.service';
import { Recipe } from './models/recipe.model';

@Injectable()
export class ClientRecipeService implements RecipeService {
  constructor(private http: HttpClient) {}

  getRecipes(): Observable<Recipe[]> {
    // 调用SSR服务器提供的代理接口，而非直接请求第三方API
    return this.http.get<Recipe[]>('/api/recipes');
  }
}

然后在模块中根据平台注入对应的服务：

// recipe.module.ts
import { NgModule, PLATFORM_ID, inject } from '@angular/core';
import { RecipeService } from './recipe.service';
import { ServerRecipeService } from './server-recipe.service';
import { ClientRecipeService } from './client-recipe.service';

@NgModule({
  providers: [
    {
      provide: RecipeService,
      useClass: inject(PLATFORM_ID) === 'server' ? ServerRecipeService : ClientRecipeService
    }
  ]
})
export class RecipeModule {}

2. 在SSR服务器中添加代理路由 #

修改server.ts，添加一个接口来承接客户端的请求，调用服务器端服务获取数据后返回：

// server.ts
import { ServerRecipeService } from './src/app/services/server-recipe.service';

// ... 原有代码 ...

// 添加代理路由
app.get('/api/recipes', (req, res) => {
  const recipeService = app.injector.get(ServerRecipeService);
  recipeService.getRecipes().subscribe({
    next: (recipes) => res.json(recipes),
    error: () => res.status(500).json([])
  });
});

// ... 原有代码 ...

必须注意的要点 #

• 严格隔离敏感代码：确保包含API密钥、第三方请求逻辑、映射器的文件只在服务器端被引用，不要在客户端组件或服务中导入这些文件——Angular打包时会自动排除服务器端代码，但不小心的交叉引用会导致敏感逻辑泄露到客户端bundle。
• 环境变量安全管理：服务器端的API密钥要通过环境变量（比如用dotenv加载.env文件）管理，绝对不要硬编码，也不要把.env文件提交到版本控制。
• 处理同构差异：服务器端的HttpClient没有浏览器的Cookie池，若第三方API需要会话验证，要额外处理；同时避免在服务器端代码中使用window、document等浏览器全局对象。
• 加缓存优化性能：SSR服务器频繁请求第三方API会拖慢响应速度，建议给第三方请求加内存缓存或Redis缓存，减少重复调用。
• 错误信息脱敏：服务器端的错误不要直接返回给客户端，统一处理成模糊的错误提示，避免泄露服务器端逻辑细节。

验证敏感数据是否暴露 #

• 执行ng build打包客户端代码，打开生成的dist/browser/main*.js文件，搜索API密钥或敏感服务的代码，确认没有包含。
• 在浏览器开发者工具的网络面板中，确认所有数据请求都是发向你的SSR服务器（/api/recipes），而非直接请求第三方API。

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