Renderizar con seguridad enlaces Markdown en respuestas de chat con IA

Si un chat con IA responde Consulta [Servicios]( /services/ ), el enlace puede no renderizarse y el Markdown bruto puede quedar visible.

Acecore encontró este caso en el chat de contacto y ajustó el renderizador en el PR que corrigió el renderizado de enlaces Markdown.

Este artículo toma esa corrección pequeña como punto de partida para convertir respuestas de IA en DOM de forma segura.

Las respuestas de IA no son HTML confiable

La salida del modelo debe tratarse como texto.

En un chat son útiles los enlaces, negritas y listas, pero poner la respuesta en innerHTML permite que el navegador interprete cualquier cadena generada por el modelo.

No necesitas implementar Markdown completo. Necesitas detectar solo las expresiones que el chat soporta y crear nodos DOM seguros.

El problema no es solo el espacio

El bug concreto era un enlace como:

[Servicios](/services/)

Una expresión regular estricta suele asumir que la URL no contiene espacios:

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

[^)\s]+ rechaza espacios, por lo que ( /services/ ) no se reconoce. La solución es tolerar espacios dentro del paréntesis y normalizar después.

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

Pero relajar el parser no basta. Después hay que validar el valor normalizado.

Recorta href antes de validar

El orden debe ser estable:

1. Extraer label y raw href
2. Ejecutar trim() sobre raw href
3. Validar el href recortado con una allowlist
4. Crear <a> solo si está permitido

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

Valida exactamente el mismo valor que insertas en el DOM. Si no, el control pierde fuerza.

La allowlist depende del producto

Cada sitio decide qué URLs puede mostrar su IA.

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 sitio de empleo puede permitir portales de reclutamiento; un SaaS puede permitir documentación y página de estado. La función debe ser propia de cada producto.

Fallback a texto para enlaces no permitidos

Cuando un enlace no pasa la validación, no siempre conviene borrarlo.

En un chat de contacto, dejar el Markdown como texto conserva contexto para el usuario y ayuda a depurar qué intentó emitir el modelo.

El renderizador debe saber crear enlaces seguros y también fallar de forma segura.

Pruebas mínimas

Prueba más que el caso feliz.

En PR #99 se confirmó que las variantes con y sin espacios producen la misma URL esperada.

No implementes todo Markdown por defecto

Para un chat suele bastar con:

• Párrafos
• Listas
• Negrita
• Código inline
• Enlaces

Tablas, imágenes, HTML crudo y notas al pie amplían demasiado la responsabilidad. Si usas una librería más adelante, la política de HTML y URLs sigue siendo una decisión separada.

Resumen

Renderizar enlaces Markdown en respuestas de IA parece un detalle de UI, pero define cuánto confías en la salida del modelo.

La pauta es simple: texto primero, subconjunto pequeño, trim antes de validar, allowlist estricta y fallback seguro.