Angular中ngCspNonce使用问题：如何为生成脚本添加nonce

核心原因 #

runtime.js、polyfills.js这类脚本是直接写在index.html的<body>中的静态资源标签，Angular的ngCspNonce仅处理框架自身动态插入的脚本，不会自动修改这些预加载的静态脚本标签，因此触发CSP拦截。

解决方案 #

1. 动态为静态脚本添加Nonce属性 #

在Angular应用启动前（比如main.ts最顶部），手动获取nonce值并为<body>内的所有脚本标签添加nonce属性：

// main.ts 最顶部添加
// 建议从服务器响应头、环境变量或全局注入值获取，不要硬编码
const nonce = 'blahblah'; 
document.querySelectorAll('body script').forEach(script => {
  script.setAttribute('nonce', nonce);
});

// 后续导入Angular相关代码
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

2. 配置Angular的APP_NONCE令牌 #

为确保Angular框架内部生成的脚本自动携带nonce，在AppModule中提供APP_NONCE令牌，值需与CSP头中的nonce保持一致：

import { NgModule, APP_NONCE } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    { provide: APP_NONCE, useValue: 'blahblah' } // 同样建议动态获取而非硬编码
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 优化CSP规则（可选） #

若strict-dynamic已生效，可移除'unsafe-inline'（strict-dynamic会覆盖该规则，仅旧浏览器需保留），同时务必每次请求动态生成nonce值（硬编码nonce会大幅降低CSP安全性）：

script-src 'self' 'strict-dynamic' 'nonce-动态生成的随机值';

注意事项 #

• 禁止硬编码nonce，建议从服务器端（如HTTP响应头、模板注入）动态生成并传递给前端，每次请求使用不同的nonce才能发挥CSP的防护作用。
• 若使用Angular Universal（SSR），可直接在服务器端渲染时为index.html的静态脚本标签添加nonce属性，无需前端动态修改。

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