XSS 방어용 DOMPurify 사용법

DOMPurify로 HTML 정제하는 방법:

import DOMPurify from "dompurify";

// 기본 사용
const clean = DOMPurify.sanitize(dirtyHTML);

// React에서
function SafeHTML({ html }: { html: string }) {
  const clean = DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ['p', 'b', 'i', 'em', 'strong', 'a', 'ul', 'ol', 'li',
                   'h1', 'h2', 'h3', 'pre', 'code', 'blockquote', 'img', 'br'],
    ALLOWED_ATTR: ['href', 'src', 'alt', 'class', 'target'],
  });
  return ;
}

DOMPurify가 제거하는 것:

• <script> 태그
• 이벤트 핸들러 (onclick, onerror 등)
• javascript: URL
• data: URL (이미지 제외)

사용자가 작성한 HTML을 렌더링할 때는 반드시 DOMPurify를 거쳐야 합니다.