Trusted Types API

Clientseitige oder DOM-basierte XSS-Angriffe treten auf, wenn von einem Benutzer kontrollierte Daten (wie z.B. Eingaben in ein Formularfeld) eine Funktion erreichen, die diese Daten ausführen kann. Diese Funktionen werden als Injection Sinks bezeichnet. DOM-basierte XSS-Angriffe passieren, wenn ein Benutzer in der Lage ist, beliebigen JavaScript-Code zu schreiben und durch eine dieser Funktionen ausführen zu lassen.

Die Trusted Types API sperrt riskante Injection Sinks und erfordert, dass Sie die Daten verarbeiten, bevor Sie sie einer dieser Funktionen übergeben. Wenn Sie einen String verwenden, wird der Browser einen TypeError auslösen und die Nutzung der Funktion verhindern.

Trusted Types arbeitet zusammen mit der Content-Security-Policy unter Verwendung der trusted-types- und require-trusted-types-for-Direktiven.

Die Trusted Types API sperrt Injection Sinks, die als Vektor für DOM-XSS-Angriffe dienen können. Ein Injection Sink ist jede Web-API-Funktion, die nur mit vertrauenswürdigen, validierten oder bereinigten Eingaben aufgerufen werden sollte. Beispiele für Injection Sinks sind:

• Funktionen, die HTML in das Dokument einfügen, wie Element.innerHTML, Element.outerHTML oder Document.write().
• Funktionen, die ein neues, same-origin Document mit benutzerkontrolliertem Markup erstellen, wie DOMParser.parseFromString().
• Funktionen, die Code ausführen, wie eval().
• Setzmethoden für Element-Attribute, die eine URL von zu ladendem oder auszuführendem Code akzeptieren.

Trusted Types wird Sie dazu zwingen, die Daten zu verarbeiten, bevor Sie sie an einen Injection Sink übergeben, anstatt einen String zu verwenden. Dies stellt sicher, dass die Daten vertrauenswürdig sind.

Eine Richtlinie ist eine Fabrik für Trusted Types. Webentwickler können eine Reihe von Richtlinien spezifizieren, die zur Erstellung typisierter Objekte verwendet werden, die die vertrauenswürdige Codebasis für gültige Trusted Type-Objekte bilden.

TrustedHTML

Repräsentiert einen String, der in einen Injection Sink eingefügt wird, der ihn als HTML rendert.

TrustedScript

Repräsentiert einen String, der in einen Injection Sink eingefügt wird, der dazu führen könnte, dass der Script ausgeführt wird.

TrustedScriptURL

Repräsentiert einen String, der in einen Injection Sink eingefügt wird, der ihn als URL einer externen Skriptressource analysiert.

TrustedTypePolicy

Definiert die Funktionen zur Erstellung der obigen Trusted Type-Objekte.

TrustedTypePolicyFactory

Erstellt Richtlinien und überprüft, ob Trusted Type-Objektinstanzen über eine der Richtlinien erstellt wurden.

Im folgenden Beispiel erstellen wir eine Richtlinie, die TrustedHTML-Objekte unter Verwendung von TrustedTypePolicyFactory.createPolicy() erstellt. Wir können dann TrustedTypePolicy.createHTML() verwenden, um einen bereinigten HTML-String zu erstellen, der in das Dokument eingefügt werden soll.

Der bereinigte Wert kann dann mit Element.innerHTML verwendet werden, um sicherzustellen, dass keine neuen HTML-Elemente injiziert werden können.

<div id="myDiv"></div>

const escapeHTMLPolicy = trustedTypes.createPolicy("myEscapePolicy", {
  createHTML: (string) =>
    string
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&apos;"),
});

let el = document.getElementById("myDiv");
const escaped = escapeHTMLPolicy.createHTML("<img src=x onerror=alert(1)>");
console.log(escaped instanceof TrustedHTML); // true
el.innerHTML = escaped;

Lesen Sie mehr über dieses Beispiel und entdecken Sie andere Möglichkeiten zur Bereinigung von Eingaben im Artikel Verhindern von DOM-basierten Cross-Site-Scripting-Schwachstellen mit Trusted Types.

• Verhindern von DOM-basierten Cross-Site-Scripting-Schwachstellen mit Trusted Types
• Trusted Types Polyfill (auch verfügbar als npm-Paket)