@things-factory/board-ai 10.0.0-beta.108

package/client/components/markdown.ts

@@ -0,0 +1,508 @@
+/**
+ * Board AI 채팅 메시지의 Markdown 렌더링.
+ *
+ * 보안 (defense-in-depth):
+ *   1. raw HTML 차단 — marked 의 renderer.html → '' 로 block-level HTML 무력화.
+ *   2. 위험 link 스킴 차단 — javascript: / data: / vbscript: 등 거부.
+ *   3. DOMPurify 후처리 — marked 출력 전체를 sanitize. 우회되는 inline HTML
+ *      (이미지 onerror, span style="javascript:..." 등) 까지 차단.
+ *
+ * 1·2 만으로도 표면이 좁지만, 다음의 *알려진 우회 경로* 가 존재하므로 3 이 필수:
+ *   - marked 가 토큰화 실패한 일부 입력 (특히 코드블록 안 백틱 escape 미스) 에서
+ *     생 HTML 이 escape 안 된 채 흘러나갈 수 있음
+ *   - mention span (`<span class="mention" ...>`) 이 우리 손으로 만드는 element 라
+ *     allowlist 기반 정화 필요
+ *   - 멀티유저 환경 (다른 사용자 메시지 echo) 시 표면 ↑
+ *
+ * CJK 보강:
+ *   - CommonMark의 left/right-flanking 규칙 때문에 한국어/일본어/중국어 텍스트와
+ *     ** 강조 마커 사이에 구두점이 끼면 마커가 닫히지 않는 케이스가 발생한다.
+ *     예) "**'rect'**의" → 닫는 ** 가 [구두점] + [CJK] 사이에 위치하므로 right-flanking 실패
+ *   - 이런 케이스는 marked 에 넘기기 전에 자체적으로 추출 → 자리표시자로 치환 → marked
+ *     수행 → 후처리에서 <strong>...</strong> 로 복원하는 방식으로 처리한다.
+ *   - 이 우회는 사용자가 의도적으로 넣은 ** 만 대상으로 하므로 보안적으로 안전하다 (내용은
+ *     escapeHtml 로 항상 escape).
+ */
+import DOMPurify from 'dompurify'
+import { marked } from 'marked'
+
+/**
+ * DOMPurify 정화 정책.
+ *
+ * 우리가 markdown 출력에서 의도적으로 사용하는 element / attribute 만 명시 허용:
+ *   - 표준 markdown elements (p, h1~6, ul/ol/li, strong/em, a, img, code, pre, blockquote, hr, br, table 계열)
+ *   - mention span (class + data-refid + data-userid)
+ *
+ * 그 외는 모두 strip — 이벤트 핸들러 (onerror/onclick), inline style, javascript:
+ * URL 등 자동 차단. 우리 구조에 없는 element (script/iframe/object/embed 등) 도 모두 제거.
+ */
+const PURIFY_CONFIG: any = {
+  ALLOWED_TAGS: [
+    'p', 'br', 'hr',
+    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+    'strong', 'em', 'del', 's', 'u',
+    'ul', 'ol', 'li',
+    'a', 'img',
+    'code', 'pre',
+    'blockquote',
+    'table', 'thead', 'tbody', 'tr', 'th', 'td',
+    'span'
+  ],
+  ALLOWED_ATTR: [
+    'href', 'title', 'alt', 'src', 'class',
+    'data-refid', 'data-userid'
+  ],
+  // javascript: / data: / vbscript: 등 위험 스킴 자동 차단
+  ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|tel|ftp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
+  // target="_blank" 같이 우리가 명시하는 link 외엔 추가 attr 안 붙이도록
+  ADD_ATTR: ['target', 'rel'],
+  // raw HTML 입력은 marked.renderer.html → '' 로 이미 막혀있지만,
+  // dompurify 가 전체 input 을 한 번 더 정화 — 우회 차단
+  KEEP_CONTENT: true
+}
+
+const markdownRenderer = new marked.Renderer()
+markdownRenderer.html = () => ''
+
+const DANGEROUS_SCHEME_RE = /^(javascript|data|vbscript|file):/i
+
+const origLink = markdownRenderer.link.bind(markdownRenderer)
+markdownRenderer.link = (token: any) => {
+  const href = typeof token?.href === 'string' ? token.href.trim() : ''
+  if (DANGEROUS_SCHEME_RE.test(href)) {
+    return token?.text ?? ''
+  }
+  return origLink(token)
+}
+
+// 이미지 renderer — src scheme 검사 + alt 의 inline HTML escape
+const origImage = markdownRenderer.image.bind(markdownRenderer)
+markdownRenderer.image = (token: any) => {
+  const src = typeof token?.href === 'string' ? token.href.trim() : ''
+  if (DANGEROUS_SCHEME_RE.test(src)) {
+    // 위험 src — 이미지 자체 제거. alt 텍스트는 escape 해서 평문 노출
+    return escapeHtml(token?.text ?? '')
+  }
+  return origImage(token)
+}
+
+marked.setOptions({
+  gfm: true,
+  breaks: true,
+  pedantic: false,
+  renderer: markdownRenderer,
+  async: false
+} as any)
+
+export function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}
+
+// CJK 문자 범위: Hiragana, Katakana, CJK Unified Ideographs (Ext A 포함), Hangul, 전각/반각
+const CJK_RE = /[぀-ヿ㐀-䶿一-鿿가-힯＀-￯]/
+const PUNCT_RE = /\p{P}/u
+
+// marked 가 절대 변형하지 않는 토큰 (영숫자만 사용)
+const PLACEHOLDER_PREFIX = 'BAICJKSTRONG'
+const PLACEHOLDER_SUFFIX = 'ENDMARK'
+const MENTION_PLACEHOLDER_PREFIX = 'BAIMENTION'
+const MENTION_PLACEHOLDER_SUFFIX = 'ENDMENTION'
+
+// mention 토큰에 허용되는 문자 — alphanumeric + 한글/일본/중국어. 공백/구두점에서 끊김.
+const MENTION_WORD_RE = /[\w\p{Script=Hangul}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Han}]/u
+
+interface ExtractResult {
+  processed: string
+  stored: string[]
+}
+
+interface MentionExtractResult {
+  processed: string
+  stored: StoredMention[]
+}
+
+/**
+ * `**X**` 패턴 중 CJK + 구두점 인접 때문에 marked 의 flanking 규칙에서 누락되는
+ * 케이스를 추출. 코드 펜스(```)와 인라인 코드(`...`) 안쪽은 건드리지 않는다.
+ *
+ * 검출 기준 (CommonMark right-flanking 실패 ↔ left-flanking 실패):
+ *   - 닫는 ** 직전 문자가 구두점 AND 직후 문자가 CJK letter
+ *   - 여는 ** 직전 문자가 CJK letter AND 직후 문자가 구두점
+ */
+export function extractCjkStrongs(text: string): ExtractResult {
+  const stored: string[] = []
+  const lines = text.split('\n')
+  const outLines: string[] = []
+  let inFence = false
+
+  for (const line of lines) {
+    if (/^\s{0,3}```/.test(line)) {
+      inFence = !inFence
+      outLines.push(line)
+      continue
+    }
+    if (inFence) {
+      outLines.push(line)
+      continue
+    }
+    outLines.push(processLine(line, stored, () => outLines[outLines.length - 1] ?? ''))
+  }
+
+  return { processed: outLines.join('\n'), stored }
+}
+
+function processLine(line: string, stored: string[], prevLine: () => string): string {
+  let i = 0
+  let result = ''
+  while (i < line.length) {
+    const ch = line[i]
+
+    if (ch === '`') {
+      const end = line.indexOf('`', i + 1)
+      if (end === -1) {
+        result += line.slice(i)
+        break
+      }
+      result += line.slice(i, end + 1)
+      i = end + 1
+      continue
+    }
+
+    if (ch === '*' && line[i + 1] === '*') {
+      const close = findCloseStrong(line, i + 2)
+      if (close === -1) {
+        result += '**'
+        i += 2
+        continue
+      }
+      const inner = line.slice(i + 2, close)
+      if (inner.length === 0) {
+        result += '**'
+        i += 2
+        continue
+      }
+      const before = result.length > 0 ? result.slice(-1) : prevLine().slice(-1)
+      const after = close + 2 < line.length ? line[close + 2] : ''
+      if (needsCjkFix(before, after, inner)) {
+        stored.push(inner)
+        result += `${PLACEHOLDER_PREFIX}${stored.length - 1}${PLACEHOLDER_SUFFIX}`
+      } else {
+        result += line.slice(i, close + 2)
+      }
+      i = close + 2
+      continue
+    }
+
+    result += ch
+    i++
+  }
+  return result
+}
+
+function findCloseStrong(line: string, start: number): number {
+  let i = start
+  while (i < line.length - 1) {
+    if (line[i] === '`') {
+      const end = line.indexOf('`', i + 1)
+      if (end === -1) return -1
+      i = end + 1
+      continue
+    }
+    if (line[i] === '*' && line[i + 1] === '*') return i
+    i++
+  }
+  return -1
+}
+
+function needsCjkFix(before: string, after: string, inner: string): boolean {
+  const innerStart = inner[0]
+  const innerEnd = inner[inner.length - 1]
+  return (
+    (before !== '' && CJK_RE.test(before) && PUNCT_RE.test(innerStart)) ||
+    (after !== '' && CJK_RE.test(after) && PUNCT_RE.test(innerEnd))
+  )
+}
+
+function restoreCjkStrongs(html: string, stored: string[]): string {
+  let out = html
+  for (let n = 0; n < stored.length; n++) {
+    const token = `${PLACEHOLDER_PREFIX}${n}${PLACEHOLDER_SUFFIX}`
+    const replacement = `<strong>${escapeHtml(stored[n])}</strong>`
+    out = out.split(token).join(replacement)
+  }
+  return out
+}
+
+/**
+ * `#token` mention 패턴을 추출 → placeholder 로 치환.
+ *
+ * 활성 조건 (chat textarea 의 extractMentionContext 와 일관):
+ *   - `#` 직전이 문자열 시작 또는 word char 가 아님 (공백/구두점/줄 시작)
+ *   - `#` 직후가 word char (영숫자/한글/일본/중국어)
+ *   - 코드 펜스(```)와 인라인 코드(`...`) 안쪽은 건드리지 않음
+ *
+ * Markdown ATX 헤딩 (`# Title`) 과 충돌하지 않음 — 헤딩은 `#` 다음에 공백이 오므로
+ * 본 정규식 (직후가 word char) 매칭 안 됨.
+ */
+export function extractMentions(text: string): MentionExtractResult {
+  const stored: StoredMention[] = []
+  const lines = text.split('\n')
+  const outLines: string[] = []
+  let inFence = false
+
+  for (const line of lines) {
+    if (/^\s{0,3}```/.test(line)) {
+      inFence = !inFence
+      outLines.push(line)
+      continue
+    }
+    if (inFence) {
+      outLines.push(line)
+      continue
+    }
+    outLines.push(processMentionLine(line, stored))
+  }
+
+  return { processed: outLines.join('\n'), stored }
+}
+
+/** 추출된 mention — trigger 와 함께 보존해 restore 시 trigger 별 다른 span 생성. */
+interface StoredMention {
+  trigger: '#' | '@'
+  token: string
+}
+
+function processMentionLine(line: string, stored: StoredMention[]): string {
+  let result = ''
+  let i = 0
+  while (i < line.length) {
+    const ch = line[i]
+    if (ch === '`') {
+      // 인라인 코드 — 닫는 backtick 까지 그대로 통과
+      const end = line.indexOf('`', i + 1)
+      if (end === -1) {
+        result += line.slice(i)
+        break
+      }
+      result += line.slice(i, end + 1)
+      i = end + 1
+      continue
+    }
+    if (ch === '#' || ch === '@') {
+      const prev = i > 0 ? line[i - 1] : ''
+      const next = line[i + 1] ?? ''
+      if (
+        (prev === '' || !MENTION_WORD_RE.test(prev)) &&
+        next !== '' &&
+        MENTION_WORD_RE.test(next)
+      ) {
+        // 토큰 끝 위치 찾기
+        let j = i + 1
+        while (j < line.length && MENTION_WORD_RE.test(line[j])) j++
+        const token = line.slice(i + 1, j)
+        stored.push({ trigger: ch as '#' | '@', token })
+        result += `${MENTION_PLACEHOLDER_PREFIX}${stored.length - 1}${MENTION_PLACEHOLDER_SUFFIX}`
+        i = j
+        continue
+      }
+    }
+    result += ch
+    i++
+  }
+  return result
+}
+
+/**
+ * placeholder 를 mention span 으로 복원. trigger 별로 다른 span:
+ *   - `#component` → `<span class="mention" data-refid="N">#token</span>`
+ *   - `@user`      → `<span class="user-mention" data-userid="UUID">@token</span>`
+ * 매핑 없으면 data-* 속성 없이 단순 span.
+ */
+function restoreMentions(
+  html: string,
+  stored: StoredMention[],
+  maps: InlineMentionMaps
+): string {
+  let out = html
+  for (let n = 0; n < stored.length; n++) {
+    const placeholder = `${MENTION_PLACEHOLDER_PREFIX}${n}${MENTION_PLACEHOLDER_SUFFIX}`
+    const { trigger, token } = stored[n]
+    let replacement: string
+    if (trigger === '#') {
+      const refid = maps.refidByToken.get(token)
+      const attr =
+        typeof refid === 'number' && Number.isFinite(refid)
+          ? ` data-refid="${refid}"`
+          : ''
+      replacement = `<span class="mention"${attr}>#${escapeHtml(token)}</span>`
+    } else {
+      const userId = maps.userIdByToken.get(token)
+      const attr = userId ? ` data-userid="${escapeHtml(userId)}"` : ''
+      replacement = `<span class="user-mention"${attr}>@${escapeHtml(token)}</span>`
+    }
+    out = out.split(placeholder).join(replacement)
+  }
+  return out
+}
+
+/**
+ * 인라인 마커 정규식 — `{key:value}` 형태. 현재 사용:
+ *   - `{refid:N}`     — `#component` 멘션
+ *   - `{userId:UUID}` — `@user` 멘션
+ * 향후 추가 종류 (agentId / threadId / 외부 시스템 id 등) 도 동일 형식.
+ */
+const MENTION_MARKER_RE = /\{[a-zA-Z][a-zA-Z0-9]*:[^}\s]+\}/g
+
+const WORD_CLASS =
+  '\\w\\p{Script=Hangul}\\p{Script=Hiragana}\\p{Script=Katakana}\\p{Script=Han}'
+
+/**
+ * 본문에서 모든 `{key:value}` 마커 제거 — textarea 편집 / LLM 입력 / 평문 표출 등.
+ * 토큰 (#component / @user) 자체는 보존.
+ */
+export function stripMentionRefids(text: string | null | undefined): string {
+  if (!text) return ''
+  return text.replace(MENTION_MARKER_RE, '')
+}
+
+interface InlineMentionMaps {
+  /** trigger='#' 의 token → refid (component) */
+  refidByToken: Map<string, number>
+  /** trigger='@' 의 token → userId (user) */
+  userIdByToken: Map<string, string>
+}
+
+/**
+ * `#token{refid:N}` / `@user{userId:UUID}` 마커를 추출해 매핑 + 마커 제거된 본문 반환.
+ * 렌더링 직전에 호출 — 마킹 정보 분리 후 markdown 처리에 깨끗한 텍스트만.
+ */
+function extractInlineMentions(text: string): {
+  cleaned: string
+  maps: InlineMentionMaps
+} {
+  const refidByToken = new Map<string, number>()
+  const userIdByToken = new Map<string, string>()
+
+  const componentRe = new RegExp(
+    `(^|[^${WORD_CLASS}])#([${WORD_CLASS}-]+)\\{refid:(\\d+)\\}`,
+    'gu'
+  )
+  const userRe = new RegExp(
+    `(^|[^${WORD_CLASS}])@([${WORD_CLASS}-]+)\\{userId:([^}\\s]+)\\}`,
+    'gu'
+  )
+
+  let cleaned = text.replace(componentRe, (_m, leading, token, refidStr) => {
+    const refid = Number(refidStr)
+    if (Number.isFinite(refid) && !refidByToken.has(token)) refidByToken.set(token, refid)
+    return `${leading}#${token}`
+  })
+  cleaned = cleaned.replace(userRe, (_m, leading, token, userId) => {
+    if (!userIdByToken.has(token)) userIdByToken.set(token, userId)
+    return `${leading}@${token}`
+  })
+  return { cleaned, maps: { refidByToken, userIdByToken } }
+}
+
+/**
+ * 일반화된 inline marker 주입.
+ *   injectInlineMarkers(text, '#', 'refid', [{token, value: 35}])
+ *   injectInlineMarkers(text, '@', 'userId', [{token, value: 'uuid'}])
+ */
+function injectInlineMarkers(
+  text: string,
+  trigger: string,
+  markerKey: string,
+  picks: ReadonlyArray<{ token: string; value: string | number }> | null | undefined
+): string {
+  if (!text || !picks || picks.length === 0) return text ?? ''
+  const map = new Map<string, string | number>()
+  for (const p of picks) map.set(p.token, p.value)
+  const escapedTrig = trigger.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  const re = new RegExp(
+    `(^|[^${WORD_CLASS}])(${escapedTrig})([${WORD_CLASS}-]+)(\\{${markerKey}:[^}\\s]+\\})?`,
+    'gu'
+  )
+  return text.replace(re, (match, leading, trig, token, existingMarker) => {
+    if (existingMarker) return match
+    const value = map.get(token)
+    if (value === undefined) return match
+    return `${leading}${trig}${token}{${markerKey}:${value}}`
+  })
+}
+
+/** `#component` 멘션 picks → `{refid:N}` 마커 주입 (호환 유지). */
+export function injectMentionRefids(
+  text: string,
+  picks: ReadonlyArray<{ token: string; refid: number }> | null | undefined
+): string {
+  return injectInlineMarkers(
+    text,
+    '#',
+    'refid',
+    picks?.map(p => ({ token: p.token, value: p.refid }))
+  )
+}
+
+/** `@user` 멘션 picks → `{userId:UUID}` 마커 주입. */
+export function injectMentionUserIds(
+  text: string,
+  picks: ReadonlyArray<{ token: string; userId: string }> | null | undefined
+): string {
+  return injectInlineMarkers(
+    text,
+    '@',
+    'userId',
+    picks?.map(p => ({ token: p.token, value: p.userId }))
+  )
+}
+
+export function renderMarkdown(text: string): string {
+  if (!text) return ''
+  try {
+    // 0) inline 마커 추출 (`{refid:N}` / `{userId:UUID}`) → 매핑 분리 + 본문 정화
+    const { cleaned, maps } = extractInlineMentions(text)
+    // 1) mention placeholder — `#abc` / `@abc` 가 marked 의 ATX 헤딩 / 이메일 등에
+    //    휩쓸리지 않도록 영숫자 placeholder 로 치환.
+    const m = extractMentions(cleaned)
+    // 2) CJK strong placeholder
+    const c = extractCjkStrongs(m.processed)
+    const out = marked.parse(c.processed)
+    if (typeof out !== 'string') {
+      // marked 가 Promise 를 반환했다면 (async lexer 등) 안전한 fallback
+      return escapeHtml(stripMentionRefids(text)).replace(/\n/g, '<br>')
+    }
+    // 3) 역순 복원 — CJK strong → mention span. maps 로 data-refid / data-userid embed.
+    const restored = restoreMentions(restoreCjkStrongs(out, c.stored), m.stored, maps)
+    // 4) DOMPurify 후처리 — defense-in-depth. marked / 우리 mention span 둘 다 한 번 더 정화.
+    return sanitizeHtml(restored)
+  } catch {
+    return escapeHtml(stripMentionRefids(text)).replace(/\n/g, '<br>')
+  }
+}
+
+/**
+ * DOMPurify wrapper. Node 환경 (테스트) 에서도 안전하게 동작하도록 fallback.
+ *
+ * 브라우저: window.DOMParser 가 있으므로 DOMPurify 가 직접 정화.
+ * Node (테스트): jsdom 없이 DOMPurify 호출은 실패 — 실패 시 escapeHtml fallback
+ * (테스트에서 sanitize 동작은 별도 검증, 본 fallback 은 회귀 안전).
+ */
+export function sanitizeHtml(html: string): string {
+  try {
+    if (typeof window === 'undefined' || !DOMPurify.sanitize) {
+      return html
+    }
+    const result = DOMPurify.sanitize(html, PURIFY_CONFIG)
+    return typeof result === 'string' ? result : String(result)
+  } catch {
+    // DOM 환경 부재 또는 dompurify 초기화 실패 — 입력 그대로 통과
+    // (브라우저에선 정상 동작 — Node 테스트에선 sanitize 의 효과를 직접 검증)
+    return html
+  }
+}