Hey there, let's break down why you're seeing this error even after clearing your component content—it's not your fault, Angular is quietly adding inline styles behind the scenes!

Why the inline style violation happens #

The error isn't coming from any code you wrote—it's triggered by Angular's internal behavior:

• View Encapsulation: By default, Angular uses ViewEncapsulation.Emulated to isolate component styles. Even if you empty app.component.css, Angular generates an inline <style> tag in the DOM to apply scoped styling rules (like those [_nghost-xxx] attribute selectors). This auto-generated inline tag violates your strict CSP rule.
• Dev Mode Helpers: Angular CLI injects additional inline styles in development mode for features like hot module replacement (HMR) or debug UI elements. These are added automatically without you writing any code.

Fixes to resolve the CSP error #

Here are practical solutions tailored to different security needs:

1. Update CSP to allow inline styles (simplest for development) #

Modify your Content-Security-Policy meta tag to explicitly permit inline styles for trusted sources. This works great for local development:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline';">

Note: 'unsafe-inline' is convenient for development but not ideal for production—use the more secure methods below for live apps.

2. Use a nonce or hash (production-safe) #

Instead of allowing all inline styles, you can specify a unique identifier for allowed inline content:

• Hash approach: Use the hash value provided directly in your error message. Add it to your style-src directive:

  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'sha256-l5BdY8iHQaD9T7HFC/wOySvJobC7DMB33NJOSw+ToWw=';">
  

  Keep in mind: This hash will change if Angular's auto-generated styles update (e.g., after component changes or Angular version upgrades), so you'll need to refresh it when that happens.

• Nonce approach: Generate a random, unique nonce value per request (e.g., via your backend or build config), then add it to both your CSP and Angular's style injection logic:

  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'nonce-YOUR_RANDOM_NONCE';">
  

  You'll also need to configure Angular to include this nonce when injecting inline styles (via DomSanitizer or build setup adjustments).

3. Disable View Encapsulation (not recommended) #

You can turn off Angular's style isolation to prevent it from generating inline style tags. Add encapsulation: ViewEncapsulation.None to your component decorator:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  title = 'csptest';
}

Warning: This removes style isolation between components, so styles from one component may leak to others. Only use this if you fully understand the tradeoffs.

内容的提问来源于stack exchange，提问作者Young'un