커뮤니티 글쓰기 페이지에서 React-quill 라이브러리를 사용해 게시글 작성 에디터를 구현해 보고 싶은데, html 태그 정보는 어떻게 하지?

태그
커뮤니티 글쓰기

 시도한 방법

React-quill 에디터를 활용하여 게시글 등록 시 사용된 html 태그가 supabase에 함께 저장됨
게시글 등록 후 상세 페이지에서 해당 html 데이터를 동적으로 렌더링 하기 위해 dangerouslySetlnnerHTML을 사용하여 서식이 적용되도록 함
그러나 스크립팅 공격으로 페이지에 악성 스크립트가 삽입될 수 있는 취약점이 있음

 해결책

DOMPurify 라이브러리를 사용해 보자!
사용자가 브라우저 상에서 자바스크립트 코드를 입력함으로써 생기게 되는 보안 문제를 해결
보안상의 문제도 신경 써야 한다는 점을 이번 기능을 구현하면서 깨닫게 됨