如何在Angular应用中实现CSP_NONCE？请提供示例

CSP Nonce 是一次性随机值，用来在内容安全策略（CSP）中信任特定内联脚本/样式，避免使用风险较高的 unsafe-inline 指令。Angular 提供了 CSP_NONCE 令牌来无缝集成这个机制，下面是具体实现步骤：

1. 生成并注入 Nonce #

首先要在服务器端（或请求层面）生成唯一随机的 nonce，每次请求都要重新生成，不能复用。然后将其注入到 HTML 的 CSP meta 标签，同时传递给 Angular 应用。

静态 HTML（客户端渲染场景） #

如果是纯客户端应用，你可以在 index.html 中手动添加 meta 标签（生产环境建议由服务器动态生成）：

<!-- index.html -->
<meta http-equiv="Content-Security-Policy" content="script-src 'nonce-random123'; style-src 'nonce-random123';">

然后在 Angular 根模块中读取这个 nonce 并提供给 CSP_NONCE 令牌：

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

// 从meta标签提取nonce值
const cspMeta = document.querySelector('meta[http-equiv="Content-Security-Policy"]');
const nonce = cspMeta?.content.match(/nonce-([\w+/=]+)/)?.[1] || '';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    { provide: CSP_NONCE, useValue: nonce }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

服务器端渲染（Angular Universal） #

如果用 Angular Universal，直接在服务器端生成 nonce，渲染时传递给模板和 Angular：

// server.ts
import { renderModule } from '@angular/platform-server';
import { AppServerModule } from './src/main.server';
import { readFileSync } from 'fs';
import crypto from 'crypto';

// 生成加密安全的随机nonce
function generateNonce(): string {
  return Buffer.from(crypto.randomBytes(16)).toString('base64');
}

const template = readFileSync('./dist/browser/index.html', 'utf8');
const nonce = generateNonce();

// 渲染应用时注入nonce
const html = await renderModule(AppServerModule, {
  document: template.replace('{{nonce}}', nonce),
  url: req.url,
  extraProviders: [
    { provide: CSP_NONCE, useValue: nonce }
  ]
});

res.setHeader('Content-Security-Policy', `script-src 'nonce-${nonce}'; style-src 'nonce-${nonce}'`);
res.send(html);

对应的 index.html 模板要预留占位符：

<!-- index.html -->
<meta http-equiv="Content-Security-Policy" content="script-src 'nonce-{{nonce}}'; style-src 'nonce-{{nonce}}';">

2. Angular 自动处理内联内容 #

一旦你提供了 CSP_NONCE 令牌，Angular 会自动给所有框架生成的内联脚本、样式添加 nonce 属性，比如：

<script nonce="random123">/* Angular 初始化脚本 */</script>
<style nonce="random123">/* Angular 组件样式 */</style>

这些内容会被你的 CSP 策略允许，无需额外配置。

3. 自定义代码中使用 Nonce #

如果你的自定义组件需要内联脚本/样式，可通过依赖注入获取 nonce：

// custom.component.ts
import { Component, Inject, CSP_NONCE } from '@angular/core';

@Component({
  selector: 'app-custom',
  template: `
    <div [style.nonce]="nonce">
      <!-- 自定义内容 -->
    </div>
    <script [attr.nonce]="nonce">
      // 自定义内联脚本
      console.log('This script is allowed via nonce');
    </script>
  `
})
export class CustomComponent {
  constructor(@Inject(CSP_NONCE) public nonce: string) {}
}

关键注意事项 #

• Nonce 必须是加密安全的随机值，每次请求都要重新生成，绝对不能硬编码或重复使用。
• 尽量避免在 CSP 策略中同时使用 unsafe-inline，否则 nonce 的安全防护会失效。
• 如果你用 Angular CLI 构建，无需修改构建配置，框架会自动适配 nonce 机制。

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