marked.js renderer custom 하기

link 렌더러 커스텀

링크 태그도 비슷하게 커스텀할 수 있다.
외부 링크만 새 탭으로 열고, 내부 링크는 그대로 두는 패턴이 흔하다.

import { marked, type Tokens } from 'marked'

function isExternalUrl(href: string) {
  return /^https?:\/\//.test(href)
}

marked.use({
  renderer: {
    link(token: Tokens.Link) {
      const href = escapeAttribute(token.href)
      const label = this.parser.parseInline(token.tokens)
      const title = token.title ? ` title="${escapeAttribute(token.title)}"` : ''

      if (!isExternalUrl(token.href)) {
        return `<a href="${href}"${title}>${label}</a>`
      }

      return `<a href="${href}"${title} target="_blank" rel="noopener noreferrer">${label}</a>`
    },
  },
})

외부 링크에 target="_blank"만 붙이고 rel을 빼면 보안상 아쉬운 부분이 생길 수 있다.
새 탭으로 열리는 링크에는 보통 rel="noopener noreferrer"를 함께 붙인다.

내부 링크는 현재 탭에서 이동하는 편이 자연스럽다.
블로그 글 사이의 링크까지 모두 새 탭으로 열면 사용 흐름이 끊길 수 있기 때문이다.

HTML sanitize 주의점

renderer는 HTML 문자열을 직접 반환한다.
그래서 사용자 입력이 섞이면 XSS 위험을 신경 써야 한다.

marked 공식 문서도 marked가 출력 HTML을 sanitize하지 않는다고 안내한다.
신뢰할 수 없는 Markdown을 처리한다면 변환 결과에 DOMPurify, sanitize-html 같은 HTML 정화 도구를 적용해야 한다.

import { marked } from 'marked'
import sanitizeHtml from 'sanitize-html'

const dirtyHtml = marked.parse(markdown)
const safeHtml = sanitizeHtml(dirtyHtml)

renderer에서 속성 값을 만들 때도 escape 처리가 필요하다.
예를 들어 이미지 alt나 링크 title에 큰따옴표가 들어오면 HTML 속성이 깨질 수 있다.

function escapeAttribute(value: string) {
  return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;')
}

서비스에서 허용할 태그와 속성도 명확히 정해야 한다.
style 속성을 허용할지, target과 rel을 허용할지, 이미지 src를 어떤 경로로 제한할지 같은 기준이 필요하다.

커스텀 위치

marked.use()는 애플리케이션 초기화 지점에서 한 번만 호출하는 편이 좋다.
컴포넌트 렌더링 함수 안에서 매번 호출하면 같은 확장이 반복 등록될 수 있다.

import { marked } from 'marked'

const renderer = {
  image(token) {
    return `<img src="${token.href}" alt="${token.text}" style="max-width: 100%;" />`
  },
}

marked.use({ renderer })

반복 실행될 가능성이 있다면 별도 Marked 인스턴스를 만들어 사용하는 방식도 고려할 수 있다.
전역 marked 설정을 여러 곳에서 바꾸면 어느 renderer가 최종 적용되는지 추적하기 어려워진다.

정리

marked.js renderer는 Markdown token을 HTML 문자열로 바꾸는 단계다.
이미지, 링크, heading 같은 출력 결과를 바꾸고 싶을 때 renderer를 커스텀한다.

이미지 렌더러에서는 src, alt, title 같은 속성을 안전하게 만든다.
링크 렌더러에서는 내부 링크와 외부 링크를 나누고, 외부 링크에는 target="_blank"와 rel="noopener noreferrer"를 함께 고려한다.

renderer는 HTML을 직접 반환하므로 보안 기준도 같이 봐야 한다.
신뢰할 수 없는 Markdown이라면 marked 변환 결과를 그대로 렌더링하지 말고 sanitize 단계를 둔다.

참고 자료

• marked docs: Using Pro
• marked docs: Renderer
• marked docs: Advanced Usage
• marked docs: Security
• sanitize-html documentation