DOMPurify란?

DOMPurify는 HTML, SVG, MathML 등의 콘텐츠를 정리하여 XSS(Cross-Site Scripting) 공격을 방지하는 라이브러리입니다. 신뢰할 수 없는 입력을 안전하게 처리하는 데 사용되며, 클라이언트 및 서버 환경(Node.js)에서 동작합니다.

React 에서 dangerouslySetInnerHTML 속성을 사용해서 HTML을 직접 삽입할 수 있지만, XSS공격에 노출이 될 위험이 있습니다.
그래서 DOMPurify라이브러리를 사용하여 xss 공격시도를 포함할 수 있는 코드를 제거하고, 안전하게 사용할 수 있는 HTML만 삽입되게 처리해주는 방식으로 적용합니다

설치 및 예시 코드

npm i dompurify

export const safeParseContent = (content: string) => {
  const safeContent = DOMPurify?.sanitize(content, {
    ALLOW_SELF_CLOSE_IN_ATTR: true,// self-closing 문법 허용
    ALLOW_DATA_ATTR: true, // data-* 속성 허용
    ALLOWED_TAGS: ['a'], // 특정 태그 허용
    ALLOWED_ATTR: ['href'], // 특정 속성 허용
  });
  retun safeContent;
};

html-react-parser

HTML을 React요소로 변환하는 라이브러리로 React 환경에서 HTML을 동적으로 변환합니다. 브라우저 API 인 DOMParser 와의 다르게 서버사이드 렌더링을 지원하며, 커스텀 태그가 변경 가능합니다

설치 및 예시 코드

npm install react-html-parser

import parse from 'html-react-parser';

export const safeParseContent = (content: string) => {
  
  if (typeof window == undefined || !DOMPurify?.sanitize) 	{
    return parse(content) as string;
  }

  const safeContent = DOMPurify?.sanitize(content);
  
  const parsed = parse(safeContent);

  return parsed as string;

};

• 추가적으로 transform 옵션을 사용하면 HTML의 특정 요소를 제거하거나, 커스텀 리액트 컴포넌트로 변환할 수 있음

참조

https://www.npmjs.com/package/react-html-parser
https://www.npmjs.com/package/dompurify