Rx-angular ISR 缓存键优化：防止恶意请求导致的缓存膨胀问题

背景介绍

在现代前端开发中，增量静态再生(ISR)技术已经成为提升应用性能的重要手段。Rx-angular作为Angular生态中的重要工具库，其ISR功能为开发者提供了便捷的服务器端渲染缓存方案。然而，在实际生产环境中，我们发现了一个潜在的安全风险：恶意攻击者可能通过构造大量不同的URL请求，导致缓存系统存储大量冗余数据。

问题分析

Rx-angular ISR默认使用完整的请求URL（包括查询参数）作为缓存键。这种设计在正常情况下是合理的，因为它可以区分不同参数的页面内容（如分页查询）。但在遭受恶意攻击时，攻击者可以通过以下方式滥用系统：

1. 不断变化查询参数：如/my-route?1、/my-route?something=1等
2. 请求大量不存在的404页面：如/something-404、/another-404等

每个这样的请求都会生成独立的缓存条目，短时间内就能填满缓存存储（在我们的案例中达到了15GB以上），严重影响系统性能。

解决方案

Rx-angular团队通过引入灵活的缓存键生成策略解决了这个问题。新方案提供了三种工作模式：

1. 完全匹配模式（默认）：保留原有行为，使用完整URL作为缓存键
2. 路径匹配模式：忽略所有查询参数，仅使用请求路径作为缓存键
3. 选择性参数模式：开发者可以指定需要关注的查询参数，系统会过滤掉其他参数

技术实现

核心实现逻辑如下：

function generateCacheKey(req: Request, allowedQueryParams?: string[]): string {
  if (!allowedQueryParams) {
    return req.url; // 默认行为
  }
  
  if (allowedQueryParams.length === 0) {
    return req.path; // 路径匹配模式
  }
  
  // 选择性参数模式
  const url = new URL(req.url);
  const params = new URLSearchParams();
  
  allowedQueryParams.forEach(param => {
    if (url.searchParams.has(param)) {
      params.set(param, url.searchParams.get(param)!);
    }
  });
  
  return params.toString() 
    ? `${url.pathname}?${params.toString()}`
    : url.pathname;
}

最佳实践建议

1. 静态内容页面：建议使用路径匹配模式（空数组配置），完全忽略查询参数
2. 分页/筛选页面：明确指定需要缓存的查询参数，如['page', 'filter']
3. 错误页面：对于404等错误页面，建议设置revalidate: null不进行缓存

总结

Rx-angular ISR的这一优化显著提升了系统的健壮性，有效防止了缓存滥用问题。开发者现在可以根据业务需求灵活配置缓存策略，在保证功能完整性的同时，避免系统资源被恶意消耗。这一改进体现了Rx-angular团队对生产环境实际问题的敏锐洞察和快速响应能力。