All, I have a simple “hello world” site to debug CSP. I have it working fine for everything but styles that are placed in a component scss file. What am I missing?
my index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test with CSP</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'nonce-123456789' 'strict-dynamic'; style-src 'nonce-123456789' 'self'; img-src 'self' data:; font-src 'self'; form-action 'self';">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
Body - 2
<app-root ngCspNonce="nonce-123456789"></app-root>
</body>
My app.module:
import { NgModule } 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(),
],
bootstrap: [AppComponent],
})
export class AppModule { }
My home.component.ts
<p class="text-blue-500">{{hello}}</p>
<p class="specialText">Special Text</p>
And the home.component.scss
.specialText {
color: red;
}
I am using PrimeNg/PrimeFlex. Those classes all work fine. WHat’s getting blocked is the .specialText in the component.
And this is just a test. The nonce values are strictly to prove out. Once I have a working example, I’ll put real nonce values in, etc.
Thanks,
Nick