Angular 16中如何为外部库动态创建的脚本/样式添加nonce属性？

可以通过Angular提供的CSP_NONCE令牌注入结合DOM监听的方式解决这个问题，无需启用unsafe-inline或unsafe-hashes，具体实现步骤如下：

1. 注入CSP_NONCE令牌到Angular应用 #

首先需要将服务端生成的随机nonce值注入到Angular的CSP_NONCE令牌中，确保应用内可以全局访问该值：

针对Standalone应用（Angular 16默认） #

在app.config.ts中配置提供CSP_NONCE：

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { CSP_NONCE } from '@angular/core';

// 从服务端注入的全局变量获取nonce（需服务端在index.html中挂载该变量）
const nonce = window.__CSP_NONCE__ as string;

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    { provide: CSP_NONCE, useValue: nonce }
  ]
};

针对NgModule应用 #

在app.module.ts中配置：

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

const nonce = window.__CSP_NONCE__ as string;

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

注：服务端需要在渲染index.html时，将随机生成的nonce挂载到全局变量（如window.__CSP_NONCE__），同时在响应头的Content-Security-Policy中使用相同的nonce值。

2. 监听DOM变化，自动为外部库添加的资源注入nonce #

创建一个全局服务，监听<head>区域的DOM变化，为新添加的脚本、样式元素自动添加nonce属性：

import { Injectable, Inject, Renderer2, RendererFactory2 } from '@angular/core';
import { CSP_NONCE } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CspNonceService {
  private renderer: Renderer2;

  constructor(
    rendererFactory: RendererFactory2,
    @Inject(CSP_NONCE) private nonce: string
  ) {
    this.renderer = rendererFactory.createRenderer(null, null);
    this.initHeadObserver();
  }

  private initHeadObserver(): void {
    const headElement = document.head;
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        mutation.addedNodes.forEach(node => {
          // 为脚本标签添加nonce
          if (node instanceof HTMLScriptElement) {
            this.renderer.setAttribute(node, 'nonce', this.nonce);
          }
          // 为样式标签添加nonce
          else if (node instanceof HTMLStyleElement) {
            this.renderer.setAttribute(node, 'nonce', this.nonce);
          }
          // 为外部样式链接添加nonce
          else if (node instanceof HTMLLinkElement && node.rel === 'stylesheet') {
            this.renderer.setAttribute(node, 'nonce', this.nonce);
          }
        });
      });
    });

    observer.observe(headElement, {
      childList: true,
      subtree: true
    });
  }

  // 手动添加nonce的方法，用于处理无法被监听捕获的资源（如document.write生成的元素）
  public attachNonce(element: HTMLElement): void {
    this.renderer.setAttribute(element, 'nonce', this.nonce);
  }
}

3. 启动监听服务 #

在根组件的ngOnInit中初始化该服务，确保应用启动时立即开始监听：

import { Component, OnInit } from '@angular/core';
import { CspNonceService } from './csp-nonce.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private cspNonceService: CspNonceService) { }

  ngOnInit(): void {
    // 服务初始化后自动启动DOM监听
  }
}

关键注意事项 #

• nonce必须单次随机生成：服务端需为每个HTTP请求生成唯一的nonce值，禁止复用，否则会失去CSP nonce的安全防护作用。
• 特殊加载场景处理：对于使用document.write或直接修改DOM innerHTML的外部库，可能需要手动调用attachNonce方法为生成的元素添加nonce。
• 验证CSP头一致性：确保响应头中Content-Security-Policy的nonce值与注入Angular的CSP_NONCE值完全匹配。

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