TIL : dangerouslySetInnerHTML, DOMPurify

실전 프로젝트 첫째 주, 와이어 프레임 피드백을 받으면서 튜터님이 HTML 데이터를 받아와 그대로 코드에 삽입하려면 보안 문제 때문에 "ㅇㅇ" 처리를 해야 한다고 하셨는데, 그게 뭔지 몰라서 한참 구글링을 하다가 아~모르겠다 하고 잊고 있었다. 그리고 한 3주가 지난 오늘 어쩌다가 블로그 글을 읽는데, dangerouslySetInnerHTML과 보안 문제에 대한 것이었다.

게시글 상세조회페이지를 만들 때, HTML을 코드에 삽입하려면 dangerouselySetInnerHTML을 코드에 삽입하고 __html 키로 객체를 전달하면 된다는 것 까지는 알아내서 상세 게시글 조회까지 했는데, 이 키워드로 검색을 해 볼 생각은 그때 못했다. 오늘 어쩌다 발견해서 얼른 적어놓는다.

React dangerouslySetInnerHTML이라는 것은 브라우저 DOM (Document of Model)에서 innerHTML을 사용하기 위한 React의 대체 방법이다. 이 태그로 HTML을 직접적으로 코드에 삽입할 수 있다는 것이다. 그런데 이것은 XSS 공격에 쉽게 노출이 될 수 있어서 위험하다고 한다.

XSS공격은 크로스 사이트 스크립팅, 즉 공격자가 상대방의 브라우저에 스크립트가 실행되도록 해 사용자의 세션을 가로채거나, 웹사이트를 변조하거나, 악의적 콘텐츠를 삽입, 피싱 공격을 하는 것이라고 한다.

<div dangerouslySetInnerHTML={{ __html: detail.content }}></div>

이렇게 객체를 넣어주기만 하면 사용자가 에디터에 입력한 본문이 나온다. 되도록이면 사용하지 않는 것이 좋다고 하나, 불가피하게 사용하게 되면 악성 HTML을 제거하고 깨끗한 HTML을 반환하는 (XSS 공격을 방지하는) dompurify와 같은 sanitization library와 함께 사용해 줄 수 있다고 한다.

Dompurify 와 함께 사용하기!

1. yarn add dompurify : dompurify 를 설치한다.
2. 사용하기

import React from "react";
import dompurify from "dompurify";

function Example() {
	const sanitizer = dompurify.sanitize;
    return (
    	<div dangerouslySetInnerHTML={{__html: sanitizer(detail.content)}}
    )
}

export default Example;

근데 이게 정말 잘 작동하는지 의구심이 들어서 구글링을 더 해 보았는데 많은 분들이 쓰고있는 걸 보니 안심해도 될 것 같음...
튜터님이 말씀하신 ㅇㅇ처리가 두글자라고하셨는데 한국말로 하면 뭐였을까



Reference
https://www.npmjs.com/package/dompurify

dompurify

https://record22.tistory.com/100

React dangerouslySetInnerHTML, DOMPurify