Angular单页应用ServiceWorker与TrustedTypes兼容问题求助

问题根源 #

你遇到的报错核心原因是错误地将TrustedScriptURL强制转换为string，导致丢失了Trusted类型的安全标记，浏览器的CSP检查无法识别该URL的可信性，最终触发报错。同时Angular 16的provideServiceWorker暂不支持直接传入TrustedScriptURL，内部会将字符串参数处理为普通URL，无法满足require-trusted-types-for 'script'的规则。

解决方案 #

1. 替换provideServiceWorker，手动注册Service Worker #

自定义注册逻辑，直接将受信任的TrustedScriptURL传递给浏览器的Service Worker API：

修改app.config.ts：

// [...]
import { InjectionToken, Provider, isDevMode } from '@angular/core';
import { trustedTypes } from 'trusted-types';

// 创建自定义Trusted Types策略
const myPolicy = trustedTypes.createPolicy('custom', {
  createScriptURL: (url) => url,
});

// 定义注入令牌用于触发Service Worker注册
const SERVICE_WORKER_INIT = new InjectionToken<void>('Service Worker Initialization');

// 自定义Service Worker注册Provider
export const provideCustomServiceWorker: Provider = {
  provide: SERVICE_WORKER_INIT,
  useFactory: () => {
    if (!isDevMode() && 'serviceWorker' in navigator) {
      // 直接传递TrustedScriptURL给register方法
      navigator.serviceWorker.register(myPolicy.createScriptURL('/ngsw-worker.js'))
        .catch(err => console.error('Service Worker注册失败:', err));
    }
  },
  deps: [],
};

export const appConfig: ApplicationConfig = {
  providers: [
    // [...]
    // 替换原有的provideServiceWorker为自定义Provider
    provideCustomServiceWorker,
  ],
};

2. 开启Angular构建的Trusted Types支持 #

在angular.json的构建选项中启用Trusted Types，确保Angular自身代码符合CSP规则：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "trustedTypes": true,
            // ...其他构建配置
          }
        }
      }
    }
  }
}

3. 保留现有CSP配置 #

你的CSP头配置是正确的，无需修改：

require-trusted-types-for 'script'; trusted-types custom dompurify angular angular#bundler;

验证 #

重新构建并部署应用，Service Worker将正常完成注册，不再触发CSP相关报错。

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