Renderizar links Markdown com segurança em respostas de chat com IA

Quando um chat com IA responde Veja [Serviços]( /services/ ), o link pode não ser renderizado e o Markdown bruto pode permanecer na tela.

Acecore encontrou esse caso no chat de contato e ajustou o renderizador em o PR que corrigiu a renderização de links Markdown.

Este artigo usa essa correção pequena como ponto de partida para converter respostas de IA em DOM com segurança.

Respostas de IA não são HTML confiável

Trate a saída do modelo como texto.

Links, negrito e listas são úteis, mas inserir a resposta em innerHTML faz o navegador interpretar qualquer string gerada pelo modelo.

Não é necessário implementar Markdown completo. É melhor detectar só os recursos suportados pelo chat e criar apenas nós DOM seguros.

O problema não é só espaço

O bug direto era um link assim:

[Serviços](/services/)

Uma regex rígida costuma assumir que a URL não tem espaços:

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

[^)\s]+ rejeita espaços, então ( /services/ ) não vira link. A correção é permitir espaços dentro dos parênteses e normalizar depois.

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

Depois disso, a validação continua obrigatória.

Faça trim antes de validar

O fluxo deve ser:

1. Extrair label e raw href
2. Aplicar trim() no raw href
3. Validar o href com allowlist
4. Criar <a> apenas se for 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)
}

Valide o mesmo valor que será renderizado. Caso contrário, a checagem perde valor.

A allowlist depende do site

Cada produto deve decidir quais URLs a IA pode mostrar.

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

Um site de recrutamento pode liberar portais de vaga; um SaaS pode liberar documentação e status page. A função deve refletir o produto.

Faça fallback para texto

Se um link falha na validação, normalmente é melhor preservar o Markdown como texto do que apagá-lo.

O usuário mantém contexto, e a equipe consegue ver o que o modelo tentou emitir. O renderizador deve criar links seguros e também falhar de forma segura.

Teste os casos errados

Inclua pelo menos:

No PR #99, as variações com e sem espaços foram confirmadas como a mesma URL pretendida.

Não implemente todo Markdown por padrão

Para chat, geralmente basta:

• Parágrafos
• Listas
• Negrito
• Código inline
• Links

Tabelas, imagens, HTML bruto e notas de rodapé aumentam muito a responsabilidade. Mesmo com uma biblioteca, a política de HTML e links precisa ser definida separadamente.

Resumo

Renderizar links Markdown em respostas de IA parece um ajuste pequeno, mas define o limite de confiança na saída do modelo.

A regra prática é: texto primeiro, subconjunto pequeno, trim antes da validação, allowlist rígida e fallback seguro.