HTTP CSP script-src-elem

Die script-src-elem Direktive der Content Security Policy kontrolliert script-Elemente und externe Script-Ressourcen unabhängig von Event-Handler-Attributen.

Typ

CSP-Direktive zur Kontrolle von script-Elementen und externen Script-Ressourcen für granulare Script-Tag-Security unabhängig von Event-Handler-Attributen in API-getriebenen SPAs.

Syntax

Die Direktive definiert erlaubte Quellen für <script>-Elemente. Bei Fehlen fällt sie auf script-src, dann default-src zurück.

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

Direktiven

Die script-src-elem Direktive kontrolliert script-Elemente durch Source-Whitelisting und moderne Nonce-basierte Security.

source-list
Erlaubte Quellen für Script-Elemente. Unterstützt URLs, 'self', 'unsafe-inline', Nonces, Hashes, und 'strict-dynamic'. Kontrolliert sowohl externe (<script src>) als auch Inline-Scripts (<script>code</script>).
'strict-dynamic'
Erlaubt dynamisch geladene Scripts von bereits vertrauenswürdigen Scripts ohne explizite URL-Whitelists. Moderne Alternative zu statischen CDN-Whitelists in SPA-Architekturen.

Beispiele

Praktische Szenarien für script-src-elem in React SPAs API-Dashboards und Microservices mit Nonce strict-dynamic und Hash-basierter Security.

SPA mit Nonce-basierten Inline-Scripts

React-SPAs erlauben Inline-Scripts durch dynamische Nonces, blockieren aber Event-Handler:

http 
HTTP/2 200 OK
Content-Type: text/html
Content-Security-Policy: script-src-elem 'nonce-r@nd0m123' https://cdn.example.com; script-src-attr 'none'

<!DOCTYPE html>
<html>
<head>
  <!-- Erlaubt durch Nonce -->
  <script nonce="r@nd0m123">
    window.APP_CONFIG = {
      apiUrl: 'https://api.example.com',
      version: '2.1.0'
    };
  </script>

  <!-- Erlaubt durch Source-List -->
  <script src="https://cdn.example.com/react.min.js"></script>

  <!-- Blockiert (falscher Nonce) -->
  <script nonce="wrong">alert('XSS')</script>

  <!-- Blockiert durch script-src-attr -->
  <button onclick="doSomething()">Click</button>
</head>
</html>

Inline-<script>-Blöcke benötigen korrekten Nonce, CDN-Scripts sind erlaubt, Event-Handler blockiert.

API-Dashboard mit strict-dynamic

Moderne Dashboards nutzen 'strict-dynamic' für script-basiertes Loading:

http 
HTTP/2 200 OK
Content-Type: text/html
Content-Security-Policy: script-src-elem 'nonce-xyz789' 'strict-dynamic'; script-src-attr 'none'

<!DOCTYPE html>
<html>
<head>
  <script nonce="xyz789">
    // Initial trusted script
    const script = document.createElement('script');
    script.src = 'https://analytics.example.com/track.js'; // Erlaubt durch strict-dynamic
    document.head.appendChild(script);
  </script>
</head>
</html>

'strict-dynamic' erlaubt dynamisch geladene Scripts von bereits vertrauenswürdigen Scripts, ohne CDN-URLs zur Policy hinzufügen zu müssen.

Microservice mit Hash-basierter Inline-Script-Freigabe

API-Gateways whitelisten spezifische Inline-Scripts durch SHA-256-Hashes:

http 
HTTP/2 200 OK
Content-Type: text/html
Content-Security-Policy: script-src-elem 'sha256-8iXr4z8yqkPjBdEqJmNKcC8gPdJT4cY+qDjN7LO5dZI=' 'self'

<!DOCTYPE html>
<html>
<body>
  <!-- Erlaubt (Hash-Match) -->
  <script>console.log('Bootstrap complete');</script>

  <!-- Erlaubt (same-origin) -->
  <script src="/app.js"></script>

  <!-- Blockiert (kein Hash-Match) -->
  <script>alert('Different code')</script>
</body>
</html>

Nur der exakte Inline-Code mit passendem SHA-256-Hash wird ausgeführt. Änderungen am Code invalidieren den Hash.

Script-Element-Validation-Flow

Visualisierung der Nonce-basierten Script-Element-Validierung mit CSP-Engine-Enforcement und strict-dynamic-Propagation.

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: 'abc123'
API -> Browser: HTML + CSP: script-src-elem 'nonce-abc123' https://cdn.example.com

Browser -> Browser: Parse HTML
Browser -> Browser: Find <script nonce="abc123">

Browser -> CSP: Validate script element
CSP -> CSP: Check nonce: 'abc123' matches policy
CSP -> Browser: Allow script execution
Browser -> Browser: Execute inline script
note right: Trusted code ausgeführt

Browser -> Browser: Find <script src="https://cdn.example.com/lib.js">
Browser -> CSP: Validate external script
CSP -> CSP: Check source: cdn.example.com in whitelist
CSP -> Browser: Allow script load

Browser -> CDN: GET /lib.js
CDN -> Browser: JavaScript code
Browser -> Browser: Execute external script

Browser -> Browser: Find <script> (kein Nonce)
Browser -> CSP: Validate script
CSP -> CSP: No nonce, not in source-list
CSP -> Browser: Block script
Browser -> Browser: CSP violation logged
note right: Potentieller XSS verhindert

Browser -> Browser: Find <button onclick="...">
Browser -> CSP: Check script-src-attr (not script-src-elem)
note right: script-src-elem kontrolliert\nnur <script>-Elemente
@enduml

Vorteile für die Systemarchitektur

Granulare Script-Element-Kontrolle trennt script-Tags von Event-Handlern für moderne Nonce-basierte Security in API-getriebenen SPAs.

  • Granulare Script-Kontrolle: Trennt script-Element-Policy von Event-Handler-Policy ermöglicht strict Inline-Script-Controls ohne Event-Delegation zu blockieren
  • Nonce-basierte Security: Pro-Request unique Nonces verhindern Script-Injection-Angriffe da Angreifer den dynamischen Nonce-Wert nicht kennen können
  • strict-dynamic Support: Erlaubt moderne Script-Loading-Patterns ohne statische CDN-Whitelists reduziert CSP-Maintenance bei API-Updates

Spezifikation

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

Wichtig: Diese Direktive kontrolliert NUR <script>-Elemente. Event-Handler werden von script-src-attr kontrolliert. Für vollständige Script-Kontrolle beide Direktiven kombinieren.

Weitere Spezifikationen

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