Start · Sprachen · JavaScript · Referenz · Sanitizer.removeUnsafe()

Sanitizer.removeUnsafe()

Methode

Passt die Konfiguration eines <code>Sanitizer</code> so an, dass alle vom Browser als XSS-unsicher eingestuften Elemente und Attribute entfernt werden.

seit JavaScript Experimentell: HTML Sanitizer API (bisher nur in w Kategorie: webapi

Signatur

Sanitizer.prototype.removeUnsafe()

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

Typ
boolean
Beschreibung
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);
true <p>Hallo</p>

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));
["p", "a", "strong"] ["href"]

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);
Konfiguration enthielt unsichere Einträge – wurde bereinigt. <div><img src="x.png"></div>

// 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 window und sieh eine Ausweichlösung vor, zum Beispiel DOMPurify.
  • Nicht überall nötig: setHTML() und parseHTML() entfernen XSS-unsichere Inhalte immer selbst. Wirklich wichtig ist removeUnsafe() nur bei setHTMLUnsafe() und parseHTMLUnsafe().
  • Reihenfolge beachten: removeUnsafe() wirkt nur auf den aktuellen Stand der Konfiguration. Wenn du danach mit allowElement('script') oder allowAttribute('onclick') wieder unsichere Einträge hinzufügst, ist die Instanz erneut unsicher. Rufe removeUnsafe() deshalb als letzten Schritt auf.
  • Kein Schutz vor allem: Die Methode entfernt nur, was der Browser als skriptausführend einstuft. Inhalte wie javascript:-URLs in href behandelt die API gesondert. Probleme wie CSS-Injection über style, Phishing-Links oder DOM-Clobbering über id/name musst 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.