[리액트] html tag 를 보여 줘야 할 경우 처리

화면에 보여 줘야 할 내용에  HTML이 들어 있다면, React에서 실제 HTML로 렌더링하려면 dangerouslySetInnerHTML을 사용해야 합니다. 아래처럼 바꿔주면 됩니다.

<td dangerouslySetInnerHTML={{ __html: content }}></td>

하지만 이대로 추가를 한다면  XSS(크로스사이트스크립팅) 위험이 있으니, 외부 입력 값일 경우 꼭 sanitize 처리를 해줘야 합니다.

리액트에서는 라이브러는 지원하고 있는데 dompurify를 아래 처럼 사요하시면 됩니다.

npm install dompurify

import DOMPurify from 'dompurify';
const sanitizedContent = DOMPurify.sanitize(content);

<td dangerouslySetInnerHTML={{ __html: sanitizedContent }}></td>