Ueberblick
Die HTML-Vorschau dient dazu, Inhalte nach der Bereinigung zu prüfen und die Darstellung mit dem bereinigten Quellcode zu vergleichen. Sie ist hilfreich, wenn du sehen möchtest, was erhalten blieb, was entfernt wurde und ob das verbleibende Markup visuell und strukturell noch schlüssig ist. Das Tool läuft im Browser und ist für die Prüfung von eingefügtem Markup gedacht. Du kannst Verlinkungen, Medientags, Inline-Attribute und Validierungshinweise kontrollieren, bevor der Inhalt in eine Seite, ein CMS-Feld, eine Vorlage oder eine Exportdatei übernommen wird.
Anwendungsfaelle
- CMS-Fragmente prüfenEin aus einem Inhaltsfeld kopierter Ausschnitt kann vor dem Einsetzen in Layouts oder Vorlagen kontrolliert werden.
- Importiertes HTML inspizierenErkennen, welche Elemente nach der Bereinigung von externem Markup oder Exporten übrig bleiben.
- Editor-Ausgabe verifizierenLinkziele, Bilder und Formatierungen aus einem Editor vor dem Speichern prüfen.
- Nutzerbeiträge auditierenMarkup aus Kommentaren, Profilen oder Beiträgen analysieren und entfernte unsichere Teile nachvollziehen.
So funktioniert es
- 1
HTML in das Eingabefeld einfügen.
- 2
Das Tool bereinigt das Markup lokal.
- 3
Vorschau und bereinigten Quellcode prüfen.
- 4
Links, Bilder, Attribute und Validierungshinweise kontrollieren.
- 5
Das bereinigte HTML kopieren, wenn es passt.
Beispiele
Inline-Skript entfernen
Eingabe: <p>Mehr lesen <script>alert('x')</script><a href='https://example.com/post'>hier</a></p>
Ausgabe: <p>Mehr lesen <a href="https://example.com/post">hier</a></p>
Das script-Element wird entfernt, der sichere Absatz und Link bleiben erhalten.
Gefährliches Attribut entfernen
Eingabe: <img src='avatar.png' onerror='alert(1)' alt='Avatar'><span>Profil</span>
Ausgabe: <img src="avatar.png" alt="Avatar"><span>Profil</span>
Unsichere Event-Handler werden aus dem Bild-Tag entfernt.
Fehlerhaft verschachteltes Markup bereinigen
Eingabe: <div><strong>Titel<p>Inhalt</strong></p></div>
Ausgabe: <div><strong>Titel</strong><p>Inhalt</p></div>
Die Vorschau zeigt eine bereinigte Struktur, damit falsche Verschachtelungen leichter auffallen.
FAQ
Was passiert mit meinem HTML in der Vorschau?
Das Tool entfernt unsichere oder nicht erlaubte Teile während der Bereinigung und zeigt das bereinigte Ergebnis. Daher kann die Vorschau vom Original abweichen.
Warum verschwinden manche Attribute?
Attribute, die Skripte auslösen, Verhalten einschleusen oder die erlaubte Ausgabe stören können, werden entfernt. Dazu gehören auch Event-Handler.
Ist die Vorschau als Endergebnis geeignet?
Nutze sie als Prüfschritt, nicht als Ersatz für die Validierung in deiner Anwendung. Verschiedene Umgebungen erlauben unterschiedliche Elemente oder Attribute.
Warum sieht kaputtes HTML nach dem Einfügen anders aus?
Browser und Sanitizer normalisieren fehlerhaftes Markup. Dadurch können Tags anders angeordnet, automatisch geschlossen oder Texte verschoben werden.