Signatur
Beschreibung
removeUnsafe() ändert die Konfiguration einer bestehenden Sanitizer-Instanz direkt. Danach entfernt der Sanitizer alle Elemente und Attribute, die der Browser als gefährlich für Cross-Site-Scripting (XSS) ansieht. Dazu gehören zum Beispiel <script>, <iframe>, <frame>, <object>, <embed>, das SVG-Element <use> sowie sämtliche Event-Handler-Attribute wie onclick oder onerror. Diese Einträge werden aus den Erlaubt-Listen gestrichen und bei Bedarf in die Entfernen-Listen aufgenommen.
Die Methode ist vor allem dann nützlich, wenn du eine eigene, großzügige Konfiguration aufgebaut hast, etwa mit new Sanitizer({}) oder über allowElement()/allowAttribute(), und diese nachträglich absichern willst. Das gilt besonders für die „unsicheren“ Methoden Element.setHTMLUnsafe() und Document.parseHTMLUnsafe(). Die sicheren Methoden Element.setHTML() und Document.parseHTML() entfernen unsichere Inhalte dagegen immer, unabhängig von der Konfiguration.
Die Methode bearbeitet genau die Instanz, auf der du sie aufrufst, und gibt einen Wahrheitswert zurück, keine neue Instanz. Das Ergebnis kannst du mit Sanitizer.get() prüfen.
Rückgabewert
true, wenn die Konfiguration geändert wurde, also tatsächlich unsichere Elemente oder Attribute entfernt wurden. false, wenn die Konfiguration schon sicher war.Beispiele
Großzügige Konfiguration nachträglich absichern
// Leere Konfiguration: erlaubt zunächst praktisch alles
const sanitizer = new Sanitizer({});
const changed = sanitizer.removeUnsafe();
console.log(changed);
const container = document.querySelector('#preview');
container.setHTMLUnsafe(
'<p onclick="alert(1)">Hallo</p><script>alert(2)</script>',
{ sanitizer }
);
console.log(container.innerHTML);
Eigene Erlaubt-Liste mit versehentlich unsicheren Einträgen bereinigen
const sanitizer = new Sanitizer({
elements: ['p', 'a', 'strong', 'iframe'],
attributes: ['href', 'onmouseover']
});
sanitizer.removeUnsafe();
const config = sanitizer.get();
console.log(config.elements.map((e) => e.name));
console.log(config.attributes.map((a) => a.name));
Nutzerinhalte als Dokument parsen und prüfen, ob die Konfiguration unsicher war
const buildSanitizer = (config) => {
const sanitizer = new Sanitizer(config);
if (sanitizer.removeUnsafe()) {
console.warn('Konfiguration enthielt unsichere Einträge – wurde bereinigt.');
}
return sanitizer;
};
const sanitizer = buildSanitizer({ elements: ['div', 'img', 'script'], attributes: ['src', 'onerror'] });
const doc = Document.parseHTMLUnsafe(
'<div><img src="x.png" onerror="steal()"></div><script>steal()</script>',
{ sanitizer }
);
console.log(doc.body.innerHTML);
// Wichtig · Fallstricke
- Browser-Kompatibilität: Die HTML Sanitizer API ist neu und wird noch nicht von allen Browsern unterstützt. Prüfe die Verfügbarkeit mit
'Sanitizer' in windowund sieh eine Ausweichlösung vor, zum Beispiel DOMPurify. - Nicht überall nötig:
setHTML()undparseHTML()entfernen XSS-unsichere Inhalte immer selbst. Wirklich wichtig istremoveUnsafe()nur beisetHTMLUnsafe()undparseHTMLUnsafe(). - Reihenfolge beachten:
removeUnsafe()wirkt nur auf den aktuellen Stand der Konfiguration. Wenn du danach mitallowElement('script')oderallowAttribute('onclick')wieder unsichere Einträge hinzufügst, ist die Instanz erneut unsicher. RuferemoveUnsafe()deshalb als letzten Schritt auf. - Kein Schutz vor allem: Die Methode entfernt nur, was der Browser als skriptausführend einstuft. Inhalte wie
javascript:-URLs inhrefbehandelt die API gesondert. Probleme wie CSS-Injection überstyle, Phishing-Links oder DOM-Clobbering überid/namemusst du selbst über die Konfiguration einschränken. Eine strenge Content Security Policy (CSP) und Trusted Types bleiben als zusätzliche Schutzschicht sinnvoll. - Die Methode verändert die Instanz direkt (sie ist nicht unveränderlich). Wenn mehrere Programmteile dieselbe
Sanitizer-Instanz teilen, betrifft die Änderung alle.