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

package/client/components/markdown.test.ts

@@ -0,0 +1,518 @@
+/**
+ * renderMarkdown 단위 테스트.
+ *
+ * 핵심 회귀 방지 영역:
+ *   1. 기본 markdown (bold, italic, list, code, link).
+ *   2. 보안 — raw HTML, javascript: 링크 차단.
+ *   3. CJK + 구두점 + ** 인접의 flanking 실패 케이스 (한국어 채팅 응답에서 빈번).
+ *   4. 코드 펜스/인라인 코드 안의 ** 는 건드리지 않음.
+ */
+import {
+  renderMarkdown,
+  sanitizeHtml,
+  escapeHtml,
+  extractCjkStrongs,
+  extractMentions,
+  stripMentionRefids,
+  injectMentionRefids
+} from './markdown'
+
+describe('renderMarkdown — 기본 markdown', () => {
+  test('빈 문자열은 빈 문자열 반환', () => {
+    expect(renderMarkdown('')).toBe('')
+  })
+
+  test('일반 텍스트는 <p> 로 감쌈', () => {
+    expect(renderMarkdown('hello')).toContain('<p>hello</p>')
+  })
+
+  test('** 로 굵게', () => {
+    expect(renderMarkdown('**bold** text')).toContain('<strong>bold</strong>')
+  })
+
+  test('* 로 기울임', () => {
+    expect(renderMarkdown('an *italic* word')).toContain('<em>italic</em>')
+  })
+
+  test('- 로 unordered list', () => {
+    const out = renderMarkdown('- a\n- b\n- c')
+    expect(out).toContain('<ul>')
+    expect(out).toContain('<li>a</li>')
+    expect(out).toContain('<li>b</li>')
+    expect(out).toContain('<li>c</li>')
+  })
+
+  test('inline code', () => {
+    expect(renderMarkdown('use `foo` here')).toContain('<code>foo</code>')
+  })
+
+  test('fenced code block', () => {
+    const md = '```\nconst x = 1\n```'
+    expect(renderMarkdown(md)).toContain('<pre>')
+    expect(renderMarkdown(md)).toContain('<code>')
+  })
+
+  test('헤더', () => {
+    expect(renderMarkdown('# Title')).toContain('<h1>Title</h1>')
+    expect(renderMarkdown('## Sub')).toContain('<h2>Sub</h2>')
+  })
+
+  test('breaks: 단일 newline 은 <br>', () => {
+    expect(renderMarkdown('line1\nline2')).toContain('<br>')
+  })
+})
+
+describe('renderMarkdown — 보안', () => {
+  test('raw <script> 차단', () => {
+    const out = renderMarkdown("<script>alert('x')</script>")
+    expect(out).not.toContain('<script>')
+    expect(out).not.toContain('alert')
+  })
+
+  test('raw <iframe> 차단', () => {
+    const out = renderMarkdown('<iframe src=x></iframe>')
+    expect(out).not.toContain('<iframe')
+  })
+
+  test('inline HTML strong 차단 (renderer.html → 빈 문자열)', () => {
+    const out = renderMarkdown('Hello <strong>world</strong>')
+    // raw HTML 은 제거되고 텍스트만 남거나 비어야 함
+    expect(out).not.toContain('<strong>world</strong>')
+  })
+
+  test('javascript: 링크 차단', () => {
+    const out = renderMarkdown("[click](javascript:alert(1))")
+    expect(out).not.toMatch(/href="javascript:/i)
+  })
+
+  test('data: 링크 차단', () => {
+    const out = renderMarkdown('[x](data:text/html,<script>alert(1)</script>)')
+    expect(out).not.toMatch(/href="data:/i)
+  })
+
+  test('정상 https 링크는 통과', () => {
+    const out = renderMarkdown('[ok](https://example.com)')
+    expect(out).toMatch(/href="https:\/\/example\.com"/)
+  })
+})
+
+describe('sanitizeHtml — DOMPurify defense-in-depth', () => {
+  // Node 환경 (jest) 에선 window 부재 → fallback 동작 검증.
+  // 브라우저에서의 실제 정화는 통합 테스트 영역.
+
+  test('window 부재 시 입력 그대로 통과 (fallback)', () => {
+    // 직접 호출 — window undefined 환경에서 DOMPurify 안 도는 게 정상
+    const html = '<p>safe</p><script>bad</script>'
+    const out = sanitizeHtml(html)
+    // 노드 환경에서 fallback 이라 그대로 통과 — 브라우저 환경에선 script 제거됨
+    expect(typeof out).toBe('string')
+  })
+
+  test('window 있을 때 (jsdom mock) — script 차단 확인', () => {
+    // jsdom 은 jest 의 testEnvironment 가 jsdom 일 때만 동작 — 본 setup 은 node.
+    // 본 test 는 sanitizeHtml 의 *contract* 만 확인 (string in → string out).
+    const out = sanitizeHtml('<p>hello</p>')
+    expect(out).toContain('hello')
+  })
+
+  test('빈 문자열 안전 처리', () => {
+    expect(sanitizeHtml('')).toBe('')
+  })
+
+  test('null/undefined fallback', () => {
+    // 타입상 string 만 받지만 방어적으로 — 빈 문자열로 처리
+    expect(sanitizeHtml('' as any)).toBe('')
+  })
+})
+
+describe('renderMarkdown — XSS 우회 시도 차단 (defense-in-depth)', () => {
+  // 본 테스트들은 marked 의 1차 차단 + DOMPurify 의 2차 차단이 모두 작동하는지
+  // 회귀 방지. node 환경에선 sanitizeHtml 이 fallback 이지만, marked 의 1차
+  // renderer.html → '' 차단만으로도 대부분 케이스 차단 검증 가능.
+
+  test('이미지 onerror 핸들러 시도 — img 태그 자체에 onerror attribute 없음', () => {
+    const out = renderMarkdown('![alt](x" onerror="alert(1))')
+    // 결과 텍스트에 escape 된 형태로 onerror= 라는 글자 자체는 남을 수 있지만,
+    // *실행 가능한 attribute* 형태 (속성 이름으로) 는 없어야 한다.
+    // 정밀 검사: <img 태그 안에 onerror=" 형태가 없는지
+    expect(out).not.toMatch(/<img\b[^>]*\bonerror\s*=/i)
+    // 또한 escape 안 된 따옴표 + onerror 조합 자체도 없어야
+    expect(out).not.toMatch(/"\s+onerror=/i)
+  })
+
+  test('img src=javascript: 차단', () => {
+    const out = renderMarkdown('![x](javascript:alert(1))')
+    expect(out).not.toMatch(/src="javascript:/i)
+  })
+
+  test('SVG xss 패턴 차단', () => {
+    const out = renderMarkdown('<svg onload=alert(1)>')
+    expect(out).not.toContain('<svg')
+    expect(out).not.toMatch(/onload/i)
+  })
+
+  test('style="javascript:..." 차단', () => {
+    const out = renderMarkdown('[click](#){:style="javascript:alert(1)"}')
+    expect(out).not.toMatch(/style="javascript:/i)
+  })
+
+  test('mention span 안의 사용자 token escape', () => {
+    const out = renderMarkdown('#"><script>alert(1)</script>')
+    expect(out).not.toMatch(/<script>/i)
+  })
+
+  test('event handler attribute 차단 (onmouseover 등)', () => {
+    // raw HTML 이 marked.renderer.html 에서 빈 문자열로 → onmouseover 자체가 출력 안됨
+    const out = renderMarkdown('<a href="#" onmouseover="alert(1)">x</a>')
+    expect(out).not.toMatch(/onmouseover/i)
+  })
+
+  test('vbscript: 스킴 차단 (legacy IE 잔재)', () => {
+    const out = renderMarkdown('[x](vbscript:msgbox(1))')
+    expect(out).not.toMatch(/href="vbscript:/i)
+  })
+})
+
+describe('renderMarkdown — CJK + 구두점 인접 (회귀 방지)', () => {
+  // 이 그룹은 사용자 보고 사례. CommonMark flanking 규칙으로 인해 ** 가
+  // 닫히지 않던 케이스들을 모두 회복해야 한다.
+  const cases: Array<[string, string, string]> = [
+    ["closing ** 이 punct + CJK 사이", "**'rect'**의", '<strong>&#039;rect&#039;</strong>의'],
+    ["키 **'fillStyle'**의", "키 **'fillStyle'**의", '<strong>&#039;fillStyle&#039;</strong>의'],
+    ["AGV 이름 + 조사", "**'AGV-1'**의 위치", '<strong>&#039;AGV-1&#039;</strong>의'],
+    ["다중 인접 한글", "사용자가 **'AGV-1'**컴포넌트를", '<strong>&#039;AGV-1&#039;</strong>컴포넌트를'],
+    ["bold 안 . 으로 끝", '**foo.**의', '<strong>foo.</strong>의'],
+    ["bold 안 ) 으로 끝", '**foo)**의', '<strong>foo)</strong>의'],
+    ["한 ** punct 시작 인접", "한**'foo'**", '한<strong>&#039;foo&#039;</strong>'],
+    ["양쪽 모두 CJK + punct", "한**'foo'**글", '한<strong>&#039;foo&#039;</strong>글']
+  ]
+
+  for (const [name, input, expected] of cases) {
+    test(name, () => {
+      const out = renderMarkdown(input)
+      expect(out).toContain(expected)
+    })
+  }
+
+  test('정상 케이스는 그대로 marked 가 처리', () => {
+    // 닫는 ** 가 공백 직전인 경우 — flanking 통과 (marked native; entity 표기는 &#39;)
+    const a = renderMarkdown("키 **'fillStyle'** 의")
+    expect(a).toMatch(/<strong>(&#0?39;|')fillStyle(&#0?39;|')<\/strong>/)
+    const b = renderMarkdown("Type **'rect'** here")
+    expect(b).toMatch(/<strong>(&#0?39;|')rect(&#0?39;|')<\/strong>/)
+  })
+
+  test('사용자 실제 케이스 — 산업용 다크 모드 대시보드', () => {
+    const md = "**공장 설비 및 생산 현황을 한눈에 파악하기 위한 '산업용 다크 모드 대시보드'** 도 확인해보라."
+    const out = renderMarkdown(md)
+    expect(out).toContain('<strong>')
+    expect(out).toContain('대시보드')
+  })
+
+  test('punct 가 끝/시작에 없으면 변경 없음', () => {
+    // marked 자체가 처리할 수 있는 케이스 — 우회 안 일어남
+    const out = renderMarkdown('한**foo**글')
+    expect(out).toContain('<strong>foo</strong>')
+  })
+
+  test('일본어 인접', () => {
+    expect(renderMarkdown("これは**'値'**です")).toContain('<strong>&#039;値&#039;</strong>')
+  })
+
+  test('중국어 인접', () => {
+    expect(renderMarkdown("这是**'值'**测试")).toContain('<strong>&#039;值&#039;</strong>')
+  })
+
+  test('인라인 코드 안의 ** 는 건드리지 않음', () => {
+    // 코드 안의 ** 는 그대로 텍스트로 남아야 함
+    const out = renderMarkdown('`**not bold**`')
+    expect(out).toContain('<code>**not bold**</code>')
+  })
+
+  test('코드 펜스 안의 ** 는 건드리지 않음', () => {
+    const md = '```\n**not bold**\n```'
+    const out = renderMarkdown(md)
+    expect(out).toContain('<code>')
+    // 펜스 안의 ** 는 marked 가 텍스트로 그대로 둠
+    expect(out).toMatch(/\*\*not bold\*\*/)
+  })
+
+  test('placeholder 토큰 (BAICJKSTRONG…) 이 출력에 노출되지 않음', () => {
+    const out = renderMarkdown("키 **'fillStyle'**의")
+    expect(out).not.toContain('BAICJKSTRONG')
+    expect(out).not.toContain('ENDMARK')
+  })
+
+  test('치환된 strong 내용은 HTML escape 됨', () => {
+    // CJK-fix 경로를 타는 케이스에 < > 가 섞여도 안전하게 escape 되어야 한다.
+    // before='', after='의' (CJK), innerStart=', innerEnd=' (둘 다 punct) → fix 트리거.
+    const out = renderMarkdown("**'<bad>'**의")
+    expect(out).not.toContain('<bad>')
+    expect(out).toContain('&lt;bad&gt;')
+    expect(out).toContain('<strong>')
+  })
+
+  test('여러 strong 가 한 줄에 있어도 모두 처리', () => {
+    const out = renderMarkdown("**'A'**과 **'B'**는 다르다")
+    // 둘 다 strong 으로 렌더되어야 함
+    const matches = out.match(/<strong>/g) ?? []
+    expect(matches.length).toBe(2)
+  })
+})
+
+describe('extractCjkStrongs — 내부 동작', () => {
+  test('필요 없는 케이스는 stored 비어 있음', () => {
+    const r = extractCjkStrongs('regular **bold** text')
+    expect(r.stored).toEqual([])
+    expect(r.processed).toBe('regular **bold** text')
+  })
+
+  test('필요한 케이스만 추출', () => {
+    const r = extractCjkStrongs("키 **'fillStyle'**의")
+    expect(r.stored).toEqual(["'fillStyle'"])
+    expect(r.processed).toContain('BAICJKSTRONG')
+  })
+
+  test('인라인 코드 안의 ** 는 추출 안 함', () => {
+    const r = extractCjkStrongs("`**'foo'**의` 와 텍스트")
+    expect(r.stored).toEqual([])
+    expect(r.processed).toContain("`**'foo'**의`")
+  })
+
+  test('코드 펜스 안의 ** 는 추출 안 함', () => {
+    const r = extractCjkStrongs("```\n**'foo'**의\n```")
+    expect(r.stored).toEqual([])
+  })
+
+  test('짝이 안 맞는 ** 는 무시', () => {
+    const r = extractCjkStrongs('한**foo and 글')
+    expect(r.stored).toEqual([])
+  })
+})
+
+describe('extractMentions — `#token` placeholder 추출', () => {
+  test('빈 문자열은 빈 결과', () => {
+    const r = extractMentions('')
+    expect(r.stored).toEqual([])
+    expect(r.processed).toBe('')
+  })
+
+  test('단일 mention — 영문', () => {
+    const r = extractMentions('보드의 #motor1 위치')
+    expect(r.stored).toEqual([{ trigger: '#', token: 'motor1' }])
+    expect(r.processed).toMatch(/보드의 BAIMENTION0ENDMENTION 위치/)
+  })
+
+  test('단일 mention — 한글', () => {
+    const r = extractMentions('#경광등1 빨갛게')
+    expect(r.stored).toEqual([{ trigger: '#', token: '경광등1' }])
+  })
+
+  test('다중 mention — 순서대로 인덱스', () => {
+    const r = extractMentions('#a 와 #b 비교')
+    expect(r.stored).toEqual([
+      { trigger: '#', token: 'a' },
+      { trigger: '#', token: 'b' }
+    ])
+    expect(r.processed).toMatch(/BAIMENTION0ENDMENTION 와 BAIMENTION1ENDMENTION/)
+  })
+
+  test('단어 중간 # 는 mention 아님', () => {
+    const r = extractMentions('foo#bar 는 무시')
+    expect(r.stored).toEqual([])
+  })
+
+  test('# 직후 공백 (markdown ATX 헤딩) 은 매칭 안 함', () => {
+    expect(extractMentions('# Title').stored).toEqual([])
+    expect(extractMentions('## Sub').stored).toEqual([])
+    expect(extractMentions('### 한글헤딩').stored).toEqual([])
+  })
+
+  test('인라인 코드 안의 # 는 건드리지 않음', () => {
+    const r = extractMentions('use `#define` here')
+    expect(r.stored).toEqual([])
+    expect(r.processed).toBe('use `#define` here')
+  })
+
+  test('코드 펜스 안의 # 는 건드리지 않음', () => {
+    const r = extractMentions('```\n#abc in code\n```\n그리고 #def 는 mention')
+    expect(r.stored).toEqual([{ trigger: '#', token: 'def' }])
+  })
+
+  test('구두점 직후 # — 매칭', () => {
+    const r = extractMentions('(#abc) [#def]')
+    expect(r.stored).toEqual([
+      { trigger: '#', token: 'abc' },
+      { trigger: '#', token: 'def' }
+    ])
+  })
+
+  test('@user 멘션도 추출 — trigger 보존', () => {
+    const r = extractMentions('@경철 도와주세요')
+    expect(r.stored).toEqual([{ trigger: '@', token: '경철' }])
+  })
+
+  test('# 와 @ 혼합 — 순서대로', () => {
+    const r = extractMentions('@경철 #motor1 같이 봐')
+    expect(r.stored).toEqual([
+      { trigger: '@', token: '경철' },
+      { trigger: '#', token: 'motor1' }
+    ])
+  })
+
+  test('이메일 (user@host) — mention 아님', () => {
+    const r = extractMentions('a@b.com 은 이메일')
+    expect(r.stored).toEqual([])
+  })
+
+  test('renderMarkdown 통합 — span 으로 복원', () => {
+    const html = renderMarkdown('보드의 #motor1 위치')
+    expect(html).toContain('<span class="mention">#motor1</span>')
+  })
+
+  test('renderMarkdown 통합 — 한글 mention', () => {
+    const html = renderMarkdown('#경광등1 빨갛게')
+    expect(html).toContain('<span class="mention">#경광등1</span>')
+  })
+
+  test('renderMarkdown 통합 — heading 과 mention 공존', () => {
+    const html = renderMarkdown('# Title\n그리고 #foo 참조')
+    expect(html).toContain('<h1>Title</h1>')
+    expect(html).toContain('<span class="mention">#foo</span>')
+  })
+
+  test('renderMarkdown 통합 — 코드 안 # 는 평범한 code', () => {
+    const html = renderMarkdown('use `#define`')
+    expect(html).toContain('<code>#define</code>')
+    expect(html).not.toContain('<span class="mention">')
+  })
+
+  test('renderMarkdown 통합 — XSS 안전 (token 의 < > escape)', () => {
+    const html = renderMarkdown('#<script>')
+    expect(html).not.toContain('<script>')
+    // < > 이전까지만 토큰 — 매칭 안 될 수도 있고 매칭되더라도 escape
+    if (html.includes('class="mention"')) {
+      expect(html).toContain('&lt;')
+    }
+  })
+})
+
+describe('renderMarkdown — `#token{refid:N}` inline marker → data-refid', () => {
+  test('marker 없으면 span 에 data-refid 없음', () => {
+    const html = renderMarkdown('보드의 #motor1 위치')
+    expect(html).toContain('<span class="mention">#motor1</span>')
+    expect(html).not.toContain('data-refid')
+  })
+
+  test('marker 있으면 data-refid embed 되고 marker 자체는 출력 안 됨', () => {
+    const html = renderMarkdown('#motor1{refid:35} 빨갛게')
+    expect(html).toContain('<span class="mention" data-refid="35">#motor1</span>')
+    expect(html).not.toContain('{refid:')
+  })
+
+  test('다중 mention — 각 token 별 refid 분리', () => {
+    const html = renderMarkdown('#a{refid:10} 와 #b{refid:20}')
+    expect(html).toContain('data-refid="10">#a</span>')
+    expect(html).toContain('data-refid="20">#b</span>')
+  })
+
+  test('marker 일부만 있을 때 — marker 없는 mention 은 data-refid 없음', () => {
+    const html = renderMarkdown('#a{refid:10} 와 #unknown')
+    expect(html).toContain('data-refid="10">#a</span>')
+    expect(html).toContain('<span class="mention">#unknown</span>')
+  })
+
+  test('한글 mention — data-refid 정상 embed', () => {
+    const html = renderMarkdown('#경광등1{refid:35} 빨갛게')
+    expect(html).toContain('data-refid="35">#경광등1</span>')
+  })
+
+  test('marker 안 본문 — escapeHtml 안전 (XSS)', () => {
+    const html = renderMarkdown('#motor1{refid:35} <script>')
+    expect(html).not.toContain('<script>')
+    expect(html).toContain('data-refid="35"')
+  })
+})
+
+describe('stripMentionRefids — marker 제거', () => {
+  test('단일 marker 제거', () => {
+    expect(stripMentionRefids('#motor1{refid:35} 빨갛게')).toBe('#motor1 빨갛게')
+  })
+
+  test('다중 marker 제거', () => {
+    expect(stripMentionRefids('#a{refid:1} 와 #b{refid:2}')).toBe('#a 와 #b')
+  })
+
+  test('marker 없으면 원본 그대로', () => {
+    expect(stripMentionRefids('#motor1 빨갛게')).toBe('#motor1 빨갛게')
+    expect(stripMentionRefids('아무 마커 없는 텍스트')).toBe('아무 마커 없는 텍스트')
+  })
+
+  test('빈/널 안전', () => {
+    expect(stripMentionRefids('')).toBe('')
+    expect(stripMentionRefids(null)).toBe('')
+    expect(stripMentionRefids(undefined)).toBe('')
+  })
+})
+
+describe('injectMentionRefids — popup picks 를 본문에 marker 주입', () => {
+  test('단일 token 주입', () => {
+    expect(
+      injectMentionRefids('#motor1 빨갛게', [{ token: 'motor1', refid: 35 }])
+    ).toBe('#motor1{refid:35} 빨갛게')
+  })
+
+  test('다중 token — 각각 주입', () => {
+    expect(
+      injectMentionRefids('#a 와 #b', [
+        { token: 'a', refid: 10 },
+        { token: 'b', refid: 20 }
+      ])
+    ).toBe('#a{refid:10} 와 #b{refid:20}')
+  })
+
+  test('matches 가 없는 token 은 건드리지 않음', () => {
+    expect(
+      injectMentionRefids('#motor1 와 #other', [{ token: 'motor1', refid: 35 }])
+    ).toBe('#motor1{refid:35} 와 #other')
+  })
+
+  test('이미 marker 있으면 덮어쓰기 안 함 (idempotent)', () => {
+    expect(
+      injectMentionRefids('#motor1{refid:99} 빨갛게', [{ token: 'motor1', refid: 35 }])
+    ).toBe('#motor1{refid:99} 빨갛게')
+  })
+
+  test('단어 중간 # 는 매칭 안 함', () => {
+    expect(
+      injectMentionRefids('foo#motor1 끝', [{ token: 'motor1', refid: 35 }])
+    ).toBe('foo#motor1 끝')
+  })
+
+  test('빈 picks / 빈 텍스트 안전', () => {
+    expect(injectMentionRefids('#a', [])).toBe('#a')
+    expect(injectMentionRefids('', [{ token: 'a', refid: 1 }])).toBe('')
+    expect(injectMentionRefids('#a', null)).toBe('#a')
+    expect(injectMentionRefids('#a', undefined)).toBe('#a')
+  })
+
+  test('한글 token 주입', () => {
+    expect(
+      injectMentionRefids('#경광등1 빨갛게', [{ token: '경광등1', refid: 42 }])
+    ).toBe('#경광등1{refid:42} 빨갛게')
+  })
+})
+
+describe('escapeHtml — HTML 이스케이프', () => {
+  test('< > & " \' 모두 escape', () => {
+    expect(escapeHtml('<script>')).toBe('&lt;script&gt;')
+    expect(escapeHtml('a & b')).toBe('a &amp; b')
+    expect(escapeHtml('"q"')).toBe('&quot;q&quot;')
+    expect(escapeHtml("'a'")).toBe('&#039;a&#039;')
+  })
+
+  test('일반 문자는 변경 없음', () => {
+    expect(escapeHtml('hello world')).toBe('hello world')
+    expect(escapeHtml('한글 テスト 中文')).toBe('한글 テスト 中文')
+  })
+})