Sanitizer.removeElement() — Methode · JavaScript-Referenz

Signatur

Sanitizer.prototype.removeElement(element)

Beschreibung

Mit removeElement() änderst du die Konfiguration eines bestehenden Sanitizer-Objekts: Das angegebene Element wird beim Bereinigen vollständig entfernt, einschließlich aller Kindknoten und Textinhalte. Der Sanitizer kommt danach z. B. in Element.setHTML(), ShadowRoot.setHTML() oder Document.parseHTML() zum Einsatz.

Die Methode eignet sich, wenn du eine Standardkonfiguration nur leicht verschärfen willst, etwa um Bilder, Formulare oder eingebettete Medien aus Nutzerinhalten (Kommentare, Chat-Nachrichten, Markdown-Vorschau) herauszuhalten. Enthält die Konfiguration eine Positivliste (elements), wird das Element daraus gestrichen. Andernfalls landet es in der Negativliste removeElements. Ein Eintrag unter replaceWithChildrenElements wird dabei ebenfalls entfernt.

Von replaceWithChildrenElement() unterscheidet sich die Methode so: Dort verschwindet nur das Tag selbst, der Inhalt bleibt erhalten. removeElement() entfernt dagegen den ganzen Teilbaum.

Parameter

Name	Typ	Default	Beschreibung
$element Pflicht	string \| { name: string, namespace?: string \| null }		Name des zu entfernenden Elements, z. B. `"img"`. Alternativ ein Objekt mit `name` und optional `namespace` (Standard: HTML-Namensraum `"http://www.w3.org/1999/xhtml"`), z. B. für SVG- oder MathML-Elemente.

Beispiele

Bilder aus Nutzerkommentaren entfernen

const sanitizer = new Sanitizer();
sanitizer.removeElement("img");

const kommentar = '<p>Hallo <img src="x" onerror="alert(1)"> Welt</p>';
const ziel = document.querySelector("#kommentar");
ziel.setHTML(kommentar, { sanitizer });

console.log(ziel.innerHTML);

Hallo Welt

Unterschied zu replaceWithChildrenElement()

const html = '<p>Text <b>fett</b> und <i>kursiv</i></p>';

const s1 = new Sanitizer();
s1.removeElement("b");            // Tag + Inhalt weg

const s2 = new Sanitizer();
s2.replaceWithChildrenElement("b"); // nur Tag weg

const a = document.createElement("div");
const b = document.createElement("div");
a.setHTML(html, { sanitizer: s1 });
b.setHTML(html, { sanitizer: s2 });

console.log(a.innerHTML);
console.log(b.innerHTML);

Text und kursiv Text fett und kursiv

SVG-Element per Namensraum entfernen und Rückgabewert prüfen

const sanitizer = new Sanitizer();
const svgNs = "http://www.w3.org/2000/svg";

console.log(sanitizer.removeElement({ name: "svg", namespace: svgNs }));
console.log(sanitizer.removeElement({ name: "svg", namespace: svgNs }));

// Aktuelle Konfiguration inspizieren
console.log(sanitizer.get());

true false { elements: [...], ... } // Konfigurationsobjekt ohne <svg>

// Wichtig · Fallstricke

Experimentelle API: Die HTML-Sanitizer-API wird von den Browsern bisher nur eingeschränkt unterstützt (Firefox ab Version 148, Chromium nur hinter einem Flag). Frühere Entwürfe, etwa sanitizer.sanitize(), sind veraltet. Prüfe die Unterstützung vorab, z. B. mit if (\"Sanitizer\" in window && \"setHTML\" in Element.prototype). Als Rückfallebene bietet sich eine Bibliothek wie DOMPurify an.
Die Methode ändert das Sanitizer-Objekt direkt, sie erzeugt keine Kopie. Wird eine Instanz an mehreren Stellen verwendet, gilt die Änderung überall.
setHTML() entfernt XSS-gefährliche Inhalte wie <script> oder Event-Handler-Attribute immer, egal wie der Sanitizer konfiguriert ist. Bei setHTMLUnsafe() und Document.parseHTMLUnsafe() wird dagegen nur die Konfiguration angewendet. Dort musst du gefährliche Elemente selbst mit removeElement() ausschließen.
Elementnamen werden ohne Namensraum dem HTML-Namensraum zugeordnet. Für SVG und MathML gib den namespace ausdrücklich an.
Die Methode entfernt das Element mitsamt Inhalt. Soll der Text erhalten bleiben, nimm replaceWithChildrenElement().

Siehe auch

Sanitizer Sanitizer.get() Sanitizer.allowElement() Sanitizer.removeUnsafe() Sanitizer.removeAttribute()