Ein erster Blick auf die HTML Sanitizer API

Wenn Sie jemals innerHTML verwendet haben, um nutzergenerierte Inhalte zu rendern, haben Sie ein gewisses XSS-Risiko in Kauf genommen. Die übliche Lösung besteht darin, eine Bibliothek wie DOMPurify einzubinden, um den String vorher zu bereinigen. Das funktioniert, bedeutet aber zusätzliches JavaScript auszuliefern und darauf zu vertrauen, dass ein Drittanbieter mit dem sich weiterentwickelnden Parser-Verhalten des Browsers Schritt hält. Die HTML Sanitizer API ist die Antwort des Browsers auf dieses Problem – und es lohnt sich, sie jetzt zu verstehen, auch wenn sie noch nicht überall produktionsreif ist.

Warum innerHTML schon immer ein Risiko war

innerHTML tut genau das, was Sie verlangen: Es parst einen String und injiziert das Ergebnis ins DOM, ohne Fragen zu stellen. Das ist praktisch, bis jemand <img src=x onerror="stealCookies()"> als Kommentar oder Benutzernamen übergibt.

Bibliotheken wie DOMPurify begegnen diesem Problem, indem sie den String selbst parsen, den resultierenden DOM-Baum durchlaufen und alles Gefährliche entfernen, bevor sie ihn an Sie zurückgeben. Das ist effektiv, aber fragil. Das Parser-Verhalten des Browsers ändert sich im Laufe der Zeit, und eine Bibliothek, die im Userspace läuft, muss diese Änderungen ständig verfolgen. Der Browser selbst hingegen weiß immer genau, wie er ein bestimmtes Markup-Fragment parsen und ausführen wird.

Was die HTML Sanitizer API bietet

Die native HTML Sanitizer API verlagert die Bereinigung in den Browser. Anstatt innerHTML direkt zu setzen, verwenden Sie neue Methoden, die in einem Schritt parsen, bereinigen und injizieren.

Die sicheren Methoden sind diejenigen, die Sie am häufigsten verwenden werden:

• Element.setHTML()
• ShadowRoot.setHTML()
• Document.parseHTML()

Diese entfernen immer XSS-unsichere Inhalte – <script>-Tags, Event-Handler-Attribute wie onclick, javascript:-URLs in Navigationsattributen – unabhängig davon, welche Konfiguration Sie übergeben. Ohne jegliche Konfiguration ist setHTML() im Wesentlichen ein Drop-in-Ersatz für innerHTML mit automatischem XSS-Schutz:

const userContent = `<p>Hello!</p><script>alert('xss')<\/script>`;
document.getElementById("output").setHTML(userContent);
// Rendert: <p>Hello!</p>
// Das <script> wird stillschweigend entfernt

Die unsicheren Methoden – setHTMLUnsafe(), ShadowRoot.setHTMLUnsafe() und Document.parseHTMLUnsafe() – geben Ihnen mehr Kontrolle. Sie wenden nur die von Ihnen bereitgestellte Sanitizer-Konfiguration an, ohne die XSS-sichere Baseline zu erzwingen. Verwenden Sie diese nur, wenn Sie einen spezifischen Grund haben, Elemente oder Attribute zuzulassen, die die sicheren Methoden blockieren würden, und nur mit einer sorgfältig konstruierten Konfiguration.

Konfiguration des Sanitizers

Beide Methodenfamilien akzeptieren eine optionale Sanitizer-Instanz oder ein Konfigurationswörterbuch. Sie können eine Erlaubniskonfiguration (Allow-Konfiguration) erstellen (genau angeben, was erlaubt ist, alles andere verwerfen) oder eine Entfernungskonfiguration (Remove-Konfiguration) (angeben, was entfernt werden soll, alles andere erlauben).

Eine Erlaubniskonfiguration ist im Allgemeinen die sicherere Wahl:

const sanitizer = new Sanitizer({
  elements: ["p", "b", "em", "a"],
  attributes: ["href"]
});

document.getElementById("comments").setHTML(untrustedInput, { sanitizer });

Die Sanitizer-Klasse bietet auch Methoden wie allowElement() und removeElement() zur programmatischen Änderung von Konfigurationen, während diese intern konsistent gehalten werden.

Browser-Unterstützung und was Sie dagegen tun können

Hier ist das ehrliche Bild: Anfang 2026 hat die HTML Sanitizer API gerade erst begonnen, in Browsern ausgeliefert zu werden. Firefox 148 hat Unterstützung hinzugefügt, und Chrome 146 folgte, aber eine breite browserübergreifende Verfügbarkeit holt noch auf. Sie ist noch nicht Teil der Baseline-Webplattform, was bedeutet, dass Sie sich heute nicht darauf verlassen können, dass sie für alle Ihre Benutzer verfügbar ist. Sie können die aktuelle Unterstützung auf Can I Use im Auge behalten.

Verwenden Sie für Produktionscode Feature Detection und greifen Sie auf DOMPurify zurück:

if (typeof Element.prototype.setHTML === "function") {
  element.setHTML(untrustedHTML);
} else {
  element.innerHTML = DOMPurify.sanitize(untrustedHTML);
}

Fazit

Die HTML Sanitizer API repräsentiert genau die Art von Funktionalität, die Browser-Standards bieten sollten: ein gefährliches, weithin falsch gehandhabtes Muster nehmen und den sicheren Weg zum einfachen Weg machen. setHTML() versus innerHTML ist noch keine wirkliche Debatte – die Browser-Unterstützung trifft diese Entscheidung für Sie. Aber die API jetzt zu verstehen bedeutet, dass Sie bereit sein werden, sie zu übernehmen, sobald die Unterstützung breiter wird, und Sie werden ein klareres Bild davon haben, wofür die browser-native HTML-Bereinigung tatsächlich konzipiert ist.

FAQs

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.