Sichere DOM-Manipulation mit der Sanitizer API

Ziel der neuen Sanitizer API ist es, einen robusten Prozessor zu entwickeln, mit dem beliebige Strings sicher in eine Seite eingefügt werden können.

Jack J

Anwendungen arbeiten ständig mit nicht vertrauenswürdigen Zeichenfolgen, aber das sichere Rendern dieser Inhalte als Teil eines HTML-Dokuments kann eine Herausforderung sein. Ohne ausreichende Sorgfalt können Sie leicht versehentlich Möglichkeiten für Cross-Site-Scripting (XSS) schaffen, die von böswilligen Angreifern ausgenutzt werden können.

Um dieses Risiko zu mindern, zielt der neue Vorschlag der Sanitizer API darauf ab, einen robusten Prozessor zu entwickeln, mit dem beliebige Strings sicher in eine Seite eingefügt werden können. In diesem Artikel wird die API vorgestellt und ihre Verwendung erläutert.

// Expanded Safely !!
$div.setHTML(`<em>hello world</em><img src="" onerror=alert(0)>`, new Sanitizer())

Nutzereingabe mit Escapezeichen versehen

Wenn Sie Nutzereingaben, Abfragestrings, Cookie-Inhalte usw. in das DOM einfügen, müssen die Strings mit den korrekten Escapezeichen versehen werden. Besonderes Augenmerk sollte auf die DOM-Manipulation über .innerHTML gelegt werden, da nicht entescapede Strings eine typische Quelle für XSS sind.

const user_input = `<em>hello world</em><img src="" onerror=alert(0)>`
$div.innerHTML = user_input

Wenn Sie HTML-Sonderzeichen im obigen Eingabestring maskieren oder mit .textContent erweitern, wird alert(0) nicht ausgeführt. Da vom Nutzer hinzugefügtes <em> jedoch auch als String erweitert wird, kann diese Methode nicht verwendet werden, um die Textdekoration in HTML beizubehalten.

Am besten ist es, die Zeichen nicht zu entkommenttieren, sondern zu bereinigen.

Nutzereingabe bereinigen

Der Unterschied zwischen Entkommentierung und Sanitieren

Beim Entkommenttieren werden spezielle HTML-Zeichen durch HTML-Entitäten ersetzt.

Bei der Bereinigung werden semantisch schädliche Teile (z. B. Scriptausführung) aus HTML-Strings entfernt.

Beispiel

Im vorherigen Beispiel führt <img onerror> dazu, dass der Fehlerhandler ausgeführt wird. Wenn der onerror-Handler entfernt wird, kann er jedoch sicher im DOM maximiert werden, während <em> intakt bleibt.

// XSS 🧨
$div.innerHTML = `<em>hello world</em><img src="" onerror=alert(0)>`
// Sanitized ⛑
$div.innerHTML = `<em>hello world</em><img src="">`

Für eine korrekte Bereinigung muss der Eingabestring als HTML geparst werden. Dabei müssen schädliche Tags und Attribute entfernt und harmlose beibehalten werden.

Die vorgeschlagene Sanitizer API-Spezifikation zielt darauf ab, eine solche Verarbeitung als Standard-API für Browser bereitzustellen.

Sanitizer API

Die Sanitizer API wird folgendermaßen verwendet:

const $div = document.querySelector('div')
const user_input = `<em>hello world</em><img src="" onerror=alert(0)>`
$div.setHTML(user_input, { sanitizer: new Sanitizer() }) // <div><em>hello world</em><img src=""></div>

{ sanitizer: new Sanitizer() } ist jedoch das Standardargument. Das könnte so aussehen:

$div.setHTML(user_input) // <div><em>hello world</em><img src=""></div>

Hinweis: setHTML() ist auf Element definiert. Da es sich um eine Methode von Element handelt, ist der zu parsende Kontext selbsterklärend (in diesem Fall <div>). Das Parsen erfolgt einmal intern und das Ergebnis wird direkt in das DOM eingefügt.

Wenn Sie das Ergebnis der Bereinigung als String erhalten möchten, können Sie .innerHTML aus den setHTML()-Ergebnissen verwenden.

const $div = document.createElement('div')
$div.setHTML(user_input)
$div.innerHTML // <em>hello world</em><img src="">

Über die Konfiguration anpassen

Die Sanitizer API ist standardmäßig so konfiguriert, dass Strings entfernt werden, die die Scriptausführung auslösen würden. Sie können dem Desinfektionsprozess aber auch über ein Konfigurationsobjekt eigene Anpassungen hinzufügen.

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
new Sanitizer(config)

Mit den folgenden Optionen wird festgelegt, wie das angegebene Element im Ergebnis der Bereinigung behandelt werden soll.

allowElements: Namen der Elemente, die vom Desinfektionsmittel beibehalten werden sollen.

blockElements: Namen der Elemente, die der Sanitizer entfernen soll, während die untergeordneten Elemente beibehalten werden.

dropElements: Namen der Elemente, die der Sanitizer entfernen soll, zusammen mit ihren untergeordneten Elementen.

const str = `hello <b><i>world</i></b>`

$div.setHTML(str)
// <div>hello <b><i>world</i></b></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowElements: [ "b" ]}) })
// <div>hello <b>world</b></div>

$div.setHTML(str, { sanitizer: new Sanitizer({blockElements: [ "b" ]}) })
// <div>hello <i>world</i></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowElements: []}) })
// <div>hello world</div>

