Rendre en sécurité les liens Markdown dans les réponses de chat IA

Quand un chat IA répond Voir [Services]( /services/ ), le lien peut ne pas être rendu et le Markdown brut peut rester visible.

Acecore a rencontré ce cas dans son chat de contact, puis a ajusté le renderer dans le PR de correction du rendu des liens Markdown.

Cet article part de cette petite correction pour expliquer comment convertir les réponses IA en DOM de manière sûre.

Les réponses IA ne sont pas du HTML fiable

La sortie du modèle doit être traitée comme du texte.

Les liens, le gras et les listes sont utiles dans un chat. Mais placer la réponse dans innerHTML laisse le navigateur interpréter une chaîne produite par le modèle.

Il ne faut pas forcément implémenter tout Markdown. Il faut détecter les quelques expressions supportées et créer seulement des nœuds DOM sûrs.

Le problème ne se limite pas aux espaces

Le bug direct était un lien comme :

[Services](/services/)

Une regex stricte suppose souvent que l URL ne contient pas d espace :

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

[^)\s]+ rejette les espaces, donc ( /services/ ) n est pas reconnu. La correction consiste à tolérer les espaces dans les parenthèses puis normaliser.

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

Mais assouplir le parser ne suffit pas. La valeur normalisée doit ensuite être validée.

Trimmer href avant validation

L ordre doit rester clair :

1. Extraire label et raw href
2. Appliquer trim() au raw href
3. Valider le href trimé avec une allowlist
4. Créer <a> seulement si le href est autorisé

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)
}

La valeur validée doit être la même que celle rendue dans le DOM.

La allowlist dépend du produit

Chaque site doit décider quelles URLs son IA peut afficher.

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'
}

Un site de recrutement peut autoriser des plateformes emploi. Un SaaS peut autoriser documentation et page de statut. La fonction doit refléter le produit.

Revenir au texte pour les liens refusés

Quand un lien échoue à la validation, le supprimer n est pas toujours le meilleur choix.

Dans un chat de contact, conserver le Markdown comme texte garde le contexte pour l utilisateur et aide les développeurs à voir ce que le modèle a tenté de produire.

Le renderer doit créer des liens sûrs et échouer de façon sûre.

Tester les mauvais cas

Vérifie au minimum :

Dans le PR #99, les variantes avec et sans espaces ont été vérifiées comme pointant vers la même URL attendue.

Ne pas implémenter tout Markdown par défaut

Pour un chat, le sous-ensemble peut rester simple :

• Paragraphes
• Listes
• Gras
• Code inline
• Liens

Tables, images, HTML brut et notes de bas de page augmentent vite le périmètre. Même avec une bibliothèque, la politique HTML et URL reste à définir séparément.

Résumé

Le rendu des liens Markdown dans une réponse IA ressemble à un détail d interface, mais il fixe la frontière de confiance envers la sortie du modèle.

La règle pratique : texte d abord, petit sous-ensemble, trim avant validation, allowlist stricte et fallback sûr.