HTTP CSP script-src-attr

Die script-src-attr Direktive der Content Security Policy kontrolliert die Ausführung von JavaScript in HTML-Event-Handler-Attributen.

Typ

CSP-Direktive zur Kontrolle von Inline-Event-Handlern in HTML-Attributen wie onclick onerror onload für granulare XSS-Prävention unabhängig von script-Element-Kontrollen.

Syntax

Die Direktive definiert erlaubte Quellen für Inline-Event-Handler. Bei Fehlen fällt sie auf script-src, dann default-src zurück.

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

Direktiven

Die script-src-attr Direktive kontrolliert Event-Handler-Attribute durch Whitelisting von Source-Expressions.

source-list
Erlaubte Quellen für Event-Handler-Attribute. Unterstützt 'unsafe-inline', 'unsafe-hashes', Nonces und Hashes, aber keine URL-basierte Quellen (da Attribute keine externe Quelle haben).
'none'
Blockiert alle Inline-Event-Handler-Attribute vollständig. Erzwingt Nutzung von Event-Delegation via addEventListener in modernen Frameworks.

Beispiele

Praktische Szenarien für script-src-attr in React Vue Angular SPAs mit Event-Delegation und Hash-basierter Handler-Freigabe.

SPA mit strikter Event-Handler-Blockierung

React-Applikationen verbieten alle Inline-Event-Handler und nutzen stattdessen Event-Delegation:

http 
HTTP/2 200 OK
Content-Type: text/html
Content-Security-Policy: script-src-attr 'none'; script-src 'self'

<!DOCTYPE html>
<html>
<body>
  <button id="submit">Submit</button> <!-- OK -->
  <button onclick="submitForm()">Submit</button> <!-- Blocked -->

  <script src="/app.js"></script> <!-- OK durch script-src -->
  <script>
    document.getElementById('submit').addEventListener('click', submitForm);
  </script>
</body>
</html>

Externe Scripts und Inline-<script>-Blöcke sind erlaubt, aber Event-Handler-Attribute werden blockiert.

API-Widget mit Hash-basierter Handler-Freigabe

Widget-Microservices erlauben spezifische Event-Handler durch SHA-256-Hashes:

http 
HTTP/2 200 OK
Content-Type: text/html
Content-Security-Policy: script-src-attr 'unsafe-hashes' 'sha256-4RS22DYeB7U14dra4KcQYxmwt5HkOInieXK1NUMBmQI='

<!DOCTYPE html>
<html>
<body>
  <!-- Erlaubt durch Hash -->
  <button onclick="alert('OK')">Click</button>

  <!-- Blockiert (anderer Hash) -->
  <img src=x onerror="alert('XSS')">
</body>
</html>

'unsafe-hashes' aktiviert Hash-basierte Freigabe für Event-Handler. Nur der exakte Code mit passendem Hash wird ausgeführt.

E-Commerce-Dashboard mit Nonce-basierten Handlers

Admin-Dashboards nutzen Nonces für dynamisch generierte Event-Handler:

http 
HTTP/2 200 OK
Content-Type: text/html
Content-Security-Policy: script-src-attr 'nonce-2726c7f26c'; script-src 'self'

<!DOCTYPE html>
<html>
<body>
  <!-- Erlaubt durch Nonce -->
  <button onclick="deleteProduct(123)" nonce="2726c7f26c">Delete</button>

  <!-- Blockiert (kein Nonce) -->
  <div onmouseover="trackHover()">Hover me</div>

  <script src="/dashboard.js"></script> <!-- OK durch script-src 'self' -->
</body>
</html>

Event-Handler benötigen das nonce-Attribut mit korrektem Wert. Pro Request unique Nonces verhindern Replay-Angriffe.

Event-Handler-Validation-Flow

Visualisierung der script-src-attr Policy-Enforcement bei Event-Handler-Attributen mit Nonce-Validierung und CSP-Blocking.

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

User -> Browser: Load page
Browser -> Frontend: GET /dashboard
Frontend -> Browser: HTML + CSP: script-src-attr 'none'; script-src 'self'
note right: Event-Handler verboten\nExterne Scripts erlaubt

Browser -> Browser: Parse HTML
Browser -> Browser: Find <button onclick="...">

Browser -> CSP: Check script-src-attr policy
CSP -> CSP: Evaluate: 'none' blocks all
CSP -> Browser: Block event handler
note right: onclick wird entfernt

Browser -> Browser: Find <script src="/app.js">
Browser -> CSP: Check script-src policy
CSP -> CSP: Evaluate: 'self' allows same-origin
CSP -> Browser: Allow script load

Browser -> Browser: Execute /app.js
note right: Event Listener via JS:\ndocument.getElementById().addEventListener()

User -> Browser: Click button
Browser -> Browser: Trigger JS event listener (erlaubt)
note right: Kein CSP-Check für\nprogrammatisch registrierte Listener

alt Alternative: With 'unsafe-inline'
    Frontend -> Browser: CSP: script-src-attr 'unsafe-inline'
    Browser -> Browser: onclick Attribute erlaubt
    User -> Browser: Click
    Browser -> Browser: Execute inline handler
end
@enduml

Vorteile für die Systemarchitektur

Granulare Event-Handler-Kontrolle trennt Inline-Handler von Script-Elementen für stricte XSS-Prävention in API-getriebenen Frontends.

  • Granulare XSS-Kontrolle: Trennt Event-Handler-Attribute von script-Elementen, ermöglicht stricte Policies für riskante Inline-Events ohne externe Scripts zu blockieren
  • Defense-in-Depth für UGC: Verhindert Event-Handler-basierte XSS-Vektoren in User-Generated Content selbst wenn HTML-Sanitization on-Attribute übersieht
  • Framework-Kompatibilität: Moderne Frameworks nutzen event delegation statt Inline-Handler, diese Direktive erzwingt Best Practices ohne Framework-Code zu beeinträchtigen

Spezifikation

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

Wichtig: Diese Direktive kontrolliert NUR Event-Handler-Attribute. <script>-Elemente werden von script-src-elem kontrolliert. Für umfassende Kontrolle beide Direktiven nutzen.

Weitere Spezifikationen

CSP script-src Directive, Content-Security-Policy Header