React Quill로 입력한 내용은 HTML 형식이기 때문에 그대로 출력할 경우, 태그까지 함께 출력된다. 이를 해결하기 위해서 dangerouslySetInnerHTML를 사용한다.
dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법이다. 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 한다.
dangerouslySetInnerHTML를 사용하는 예시는 다음과 같다.
function createMarkup() {
return {__html: 'First · Second'};
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}위에서 언급했듯이 dangerouslySetInnerHTML를 사용하면 XSS 공격에 노출될 수 있어서 이를 방지해주어야 한다. Dompurify는 웹 개발에서 Cross-Site Scripting(XSS) 공격을 방지하기 위해 사용하는 라이브러리로 사용자가 제공한 HTML 또는 SVG 콘텐츠를 클라이언트 측에서 안전하게 정리(sanitize)하여 브라우저에서 악의적인 스크립트를 실행하지 못하도록 합니다.
아래 명령어를 이용해 설치해준다.
npm i dompurify아래 코드를 통해 안전하게 HTML을 렌더링할 수 있다. JSON.parse를 이용하는 이유는 HTML 내용을 서버에 전달할 때 string으로 변환해주기 때문이다. string으로 변환하지 않았다면, 해당 부분은 생략하면 된다.
import DOMPurify from 'dompurify';
const cleanHtml = DOMPurify.sanitize(JSON.parse(post.content));<p
className="inline-block min-h-[320px] mt-[24px] mb-[60px]"
dangerouslySetInnerHTML={{ __html: cleanHtml }}
\/>
Frontend🍓