Chrome中Angular带Service Worker应用仍用缓存CSP头而非更新头部的问题

数据老陈

2026-7-5

排查Chrome下Service Worker缓存旧CSP头的问题

先强制清除Service Worker：打开chrome://serviceworker-internals/，找到对应应用的Service Worker，点击Unregister，再按Ctrl+Shift+R硬刷新页面，验证是否能加载新的CSP头——这一步能直接确认问题是否由Service Worker缓存导致。
调整Angular Service Worker的缓存配置：
打开ngsw-config.json，找到包含index.html的assetGroups分组，新增或修改version字段（比如从1.0.0改为1.0.1），强制触发缓存更新：
```
"assetGroups": [
  {
    "name": "app",
    "installMode": "prefetch",
    "updateMode": "prefetch",
    "version": "1.0.1",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    }
  }
]
```
同时确认updateMode未设置为永久缓存模式，cacheConfig中的maxAge也不要设置过长。
检查缓存内的响应头：
打开Chrome DevTools的Application > Cache Storage > ngsw:你的应用ID，找到index.html对应的缓存条目，查看响应头是否包含新的frame-src规则。如果仍是旧规则，说明Service Worker未正确更新缓存，需重新构建部署应用，确保ngsw-config.json的修改生效。另外可以直接访问https://你的域名/index.html?random=123（添加随机参数绕过缓存），验证服务器返回的响应头是否正确。
清除Chrome自身缓存：
在DevTools的Network标签勾选Disable cache，刷新页面测试。或者直接进入Chrome设置，找到对应站点清除所有存储的数据，避免浏览器自身缓存旧响应头。
检查meta标签的CSP配置：
若同时通过HTTP头和<meta http-equiv="Content-Security-Policy">标签设置CSP，需确保meta标签也同步更新。Chrome会遵循更严格的规则，若meta标签仍是旧配置，仍会阻止iframe内容加载。