Angular 18中CSP阻止组件SCSS样式加载的问题排查

你的问题出在Angular组件编译生成的内联<style>标签没有携带配置的nonce，导致被CSP规则拦截。PrimeNG/PrimeFlex的样式是通过<link>标签从本地资源加载的，符合style-src 'self'规则，所以能正常生效；但组件SCSS编译后的内联样式缺少nonce属性，不符合style-src 'nonce-123456789'的要求，因此被阻止。

修复步骤 #

1. 导入并提供Angular的CSP_NONCE令牌
   在app.module.ts中，需要导入CSP_NONCE注入令牌，并将其值设置为你在index.html中使用的nonce，这样Angular会自动为组件生成的内联<style>标签添加该nonce属性。

修改后的app.module.ts代码如下：

import { NgModule, CSP_NONCE } from '@angular/core';
import { BrowserModule, provideClientHydration } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ], 
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    provideClientHydration(),
    { provide: CSP_NONCE, useValue: 'nonce-123456789' } // 新增该配置
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

2. 生产环境注意事项
   测试用的固定nonce仅用于调试，正式环境中必须动态生成随机nonce值，并确保：
   • index.html中的CSP meta标签使用该动态生成的nonce
   • Angular的CSP_NONCE provider也使用同一个值
     以此保证CSP的安全性。

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