Zum Inhalt springen
Alle Projekte

03Portfolio

WireMark — eine sichere Auszeichnungssprache

Erweitertes Markdown für die sichere Formatierung von Kommentaren und Beschreibungen, die Nutzer schreiben. Die TypeScript-Bibliothek hat keine externen Pakete und lässt nur durch, was ausdrücklich erlaubt ist. Sie bringt außerdem eine NestJS-Integration und einen visuellen Editor mit.

In Zahlen

Elementarten
24
Externe Pakete in der Bibliothek
0
Maximale Textlänge (Zeichen)
100 000
01

Aufgabe

Kommentare, Beschreibungen und Beiträge von Nutzern brauchen mehr als reinen Text: Überschriften, Listen, Code, Hervorhebungen. Jedes solche Feld öffnet jedoch die Tür für XSS-Angriffe, also das Einschleusen von Code, der im Browser anderer Personen ausgeführt wird: ein Skript im Inhalt, ein javascript:-Link, ein Bild mit angehängtem Skript oder unsichtbare Zeichen, die die Textrichtung umkehren. Beim Filtern von fertigem HTML übersieht man leicht einen dieser Fälle.

02

Vorgehen

WireMark nimmt überhaupt kein HTML an und muss es daher nicht bereinigen. Der Text durchläuft zuerst eine Prüfung: Limit von 100 000 Zeichen, Vereinheitlichung der Zeichendarstellung und Entfernen unsichtbarer Steuerzeichen. Dann erkennt die Bibliothek 24 Elementarten und baut nur aus ihnen HTML. Sonderzeichen wandelt sie in sichere Entsprechungen um. Links werden nur mit dem Protokoll https, http oder mailto durchgelassen (optional nur von ausgewählten Domains), Bilder nur über https, und Farben, Rahmenarten, Code-Sprachen und Emoji haben jeweils eigene Listen erlaubter Werte. Neben dem HTML liefert die Bibliothek ein Protokoll dessen, was sie abgelehnt hat, und ein Signal, dass der Inhalt verdächtig aussieht, und eine separate Funktion prüft den Text vor dem Speichern. Für NestJS gibt es ein fertiges Modul, das all das in der Anwendung verdrahtet.

03

Ergebnis

Fertig sind die Bibliothek (ca. 970 Zeilen TypeScript, ohne externe Pakete), die Integration für NestJS und zwei Seiten in reinem HTML und JS. Die erste ist eine Demo mit Editor und Live-Vorschau, die zweite ein visueller Editor mit Befehlsmenü unter „/“, schwebender Formatierungsleiste, Inhaltsverzeichnis und Export nach HTML, WireMark oder reinem Text. In der Demo werden ein eingefügtes Skript, ein Bild mit angehängtem Skript und ein javascript:-Link als reiner Text angezeigt oder blockiert, und eine separate Leiste zeigt, was abgelehnt wurde.

So funktioniert es

  1. 01

    Erst prüfen, dann formatieren

    Bevor irgendetwas verarbeitet wird, wird der Text auf eine Längengrenze gekürzt, vereinheitlicht und von unsichtbaren Steuerzeichen, Nullbytes und gemischten Zeilenenden bereinigt.

  2. 02

    Nur das, was erlaubt ist

    Ein Link wird nur mit https, http oder mailto durchgelassen (und optional nur von einer erlaubten Domain), ein Bild nur über https. Eine unbekannte Badge-Farbe wird zu Grau, ein unbekannter Boxtyp zum Standard, und der Sprachname in einem Codeblock wird auf Buchstaben, Ziffern, Bindestrich und Unterstrich gekürzt.

  3. 03

    Eine Einschleusung bleibt Text

    Sonderzeichen werden in sichere Entsprechungen umgewandelt, daher werden ein eingefügtes <script> oder ein Bild mit angehängtem Skript als gewöhnlicher Text angezeigt, und nichts wird ausgeführt. javascript:-Links werden abgelehnt, und jedes solche Ereignis landet im Protokoll.

    Eine Einschleusung bleibt Text
  4. 04

    Erweiterte Syntax

    Zusätzlich zu normalem Markdown: Boxen für verschiedene Arten von Hinweisen, farbige Badges, verborgene Spoiler, Hervorhebung, Hoch- und Tiefstellung, Emojis per Name aus einer geschlossenen Liste sowie Codeblöcke mit Kopierschaltfläche.

    Erweiterte Syntax
  5. 05

    Bereit für NestJS

    Ein fertiges Modul für NestJS-Apps. Gesendete Inhalte können bereits als sicheres HTML in Ihren Code gelangen, und bei Bedarf lässt sich der Text auch von Hand verarbeiten.

Schreiben