HTTP CSP require-trusted-types-for

Die require-trusted-types-for Direktive der Content Security Policy erzwingt die Verwendung von Trusted Types für gefährliche DOM-Operationen in SPAs.

Typ

CSP-Direktive zur Aktivierung von Trusted Types Enforcement für DOM-Sink-APIs, verhindert DOM-basierte XSS-Angriffe durch typsichere JavaScript-APIs in Single-Page Applications.

Syntax

Die Direktive akzeptiert derzeit nur den Wert 'script', der Trusted Types für alle DOM-Manipulations-APIs erzwingt.

http 
Content-Security-Policy: require-trusted-types-for 'script'

Direktiven

Die require-trusted-types-for Direktive aktiviert Trusted Types Enforcement für gefährliche DOM-Operationen.

'script'
Aktiviert Trusted Types Enforcement für DOM-Sink-APIs wie innerHTML, eval(), document.write() und andere XSS-anfällige Methoden. Ohne entsprechende Trusted Type Policy schlagen diese Operationen fehl.
trusted-types-Direktive
Muss parallel genutzt werden um erlaubte Policy-Namen zu definieren. Ohne trusted-types Direktive können keine Policies erstellt werden und alle DOM-Operationen schlagen fehl.

Beispiele

Praktische Szenarien für require-trusted-types-for in React Vue und Angular SPAs mit API-Integration.

SPA mit striktem DOM-XSS-Schutz

React/Vue-Anwendungen mit API-Integration erzwingen Trusted Types für alle Dynamic-Content-Updates:

http 
HTTP/2 200 OK
Content-Type: text/html
Content-Security-Policy: require-trusted-types-for 'script'; trusted-types react-app-policy; default-src 'self'

<!DOCTYPE html>
<html>
<head>
  <script>
    // Trusted Type Policy definieren
    const policy = trustedTypes.createPolicy('react-app-policy', {
      createHTML: (input) => DOMPurify.sanitize(input)
    });

    // API-Response sicher in DOM einfügen
    fetch('/api/content').then(r => r.json()).then(data => {
      document.getElementById('content').innerHTML = policy.createHTML(data.html);
    });
  </script>
</head>
</html>

Ohne Trusted Type Policy würde die innerHTML-Zuweisung blockiert und eine CSP-Violation auslösen.

API-Dashboard mit Multi-Policy-Setup

Admin-Dashboards nutzen verschiedene Trusted Type Policies für unterschiedliche Content-Bereiche:

http 
HTTP/2 200 OK
Content-Type: text/html
Content-Security-Policy: require-trusted-types-for 'script'; trusted-types dashboard-html dashboard-script 'allow-duplicates'

<!DOCTYPE html>
<html>
<script>
  const htmlPolicy = trustedTypes.createPolicy('dashboard-html', {
    createHTML: input => sanitizeHTML(input)
  });

  const scriptPolicy = trustedTypes.createPolicy('dashboard-script', {
    createScriptURL: url => validateScriptSource(url) ? url : ''
  });

  // API-Daten sicher verarbeiten
  fetchDashboardData().then(data => {
    document.querySelector('.metrics').innerHTML = htmlPolicy.createHTML(data.metrics);
    loadAnalyticsScript(scriptPolicy.createScriptURL('/analytics.js'));
  });
</script>
</html>

Die 'allow-duplicates' Direktive erlaubt mehrere Policies mit demselben Namen für modulare Architekturen.

Microservice-Frontend mit Report-Only Testing

Graduelle Trusted Types Einführung durch Report-Only Mode:

http 
HTTP/2 200 OK
Content-Type: text/html
Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-to trusted-types-violations
Reporting-Endpoints: trusted-types-violations="https://monitoring.example.com/tt-reports"

<!DOCTYPE html>
<html>
<script>
  // Legacy Code ohne Trusted Types
  fetch('/api/products').then(r => r.json()).then(data => {
    document.getElementById('products').innerHTML = data.htmlContent; // Violation reportet, aber nicht blockiert
  });
</script>
</html>

Violations werden reportet, aber nicht blockiert. Ideal für Migration-Analyse in Produktionsumgebungen.

Trusted-Types-Enforcement-Flow

Visualisierung des Trusted Types Validierungsprozesses bei DOM-Operationen und Policy-basierter Sanitization.

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

User -> Browser: Load application
Browser -> SPA: GET /app
SPA -> Browser: HTML + CSP: require-trusted-types-for 'script'\ntrusted-types app-policy

Browser -> Browser: Initialize Trusted Types enforcement
note right: DOM-Sink-APIs geschützt

User -> SPA: Trigger data load
SPA -> API: GET /api/user-content
API -> SPA: {"comment": "<img src=x onerror=alert(1)>"}

SPA -> SPA: Process API response
alt With Trusted Type Policy
    SPA -> CSP: policy.createHTML(data.comment)
    CSP -> CSP: Sanitize via policy
    CSP -> SPA: TrustedHTML object
    SPA -> Browser: element.innerHTML = trustedHTML
    Browser -> Browser: Safe DOM update
    note right: XSS-Payload neutralisiert
else Without Policy (Violation)
    SPA -> Browser: element.innerHTML = data.comment (raw string)
    Browser -> CSP: Check Trusted Types requirement
    CSP -> Browser: Block operation + CSP violation
    Browser -> User: TypeError thrown
    note right: DOM-XSS verhindert
end
@enduml

Vorteile für die Systemarchitektur

Trusted Types Enforcement eliminiert DOM-XSS-Risiken in API-getriebenen SPAs durch typsichere DOM-Manipulations-APIs.

  • DOM-XSS-Elimination: Verhindert systematisch DOM-basierte XSS-Angriffe durch erzwungene Sanitization an allen gefährlichen DOM-Sink-Punkten
  • Type-Safe DOM-Manipulation: Erzwingt typsichere APIs für HTML Script URL-Injection wodurch Runtime-Fehler zu Entwicklungszeit-Problemen werden
  • API-Security-Integration: Perfekt für SPAs mit REST API-Integration da alle dynamischen Content-Updates durch definierte Sanitization-Policies laufen

Spezifikation

Die require-trusted-types-for Direktive ist Teil der Trusted Types Spezifikation:

Browser-Support: Chromium-basierte Browser (Chrome, Edge, Opera). Firefox und Safari arbeiten an Implementierung. Polyfills verfügbar für Cross-Browser-Kompatibilität.

Weitere Spezifikationen

CSP trusted-types, Content-Security-Policy Header