Angular 18自定义元素如何设置ngCSPNonce/CSP_NONCE？

核心解决方案 #

通过在自定义元素的注入器中提供CSP_NONCE令牌，让Angular动态生成的style标签自动带上nonce属性，适配CSP规则。

具体实现步骤 #

1. 客户端传递nonce到全局变量
   客户端在引入自定义元素JS文件前，将页面的CSP nonce挂载到window对象：

<script>
  // 替换为实际的页面nonce值
  window.__CSP_NONCE__ = 'random-csp-nonce';
</script>
<script src="path/to/my-comp.js"></script>

2. 在Angular代码中注入CSP_NONCE
   在创建自定义元素时，通过自定义注入器提供CSP_NONCE令牌，值为从window读取的nonce：

import { Injector, CSP_NONCE } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { BasicComponent } from './basic.component';

// 从全局变量获取nonce
const nonce = (window as any).__CSP_NONCE__;

// 创建包含nonce配置的注入器
const customInjector = Injector.create({
  providers: [
    { provide: CSP_NONCE, useValue: nonce }
  ]
});

// 定义自定义元素时传入该注入器
const config = { injector: customInjector };
customElements.define('my-comp', createCustomElement(BasicComponent, config));

3. 验证效果
   重新执行npm run build-elements构建自定义元素，客户端引入后，检查页面中Angular生成的style标签，确认已带有nonce="random-csp-nonce"属性，样式即可正常加载。

关键说明 #

• 自定义元素的注入器是独立于宿主页面的，因此不能通过<my-comp ngCspNonce="...">传递nonce，必须通过注入器显式提供CSP_NONCE令牌。
• 确保window上的nonce在自定义元素JS加载前就已设置，否则会出现读取不到的情况。
• 该方案适用于Angular 18的独立组件和模块组件，无需修改组件内部的样式逻辑。

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