Mit den folgenden Optionen können Sie auch steuern, ob der Sanitizer bestimmte Attribute zulässt oder ablehnt:

• allowAttributes
• dropAttributes

Für allowAttributes- und dropAttributes-Properties sind Listen mit Attributübereinstimmungen erforderlich. Das sind Objekte, deren Schlüssel Attributnamen und deren Werte Listen von Zielelementen oder der Platzhalter * sind.

const str = `<span id=foo class=bar style="color: red">hello</span>`

$div.setHTML(str)
// <div><span id="foo" class="bar" style="color: red">hello</span></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {"style": ["span"]}}) })
// <div><span style="color: red">hello</span></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {"style": ["p"]}}) })
// <div><span>hello</span></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {"style": ["*"]}}) })
// <div><span style="color: red">hello</span></div>

$div.setHTML(str, { sanitizer: new Sanitizer({dropAttributes: {"id": ["span"]}}) })
// <div><span class="bar" style="color: red">hello</span></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {}}) })
// <div>hello</div>

Mit allowCustomElements können Sie benutzerdefinierte Elemente zulassen oder ablehnen. Wenn sie zulässig sind, gelten weiterhin andere Konfigurationen für Elemente und Attribute.

const str = `<custom-elem>hello</custom-elem>`

$div.setHTML(str)
// <div></div>

const sanitizer = new Sanitizer({
  allowCustomElements: true,
  allowElements: ["div", "custom-elem"]
})
$div.setHTML(str, { sanitizer })
// <div><custom-elem>hello</custom-elem></div>

API-Oberfläche

Vergleich mit DomPurify

DOMPurify ist eine bekannte Bibliothek mit Funktionen zur Bereinigung. Der Hauptunterschied zwischen der Sanitizer API und DOMPurify besteht darin, dass DOMPurify das Ergebnis der Bereinigung als String zurückgibt, den du über .innerHTML in ein DOM-Element schreiben musst.

const user_input = `<em>hello world</em><img src="" onerror=alert(0)>`
const sanitized = DOMPurify.sanitize(user_input)
$div.innerHTML = sanitized
// `<em>hello world</em><img src="">`

DOMPurify kann als Fallback dienen, wenn die Sanitizer API nicht im Browser implementiert ist.

Die Implementierung von DOMPurify hat einige Nachteile. Wenn ein String zurückgegeben wird, wird der Eingabestring zweimal geparst: von DOMPurify und .innerHTML. Dieses doppelte Parsen verschwendet Verarbeitungszeit, kann aber auch zu interessanten Sicherheitslücken führen, wenn sich das Ergebnis des zweiten Parsens vom ersten unterscheidet.

Für HTML muss auch Kontext geparst werden. Beispiel: <td> ist in <table> sinnvoll, aber nicht in <div>. Da DOMPurify.sanitize() nur einen String als Argument akzeptiert, musste der Parsekontext erraten werden.

Die Sanitizer API verbessert den DOMPurify-Ansatz und soll das doppelte Parsen überflüssig machen und den Parsekontext verdeutlichen.

API-Status und Browserunterstützung

Die Sanitizer API wird im Standardisierungsprozess diskutiert und in Chrome implementiert.

Mozilla: lohnt es sich, ein Prototyping für diesen Vorschlag zu erstellen und setzt ihn aktiv um.

WebKit: Die Antwort finden Sie in der WebKit-Mailingliste.

Sanitizer API aktivieren

Über about://flags oder die Befehlszeilenoption aktivieren

Chrome

Die Sanitizer API wird derzeit in Chrome implementiert. In Chrome 93 oder höher können Sie das Verhalten testen, indem Sie das Flag about://flags/#enable-experimental-web-platform-features aktivieren. In früheren Versionen der Chrome Canary- und Entwicklerversion können Sie sie über --enable-blink-features=SanitizerAPI aktivieren und gleich ausprobieren. Informationen zum Ausführen von Chrome mit Flags

Firefox

Firefox implementiert die Sanitizer API ebenfalls als experimentelle Funktion. Wenn Sie die Funktion aktivieren möchten, setzen Sie das dom.security.sanitizer.enabled-Flag in about:config auf true.

Funktionserkennung

if (window.Sanitizer) {
  // Sanitizer API is enabled
}

Feedback

Wenn Sie diese API ausprobieren und Feedback dazu haben, würden wir uns sehr darüber freuen. Teilen Sie uns Ihre Meinung zu den GitHub-Problemen der Sanitizer API mit und diskutieren Sie mit den Autoren der Spezifikation und anderen Personen, die an dieser API interessiert sind.

Wenn Sie Fehler oder unerwartetes Verhalten in der Chrome-Implementierung feststellen, melden Sie sie bitte. Wählen Sie die Blink>SecurityFeature>SanitizerAPI-Komponenten aus und teilen Sie Details mit, damit die Implementierer das Problem nachvollziehen können.

Demo

Die Sanitizer API in Aktion sehen Sie im Sanitizer API Playground von Mike West:

Verweise

• HTML Sanitizer API-Spezifikation
• WICG/sanitizer-api-Repository
• Häufig gestellte Fragen zur Sanitizer API
• HTML Sanitizer API-Referenzdokumentation zu MDN

Foto von Towfiqu barbhuiya auf Unsplash.