In vielen kleinen Projekten – sei es eine Vereinswebsite, ein Online‑Shop für das eigene Handwerk oder eine persönliche Landingpage – wird zunehmend auf KI‑gestützte Code‑Generatoren zurückgegriffen. Diese versprechen, innerhalb weniger Minuten lauffähigen HTML‑ und JavaScript‑Code zu erhalten, ohne dass man sich intensiv mit den zugrunde liegenden Technologien auseinandersetzen muss. Hinter dieser scheinbaren Komfortzone verbergen sich jedoch Risiken: Eingebettete Google‑Fonts können datenschutzrechtliche Vorgaben verletzen, fehlende Alt‑Texte reduzieren die Barrierefreiheit, und unsichere Inline‑Skripte öffnen Angriffsflächen für XSS. Wer nicht weiß, was im generierten Quelltext steckt, verliert die Möglichkeit, solche Probleme zu erkennen und zu beheben. Ein grundlegendes Verständnis von HTML, CSS und JavaScript – also eine gewisse Code Literacy – liefert das notwendige Rüstzeug, um KI‑Ausgaben kritisch zu prüfen und eigenständig zu steuern. Im Folgenden wird dargelegt, welche Bausteine man kennen sollte, welche typischen Schwachstellen auftreten können und mit welchen Werkzeugen man den erzeugten Code effizient kontrollieren kann.
Die Bausteine verstehen – HTML, CSS und JavaScript
Man beginnt am besten beim Grundgerüst des Webs: HTML bildet die semantische Struktur einer Seite. Durch Tags wie <header>, <section> oder <article> wird der Inhalt logisch gegliedert, während Attribute wie alt, title und lang zusätzliche Informationen für Suchmaschinen und Screen‑Reader bereitstellen. Wer diese Elemente kennt, kann sofort erkennen, ob etwa ein Bild korrekt beschrieben ist oder ob die Seitenstruktur den Anforderungen an Barrierefreiheit nach WCAG entspricht.
Auf das HTML folgt CSS, das für das äußere Erscheinungsbild verantwortlich ist. Das Box‑Model, Flexbox und Grid bestimmen das Layout, während Media Queries responsive Designs ermöglichen. Farbdefinitionen und Schriftgrößen beeinflussen den Kontrast – ein entscheidender Faktor für die Lesbarkeit von Inhalten. Kennt man diese Grundlagen, lässt sich schnell feststellen, ob ein Farbschema den WCAG‑Richtlinien entspricht oder ob überflüssige CSS‑Klassen das Rendering verlangsamen.
JavaScript schließlich verleiht einer Seite Interaktivität. Durch DOM‑Manipulation und Event‑Handling können Elemente dynamisch verändert werden; der Unterschied zwischen Inline‑Skripten im HTML und ausgelagerten Dateien ist dabei von sicherheitstechnischer Bedeutung. Ein kurzer Blick auf den JavaScript‑Abschnitt reicht häufig aus, um potenzielle XSS‑Risiken zu identifizieren – insbesondere wenn innerHTML unkontrolliert verwendet wird. Selbst ein oberflächliches Verständnis dieser drei Technologien befähigt dazu, sofortige rote Flaggen zu erkennen und gezielte Korrekturen vorzunehmen, ohne dass man zum Vollzeit‑Entwickler werden muss.
Typische Risiken von KI‑generiertem Code
Man stößt bei der Nutzung von KI‑Code‑Generatoren häufig auf datenschutzrelevante Probleme. Eingebettete Google‑Fonts, YouTube‑Frames oder Tracking‑Pixel erscheinen oft unbemerkt und erfordern eine ausdrückliche Einwilligung nach DSGVO; das Fehlen entsprechender Cookie‑Banner kann zu rechtlichen Konsequenzen führen.
Barrierefreiheit wird ebenfalls häufig vernachlässigt: Bilder ohne alt‑Attribute, ein unzureichender Farbkontrast oder fehlende ARIA‑Rollen verhindern die Nutzung durch Menschen mit Behinderungen und verletzen gesetzliche Vorgaben.
Sicherheitslücken entstehen vor allem durch unsichere Inline‑Skripte, das Fehlen einer Content‑Security‑Policy (CSP) und veraltete Bibliotheken, die bekannte Schwachstellen enthalten. Diese Schwachstellen können von Angreifern ausgenutzt werden, um Schadcode einzuschleusen oder Benutzerdaten zu kompromittieren.
Lizenz- und urheberrechtliche Fragen treten auf, wenn KI‑Modelle Code‑Snippets aus Open‑Source‑Repositories übernehmen, die unter Copyleft‑Lizenzen wie der GPL stehen. Ohne klare Lizenzangaben kann die Nutzung des Codes zu rechtlichen Konflikten führen.
Ein weiterer Risikofaktor ist die ethische Bewertung des erzeugten Codes. Künstliche Intelligenz kann unbeabsichtigt Vorurteile oder nicht konforme Praktiken übernehmen, weshalb man prüfen sollte, ob die generierten Inhalte mit den eigenen Unternehmensrichtlinien und inklusiven Design‑Prinzipien vereinbar sind.
Schließlich beeinträchtigen Performance‑Optimierung und SEO‑Best Practices das Nutzererlebnis: Unoptimierte Bilder ohne srcset/sizes, fehlende Meta‑Tags oder überflüssige CSS‑Klassen erhöhen die Ladezeit und verschlechtern die Sichtbarkeit in Suchmaschinen. All diese Risiken lassen sich bereits im Quelltext entdecken, vorausgesetzt man weiß, worauf man achten muss.
Werkzeuge zur Kontrolle des erzeugten Codes
Man kann verschiedene Hilfsmittel einsetzen, um den von der KI generierten Code zu analysieren. Die integrierten Developer‑Tools moderner Browser ermöglichen das Inspizieren von Elementen, Styles und Netzwerk‑Requests; die Konsole zeigt sofortige Fehlermeldungen an. Linter wie ESLint oder Stylelint sowie Formatierer wie Prettier erkennen syntaktische Fehler und Stilabweichungen automatisch, wodurch ein einheitlicher Code entsteht, der leichter zu überprüfen ist.
Für die Barrierefreiheit stehen Werkzeuge wie axe‑core oder Lighthouse zur Verfügung; sie prüfen Kontrast, ARIA‑Attribute und Tab‑Reihenfolgen und geben konkrete Verbesserungsvorschläge aus. Sicherheitsscanner wie npm audit, Snyk oder OWASP Dependency‑Check analysieren Abhängigkeiten auf bekannte Schwachstellen und empfehlen sichere Versionen.
Git liefert ein robustes Versionskontrollsystem: Durch git diff kann man den Unterschied zwischen dem ursprünglichen KI‑Snippet und den eigenen Anpassungen nachvollziehen, während klare Commit‑Messages nach dem Prinzip Conventional Commits die Änderungen dokumentieren.
Ergänzend zu statischer Analyse kann man automatisierte Unit‑Tests mit einem Framework wie Jest oder Vitest einrichten. Solche Tests verifizieren, dass die vom KI‑Generator bereitgestellte Funktionalität tatsächlich den gewünschten Ablauf ausführt und reduzieren das Risiko von Laufzeit‑Fehlern.
Ergänzend können standardisierte Vorlagen für Audits oder README‑Dateien als Leitfaden dienen, um systematisch Datenschutz, Barrierefreiheit, Sicherheit, Lizenzfragen und Performance zu prüfen. Online‑Validatoren des W3C überprüfen HTML und CSS auf Konformität mit den jeweiligen Standards und liefern sofortige Fehlermeldungen, die eine schnelle Korrektur ermöglichen.
Von der Theorie zur Praxis – Risiken selbst erleben
Die aufgelisteten Gefahren mögen auf den ersten Blick abstrakt wirken. Um zu verstehen, dass sie in KI‑generiertem Code tatsächlich auftreten, lohnt sich ein praktisches Experiment. Die folgenden Schritte zeigen, wie schnell man auf konkrete Probleme stößt:
Schritt 1: Code generieren lassen
Man fordert einen beliebigen KI‑Assistenten auf, eine einfache Landingpage zu erstellen – etwa für ein fiktives Café mit Kontaktformular, Bildergalerie und Google‑Maps‑Einbindung. Die KI liefert meist innerhalb von Sekunden lauffähigen HTML‑Code.
Schritt 2: Risiken identifizieren
Man öffnet den generierten Code in einem Editor und durchsucht ihn gezielt nach typischen Problemstellen:
- Suche nach fonts.googleapis.com oder fonts.gstatic.com – oft findet man externe Font‑Einbindungen ohne Hinweis auf Datenschutzprobleme
- Prüfung aller <img>‑Tags auf fehlende alt‑Attribute – häufig sind Bilder nicht barrierefrei beschrieben
- Suche nach <script>‑Blöcken mit innerHTML oder eval() – potenzielle XSS‑Einstiegspunkte
- Kontrolle, ob eine Content‑Security‑Policy im <head> definiert ist – meist fehlt sie komplett
- Überprüfung von eingebundenen Bibliotheken auf veraltete Versionen mittels npm audit
Schritt 3: Automatisierte Analyse nutzen
Man lädt die generierte HTML‑Datei in einem Browser und öffnet die Developer‑Tools:
- Der Lighthouse‑Report (Performance, Accessibility, Best Practices, SEO) zeigt meist deutliche Mängel bei Barrierefreiheit und Performance
- Die Netzwerk‑Ansicht offenbart externe Requests zu Google‑Servern, die ohne Einwilligung datenschutzrechtlich problematisch sind
- Der W3C‑Validator weist auf ungültige HTML‑Strukturen oder fehlende Sprachattribute hin
Dieser dreiteilige Praxistest macht unmittelbar erfahrbar, dass KI‑generierter Code zwar funktional sein kann, aber selten die rechtlichen, sicherheitstechnischen und qualitativen Standards erfüllt, die für den produktiven Einsatz erforderlich sind. Die gute Nachricht: Mit dem im Haupttext beschriebenen Grundwissen lassen sich diese Mängel nicht nur erkennen, sondern auch systematisch beheben. Code Literacy bedeutet letztlich, die Kontrolle über das eigene digitale Produkt zu behalten – und genau diese Kontrolle ist der entscheidende Unterschied zwischen einem potenziell riskanten und einem professionell abgesicherten Webauftritt.