Content Security Policy

Content-Security-Policy:
  default-src 'self';
  script-src  'self';
  style-src   'self';
  img-src     'self' data: blob:;
  font-src    'self';
  base-uri    'self';
  object-src  'none'

// styles.scss: one @use per component you render
@use 'ngwr/theme';
@use 'ngwr/button';
@use 'ngwr/select';

Directive	Value	Why
`script-src`	`'self'`	No eval, Worker or WebAssembly.
`style-src`	`'self'`	When you @use ngwr's styles.
`img-src`	`'self' data: blob:`	data: for QR code and image cropper, blob: for file exports.
`connect-src`	`'self'`	Only your own requests. ngwr fetches nothing.
`'unsafe-eval'`	`—`	Not needed, nor is 'wasm-unsafe-eval'.

Some components also inject their CSS at runtime; style-src 'self' blocks that copy, which is harmless. Restyle them through their --wr-* tokens.

// main.ts
import { CSP_NONCE } from '@angular/core';

bootstrapApplication(App, {
  providers: [{ provide: CSP_NONCE, useValue: window.__cspNonce }],
});

# Server-rendered: a fresh nonce per response
Content-Security-Policy:
  style-src 'self' 'nonce-<per-response-random>';

# Static prerender (outputMode: 'static')
Content-Security-Policy:
  style-src 'self' 'unsafe-inline';

Client-rendered app

If you don't import the stylesheet

Server-rendered and prerendered apps

See also