Angular Service Worker注入nonce后哈希不匹配问题求解决方案

核心原因 #

每次请求注入的ngCspNonce值唯一，导致index.html内容动态变化，而Angular Service Worker默认会预缓存index.html并校验哈希，从而触发Hash mismatch异常。

可行解决步骤 #

1. Nginx端禁用index.html缓存

配置Nginx为index.html返回强制不缓存的响应头，确保浏览器和Service Worker不会留存旧版本：

location = /index.html {
    # 注入nonce的配置
    sub_filter '<app-root' '<app-root ngCspNonce="$request_id"';
    sub_filter_once on;

    # 禁用缓存
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}

2. 修改Angular Service Worker配置

编辑ngsw-config.json，调整缓存策略，让Service Worker不对index.html进行预缓存，且运行时直接从网络获取：

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
          // 移除"/index.html"，禁止预缓存
        ]
      }
    }
    // 保留其他assetGroups配置
  ],
  "dataGroups": [
    {
      "name": "index-html-network-only",
      "urls": ["/index.html"],
      "cacheConfig": {
        "strategy": "networkFirst",
        "maxSize": 0, // 不缓存任何版本
        "maxAge": "0u",
        "timeout": "0u"
      }
    }
  ]
}

3. 重新构建部署

执行Angular构建命令重新生成应用和Service Worker配置：

ng build --prod

部署更新后的文件到服务器，确保Service Worker的新配置生效。

补充说明 #

• 上述配置确保index.html每次都从网络获取最新版本，彻底避免哈希不匹配问题；
• 若需要离线可用性，可调整dataGroups的maxSize和maxAge，但需注意动态nonce会导致离线时的index.html版本nonce失效，需权衡业务需求。

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