CSP nonce与PWA是否兼容？Angular应用缓存哈希不匹配问题

我有一个实现了CSP nonce的Angular Web应用，代理请求的Nginx服务器会生成nonce，并在回复每个客户端前将其同时替换到CSP头部和代码中。Nginx配置中对应的代码行如下：

sub_filter 'random-nonce-placeholder' $csp_nonce;

该方案运行良好。现在我希望将此Angular应用改造为PWA，已成功发布PWA，但Service Worker始终因哈希不匹配而无法缓存index.html文件。这是正常现象，因为index.html文件每次加载都会变化。以下是错误信息：

[11s119u] Error(Hash mismatch (cacheBustedFetchFromNetwork): http://localhost:8000/index.html: expected 160ce202e458c63b9aaaa1c5906bbd45fdd73389, got f774417697894c39f598d78f1ea452f6d134e034 (after cache busting), SwCriticalError@http://localhost:8000/ngsw-worker.js:164:7

这是否意味着CSP nonce与PWA完全不兼容？有没有办法让两者在同一应用中正常工作？如果为了实现PWA而降低应用安全性，这将是个大问题……

10月22日更新：
基于哈希的CSP似乎是一个不错的临时解决方案，但这并未回答核心问题，且可能存在一些弊端。

CSP nonce 和 PWA 并非完全不兼容，问题根源在于 Angular Service Worker 默认会缓存并校验 index.html 的哈希值，而每次请求的 index.html 因 nonce 动态变化导致哈希不一致。以下是几种可行的兼容方案：

方案1：配置 Service Worker 忽略 index.html 的哈希校验 #

通过修改 ngsw-config.json，让 Service Worker 不对 index.html 做哈希校验，改为每次从网络拉取最新版本：

1. 在配置文件中新增 dataGroups 规则，将 index.html 纳入网络优先的缓存策略：

{
  "dataGroups": [
    {
      "name": "index-html",
      "urls": ["/index.html"],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 1,
        "maxAge": "0u",
        "timeout": "0u"
      }
    }
  ]
}

2. 确保 assetGroups 中不再包含 index.html，避免策略冲突。
   这种方式既保留了PWA对其他静态资源的缓存能力，又能保证每次获取到带最新nonce的index.html，完全不破坏CSP的安全机制。

方案2：将 nonce 仅注入 HTTP 响应头，不在 index.html 中修改内容 #

调整Nginx和Angular应用的实现逻辑，让nonce只通过响应头传递，避免修改index.html内容：

1. 修改Nginx配置，仅在响应头中设置CSP nonce：

add_header Content-Security-Policy "script-src 'nonce-$csp_nonce'; style-src 'nonce-$csp_nonce'; ...";

2. 在Angular中通过服务读取响应头中的nonce，动态为页面内的脚本/样式标签添加nonce属性：

import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class CspNonceService {
  constructor(@Inject(DOCUMENT) private document: Document) {
    const navEntry = this.document.defaultView?.performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
    const cspHeader = navEntry?.responseHeaders?.get('Content-Security-Policy');
    const nonceMatch = cspHeader?.match(/nonce-([a-zA-Z0-9]+)/);
    const nonce = nonceMatch?.[1];
    
    if (nonce) {
      // 为所有脚本和样式标签添加nonce
      this.document.querySelectorAll('script').forEach(script => script.setAttribute('nonce', nonce));
      this.document.querySelectorAll('style').forEach(style => style.setAttribute('nonce', nonce));
    }
  }
}

这样index.html内容固定不变，Service Worker可以正常缓存，同时依然能使用动态nonce保证CSP安全。

方案3：CSP nonce + 静态哈希混合模式 #

如果必须保留index.html中的nonce占位符，可以在CSP头部同时配置nonce和静态哈希，让缓存的旧版index.html也能通过校验：

1. Nginx配置中，CSP头部同时包含动态nonce和index.html中未替换占位符时的脚本/样式哈希：

add_header Content-Security-Policy "script-src 'nonce-$csp_nonce' 'sha256-XXXXXX'; style-src 'nonce-$csp_nonce' 'sha256-YYYYYY'; ...";

2. 这里的哈希值需要提前计算（基于未替换占位符的原始index.html内容），适合页面内容变动不频繁的场景。

关于哈希CSP的弊端补充 #

你提到的哈希CSP临时方案，核心弊端在于：

• 每次index.html中的内联脚本/样式修改时，都需要重新计算并更新CSP头部的哈希，维护成本高；
• 无法支持动态生成的内联代码，灵活性差。
  因此方案1或方案2是更优的长期解决方案。

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