Securam Consulting Logo
Kontakt

DOM

Was ist das Document Object Model (DOM)?

Das Document Object Model (DOM) ist eine Programmierschnittstelle, die HTML- und XML-Dokumente als strukturierte Objektbäume abbildet. Dabei werden die einzelnen Elemente – wie Überschriften, Absätze, Links oder Tabellen – als hierarchisch miteinander verknüpfte Knoten (Nodes) modelliert. Diese Struktur ermöglicht es Programmiersprachen wie JavaScript, gezielt auf Inhalte zuzugreifen, sie dynamisch zu verändern oder zu löschen.

Das DOM ist plattform- und sprachunabhängig und bildet die Grundlage für die Interaktivität moderner Webanwendungen. Es wird bei jeder Seitenladung vom Browser erzeugt und erlaubt z. B. das Anpassen von Layouts, das Validieren von Formulareingaben in Echtzeit oder das Einblenden von Modalfenstern. Gleichzeitig stellt es eine potenzielle Angriffsfläche dar, wenn nicht korrekt mit Benutzereingaben und DOM-Manipulationen umgegangen wird.

Technischer Aufbau & Varianten

Das DOM repräsentiert ein Dokument als Baumstruktur, bestehend aus folgenden Knotentypen:

  • Element-Nodes (z. B. <div>, <a>, <span>)

  • Text-Nodes (Inhalte zwischen Tags)

  • Attribute-Nodes (Eigenschaften wie href, id, class)

  • Comment-Nodes (<!-- Kommentar -->)

Typische DOM-Operationen mit JavaScript:

  • document.getElementById("id") – Zugriff auf ein spezifisches Element

  • element.innerHTML – Änderung des Inhalts eines Elements

  • element.setAttribute("class", "neuerWert") – Setzen eines Attributs

  • document.createElement("div") – Erstellen eines neuen Elements

Erweiterungen und Varianten:

  • Virtual DOM – z. B. in React.js für Performanceoptimierung durch diff-basiertes Rendering

  • Shadow DOM – gekapseltes DOM innerhalb von Web Components

Relevanz in der Praxis

Das DOM ist elementar für die Entwicklung interaktiver Webanwendungen:

  • Responsives UI: Layouts und Komponenten können dynamisch an Benutzeraktionen angepasst werden.

  • Echtzeit-Validierung: Formulareingaben lassen sich direkt im Frontend prüfen.

  • Single-Page-Applications: DOM-Manipulation ohne vollständige Neuladung der Seite.

  • Sicherheitsaspekte: DOM-basierte XSS-Schwachstellen entstehen häufig durch unsicheren Umgang mit innerHTML, eval() oder fehlendem Escaping.

Standards & regulatorische Anforderungen

  • OWASP Top 10 – A3: Cross-Site Scripting (XSS): Unsichere DOM-Zugriffe gelten als häufige Ursache

  • W3C DOM-Level-Standards: Definieren einheitliche Schnittstellen und Event-Modelle

  • ISO/IEC 27001 – A.14.2.5: Sichere Webanwendungsentwicklung inkl. DOM-Sicherheit

Verwandte Begriffe

Beispiel aus der Praxis

In einer Kundenplattform wurde Benutzereingabe ungefiltert in innerHTML eingefügt.

Ein Angreifer konnte darüber ein DOM-basiertes XSS-Skript einschleusen, das Sitzungsdaten ausspähte.

Durch Umstellung auf textContent und konsequentes Encoding der Eingaben wurde die Schwachstelle behoben.

zum Glossar