Markdown-Links in KI-Chat-Antworten sicher rendern

Wenn ein KI-Chat Siehe [Services]( /services/ ) ausgibt, kann der Link nicht gerendert werden und das rohe Markdown bleibt sichtbar.

Acecore traf diesen Fall im Kontakt-KI-Chat und passte den Renderer in dem PR zur Korrektur des Markdown-Link-Renderings an.

Dieser Artikel nutzt diese kleine Korrektur als Einstieg, um KI-Antworten sicher in DOM umzuwandeln.

KI-Antworten sind kein vertrauenswürdiges HTML

Modellausgaben sollten als Text behandelt werden.

Links, Fettschrift und Listen sind in einem Chat nützlich. Aber innerHTML lässt den Browser beliebige Modellstrings interpretieren.

Es braucht keine komplette Markdown-Implementierung. Ein kleiner Renderer, der nur unterstützte Ausdrücke erkennt und sichere DOM-Knoten erzeugt, ist oft besser.

Das Problem ist nicht nur Leerraum

Der konkrete Fehler war ein Link wie:

[Services](/services/)

Eine strenge Regex geht oft von einer URL ohne Leerzeichen aus:

;/\[([^\]]+)\]\(([^)\s]+)\)/

[^)\s]+ lehnt Leerzeichen ab. Deshalb wird ( /services/ ) nicht erkannt. Die Korrektur toleriert Leerraum in den Klammern und normalisiert danach.

;/\[([^\]]+)\]\(\s*([^)]+?)\s*\)/

Damit ist es aber nicht getan. Der normalisierte Wert muss validiert werden.

href vor der Validierung trimmen

Der Ablauf sollte fest sein:

1. Label und raw href aus Markdown extrahieren
2. trim() auf raw href anwenden
3. Getrimmtes href per Allowlist validieren
4. <a> nur bei erlaubtem href erzeugen

const href = String(rawHref || '').trim()

if (label && isSafeMarkdownHref(href)) {
  const link = document.createElement('a')
  link.href = href
  link.rel = 'noopener noreferrer'

  if (/^https?:\/\//i.test(href)) {
    link.target = '_blank'
  }

  link.textContent = label
  parent.appendChild(link)
}

Der validierte Wert muss derselbe sein, der ins DOM geschrieben wird.

Die Allowlist ist produktspezifisch

Jede Site muss entscheiden, welche URLs ihre KI anzeigen darf.

function isSafeMarkdownHref(href) {
  if (href.startsWith('/')) return true

  try {
    const url = new URL(href, window.location.origin)
    if (url.origin === window.location.origin) return true
    if (url.hostname === 'acecore.net') return true
    if (url.hostname === 'lin.ee') return true
  } catch {
    return false
  }

  return href === 'mailto:[email protected]' || href === 'tel:05088902788'
}

Eine Recruiting-Seite kann Jobportale erlauben, ein SaaS Dokumentation und Statusseite. Die Funktion muss zur Policy des Produkts passen.

Fallback auf Text

Wenn ein Link die Validierung nicht besteht, ist Löschen nicht immer die beste Wahl.

Im Kontaktchat erhält Text den Kontext für Nutzer und zeigt Entwicklern, was das Modell ausgeben wollte. Der Renderer muss sichere Links erzeugen und sicher fehlschlagen können.

Fehlerfälle testen

Mindestens diese Fälle sollten abgedeckt sein:

Im PR #99 wurde bestätigt, dass Varianten mit und ohne Leerzeichen auf dieselbe erwartete URL führen.

Nicht ganz Markdown standardmäßig implementieren

Für Chat reicht meist:

• Absätze
• Listen
• Fett
• Inline-Code
• Links

Tabellen, Bilder, rohes HTML und Fußnoten vergrößern den Scope schnell. Selbst mit einer Bibliothek bleiben HTML- und URL-Policy eigene Entscheidungen.

Zusammenfassung

Markdown-Link-Rendering in KI-Antworten wirkt wie ein kleines UI-Detail, legt aber die Vertrauensgrenze für Modellausgaben fest.

Praktisch heißt das: erst Text, kleine Teilmenge, trim vor Validierung, strenge Allowlist und sicherer Fallback.