Безопасный рендеринг Markdown-ссылок в ответах AI-чата

Если AI-чат отвечает Подробнее см. [Services]( /services/ ), ссылка может не отрендериться, а исходный Markdown останется на экране.

Acecore столкнулся с этим в контактном AI-чате и поправил renderer в PR с исправлением Markdown-ссылок.

Эта статья использует небольшое исправление как вход в тему безопасного превращения AI-ответов в DOM.

Ответы AI не являются доверенным HTML

Вывод модели нужно считать текстом.

В чате полезны ссылки, жирный текст и списки. Но innerHTML заставляет браузер интерпретировать любую строку, которую произвела модель.

Не нужно реализовывать весь Markdown. Нужен небольшой renderer, который распознает только поддерживаемые элементы и создает безопасные DOM-узлы.

Проблема не только в пробелах

Конкретная ошибка была в ссылке:

[Services](/services/)

Строгая regex часто считает, что URL не содержит пробелов:

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

[^)\s]+ отклоняет пробелы, поэтому ( /services/ ) не распознается. Исправление допускает пробелы внутри скобок, а затем нормализует значение.

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

Но ослабить parser недостаточно. Нормализованное значение обязательно нужно проверить.

Делайте trim перед проверкой href

Порядок должен быть таким:

1. Извлечь label и raw href из Markdown
2. Применить trim() к raw href
3. Проверить href по allowlist
4. Создать <a> только если href разрешен

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

Проверяемое значение должно быть тем же, что попадает в DOM.

Allowlist зависит от продукта

Каждый сайт должен решить, какие URL может показывать AI.

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

Рекрутинговый сайт может разрешать job boards, SaaS может разрешать документацию и status page. Функция должна отражать политику продукта.

Fallback в текст

Если ссылка не проходит проверку, удаление не всегда лучший вариант.

В контактном AI-чате текстовый fallback сохраняет контекст для пользователя и помогает разработчикам увидеть, что модель пыталась вывести.

Renderer должен не только создавать безопасные ссылки, но и безопасно отказывать.

Тестируйте плохие случаи

Минимальный набор:

В PR #99 было проверено, что варианты с пробелами и без них ведут к ожидаемому URL.

Не реализуйте весь Markdown по умолчанию

Для чата обычно достаточно:

• Абзацы
• Списки
• Жирный текст
• Inline-code
• Ссылки

Таблицы, изображения, raw HTML и footnotes быстро расширяют ответственность renderer. Даже с библиотекой политика HTML и URL остается отдельным решением.

Итог

Рендеринг Markdown-ссылок в AI-ответах выглядит как небольшая UI-правка, но на деле задает границу доверия к выводу модели.

Практическое правило: сначала текст, маленькое подмножество, trim перед проверкой, строгий allowlist и безопасный fallback.