浏览器缓存的安全问题

浏览器缓存是提升网页加载性能的重要机制，但同时也可能引入多种安全隐患。缓存的数据可能被恶意利用，导致敏感信息泄露或攻击面扩大。理解这些安全问题并采取适当的防护措施，是前端开发中不可忽视的一环。

浏览器缓存的基本原理

浏览器缓存通过存储静态资源（如HTML、CSS、JavaScript、图片等）减少重复请求，提升页面加载速度。缓存分为强缓存和协商缓存两种机制：

• 强缓存：通过Cache-Control或Expires头实现，直接使用本地缓存，无需与服务器通信。
• 协商缓存：通过Last-Modified/If-Modified-Since或ETag/If-None-Match头实现，需向服务器验证资源是否过期。

# 强缓存示例
Cache-Control: max-age=3600
Expires: Wed, 21 Oct 2025 07:28:00 GMT

# 协商缓存示例
ETag: "33a64df551425fcc55e4d42a148795d9"
Last-Modified: Wed, 21 Oct 2025 07:28:00 GMT

敏感信息泄露风险

缓存可能无意中存储包含敏感数据的响应，例如：

1. 用户身份信息：
   若API响应未正确标记为不可缓存，用户的个人数据（如姓名、邮箱、Token）可能被存储在磁盘或内存中。攻击者通过物理访问设备或恶意脚本可读取这些数据。

   # 错误示例：未禁用缓存的API响应
   HTTP/1.1 200 OK
   Content-Type: application/json
   {"user": "admin", "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."}
   
   # 正确做法：显式禁用缓存
   Cache-Control: no-store
   

2. CSRF Token缓存：
   CSRF Token若被缓存，可能导致多个用户共享同一Token，破坏防护机制。

缓存投毒攻击（Cache Poisoning）

攻击者通过操纵缓存内容注入恶意代码：

1. 响应拆分攻击：
   利用未正确过滤的输入修改响应头，强制缓存恶意内容。例如：

   # 攻击者构造恶意URL
   GET /search?q=<script>alert(1)</script> HTTP/1.1
   Host: example.com
   
   # 服务器响应被缓存
   HTTP/1.1 200 OK
   Cache-Control: public, max-age=3600
   Content-Type: text/html
   <script>alert(1)</script>
   

2. CDN缓存污染：
   攻击者利用CDN的缓存规则，使恶意内容被广泛分发。

跨用户数据混淆

共享环境（如公共电脑或Kiosk模式）中，缓存可能导致用户数据交叉泄露：

• ** localStorage/sessionStorage**：
  即使页面关闭，localStorage数据仍保留，可能被后续用户读取。

  // 错误示例：存储敏感数据未清理
  localStorage.setItem("authToken", "secret123");
  
  // 解决方案：使用sessionStorage或显式清除
  sessionStorage.setItem("tempData", "value");
  window.onbeforeunload = () => localStorage.clear();
  

防御措施与实践建议

1. 精细化缓存控制

• 对敏感数据禁用缓存：

  Cache-Control: no-store, must-revalidate
  Pragma: no-cache
  

• 对静态资源使用哈希指纹，避免缓存旧版本：

  <script src="app.a1b2c3d4.js"></script>
  

2. 安全头部配置

• 添加Clear-Site-Data头强制清理客户端存储：

  Clear-Site-Data: "cache", "cookies", "storage"
  

• 使用Content-Security-Policy限制脚本加载源。

3. 用户隔离

• 多租户系统通过动态路径隔离用户数据：

  // 根据用户ID生成唯一存储键
  const userKey = `user_${userId}_data`;
  localStorage.setItem(userKey, data);
  

4. 缓存验证

• 服务端校验Vary头确保缓存按条件区分：

  Vary: User-Agent, Cookie
  

实际攻击案例分析

1. GitHub缓存问题（2018年）：
   某些API响应未设置no-store，导致用户私有仓库信息可能被缓存。

2. Shopify XSS via Cached CDN（2020年）：
   恶意商家注入的脚本通过CDN缓存影响其他店铺页面。

浏览器缓存的未来挑战

随着PWA和Service Worker的普及，离线缓存能力增强，但也带来新的安全问题：

// Service Worker中错误的缓存策略
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request) // 可能返回过期的敏感数据
  );
});

需结合network-first策略和敏感请求过滤：

if (event.request.url.includes('/api/')) {
  event.respondWith(fetch(event.request));
}