React.Quilljs와 DOMPurify

<p>{reminder.detailed_question}</p>를 렌더링하면 값이 html 태그까지 함께 표현됩니다.

그러나 우리가 원하는 것은 굵기, 기울임 등과 같은 효과가 반영된 html의 모습입니다.

그렇게 하기 위해서는 그려줄 내용을 dangerouslySetInnerHTML로 감싸서 내보내야합니다.

그러나, 이러한 innerHTML 방식은 XSS(Cross Site Script) 공격에 취약한 방식입니다.

XSS(Cross Site Script) 공격이란

javascript와 HTML로 악의적 코드를 웹 브라우저에 심고 사용자 접속 시 그 악성 코드가 실행되도록 하는 것으로,

대표적으로 사용자 브라우저에 존재하는 쿠키, 세션, 로컬스토리지 등의 값을 긁어가는 것이 있다

이를 방지하기 위하여 Dompurify 라이브러리를 사용했습니다.

DOMPurify 설치하기

https://www.npmjs.com/package/dompurify (opens in a new tab)

pnpm add dompurify
pnpm add -D @types/dompurify

DOMPurify 적용하기

const sanitizer = dompurify.sanitize;
...
 
<div
  dangerouslySetInnerHTML={{
    __html: sanitizer(`${reminder.detailed_question}`),
  }}
/>

결과