HTTP CSP style-src-elem

Die style-src-elem Direktive der Content Security Policy kontrolliert style-Elemente und externe Stylesheets unabhängig von style-Attributen.

Typ

CSP-Direktive zur Kontrolle von style-Elementen und externen Stylesheets für granulare CSS-Ressourcen-Security unabhängig von style-Attributen in API-getriebenen Webanwendungen.

Syntax

Die Direktive definiert erlaubte Quellen für Style-Elemente und externe CSS-Dateien. Bei Fehlen fällt sie auf style-src, dann default-src zurück.

http 
Content-Security-Policy: style-src-elem <source-list>

Direktiven

Die style-src-elem Direktive kontrolliert style-Elemente und Stylesheets durch Nonce Hash und URL-Whitelisting.

source-list
Erlaubte Quellen für Style-Elemente. Unterstützt URLs, 'self', 'unsafe-inline', Nonces und Hashes. Kontrolliert sowohl <link rel="stylesheet"> als auch <style>-Elemente.
Nonce-basierte-Security
Pro-Request unique Nonces für style-Elemente ermöglichen Critical-CSS-Inline-Optimierung ohne unsafe-inline Security-Risiken in Performance-kritischen SPAs.

Beispiele

Praktische Szenarien für style-src-elem in Performance-optimierten React Apps Admin-Dashboards und Banking-APIs mit Critical-CSS und External-Only-Policies.

SPA mit Nonce-basierten Critical-Path-Styles

Performance-optimierte React-Apps nutzen Nonces für Inline-Critical-CSS:

http 
HTTP/2 200 OK
Content-Type: text/html
Content-Security-Policy: style-src-elem 'nonce-c55xyz' 'self' https://fonts.googleapis.com; style-src-attr 'none'

<!DOCTYPE html>
<html>
<head>
  <!-- Erlaubt durch Nonce -->
  <style nonce="c55xyz">
    .hero { display: flex; height: 100vh; }
    .cta { background: #3b82f6; color: white; }
  </style>

  <!-- Erlaubt durch 'self' -->
  <link rel="stylesheet" href="/app.css">

  <!-- Erlaubt (whitelistete Domain) -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter">

  <!-- Blockiert (kein Nonce) -->
  <style>body { background: red; }</style>
</head>
<body>
  <!-- Blockiert durch style-src-attr 'none' -->
  <div style="margin: 20px">Content</div>
</body>
</html>

Inline-<style>-Elemente benötigen Nonce. Externe Stylesheets von 'self' und Google Fonts sind erlaubt. Style-Attribute blockiert.

API-Dashboard mit Hash-basiertem CSS

Admin-Dashboards whitelisten spezifische Inline-Styles durch SHA-256:

http 
HTTP/2 200 OK
Content-Type: text/html
Content-Security-Policy: style-src-elem 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'self'

<!DOCTYPE html>
<html>
<head>
  <!-- Erlaubt (Hash-Match für leeres <style>) -->
  <style></style>

  <!-- Erlaubt (Hash-Match für spezifischen Code) -->
  <style>.widget { border: 1px solid #ddd; }</style>

  <!-- Erlaubt (same-origin) -->
  <link rel="stylesheet" href="/dashboard.css">

  <!-- Blockiert (anderer Hash) -->
  <style>.malicious { background: url('https://exfiltrate.com/steal'); }</style>
</head>
</html>

Nur Inline-Styles mit passendem SHA-256-Hash werden angewendet. Änderungen invalidieren den Hash.

Microservice mit striktem External-Only CSS

Security-kritische Banking-APIs verbieten alle Inline-Styles:

http 
HTTP/2 200 OK
Content-Type: text/html
Content-Security-Policy: style-src-elem 'self' https://cdn.bank.example.com; style-src-attr 'none'
Strict-Transport-Security: max-age=31536000

<!DOCTYPE html>
<html>
<head>
  <!-- Erlaubt -->
  <link rel="stylesheet" href="/secure.css">
  <link rel="stylesheet" href="https://cdn.bank.example.com/banking.css">

  <!-- Blockiert (keine Inline-Styles erlaubt) -->
  <style>/* Any inline CSS */</style>
</head>
<body>
  <!-- Blockiert -->
  <div style="display: none">Hidden</div>
</body>
</html>

Nur externe Stylesheets von whitelisteten Domains. Keinerlei Inline-CSS erlaubt.

Style-Element-Validation-Flow

Visualisierung der Nonce-basierten Style-Element-Validierung mit CSP-Engine-Enforcement und External-Stylesheet-Whitelisting.

plantuml 
@startuml
actor Developer
participant "Browser" as Browser
participant "API Server" as API
participant "CDN" as CDN
participant "CSP Engine" as CSP

Developer -> Browser: Request /app
Browser -> API: GET /app
API -> API: Generate nonce: 'xyz123'
API -> Browser: HTML + CSP: style-src-elem 'nonce-xyz123' 'self' https://cdn.example.com

Browser -> Browser: Parse HTML
Browser -> Browser: Find <style nonce="xyz123">

Browser -> CSP: Validate style element
CSP -> CSP: Check nonce: matches 'xyz123'
CSP -> Browser: Allow style element
Browser -> Browser: Apply inline styles
note right: Critical CSS angewendet

Browser -> Browser: Find <link rel="stylesheet" href="/app.css">
Browser -> CSP: Validate stylesheet source
CSP -> CSP: Check origin: same-origin ('self')
CSP -> Browser: Allow stylesheet load
Browser -> API: GET /app.css
API -> Browser: CSS content
Browser -> Browser: Apply external styles

Browser -> Browser: Find <link href="https://cdn.example.com/lib.css">
Browser -> CSP: Validate external stylesheet
CSP -> CSP: Check domain: cdn.example.com in whitelist
CSP -> Browser: Allow
Browser -> CDN: GET /lib.css
CDN -> Browser: CSS content

Browser -> Browser: Find <style> (kein Nonce)
Browser -> CSP: Validate style element
CSP -> CSP: No nonce, 'unsafe-inline' not set
CSP -> Browser: Block style element
Browser -> Browser: CSP violation logged
note right: Potentielle CSS-Injection verhindert

Browser -> Browser: Find <div style="...">
Browser -> CSP: Check style-src-attr (not style-src-elem)
note right: style-src-elem kontrolliert\nnur <style> und <link>
@enduml

Vorteile für die Systemarchitektur

Granulare Style-Element-Kontrolle trennt style-Tags von style-Attributen für Performance-optimierte Critical-CSS-Strategien in API-Frontends.

  • Granulare CSS-Element-Kontrolle: Trennt Style-Element-Policy von Style-Attribut-Policy ermöglicht stricte Inline-style-Kontrolle ohne style-Attribute zu betreffen
  • Performance-Optimierung: Nonce-basierte Critical-CSS-Freigabe ermöglicht First-Paint-Optimierung ohne unsafe-inline Security-Risiken in API-Frontends
  • CDN-Integration: Präzise Kontrolle über externe Stylesheet-Quellen ideal für Multi-CDN-Strategien in globalen API-Plattformen

Spezifikation

Die style-src-elem Direktive ist Teil der CSP Level 3 Spezifikation:

Wichtig: Diese Direktive kontrolliert NUR Style-Elemente und externe Stylesheets. style-Attribute werden von style-src-attr kontrolliert. Für vollständige CSS-Kontrolle beide Direktiven kombinieren.

Weitere Spezifikationen

CSP style-src, Content-Security-Policy Header