React dangerouslySetInnerHTML, DOMPurify

1. React dangerouslySetInnerHTML란

브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다.

즉 dangerouslySetInnerHTML 태그를 사용하여 직접적으로 HTML을 삽입할 수 있습니다.

 

하지만 일반적으로 코드에서 HTML를 설정하는 것은

XSS 공격에 쉽게 노출될 수 있기 때문에 위험합니다.

 

따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해

dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다.

 

2. React dangerouslySetInnerHTML 사용법

<div dangerouslySetInnerHTML={{__html: "<h1 style=\"color: red\">예제</h1>"}}></div>

dangerouslySetInnerHTML은 위와 같이 사용될 수가 있는데,

사용자가 입력할 수 있는 HTML 태그 부분에 악의적인 스크립트가 포함된 코드를 삽입해서

사용자의 정보를 가져오는 XSS(Cross Site Scripting) 공격의 위험이 있기 때문에

가능하면 사용하지 않는 것이 좋지만

 

불가피하게 사용해야할 상황이 생긴다면

악성 HTML을 모두 제거하고 깨끗한 HTML 데이터를 반환, 즉 XSS 공격을 방지하는 

dompurify와 같은 sanitization library와 함께 사용해주는 것이 좋습니다.

 

3. Dompurify와 함께 사용

1. 설치

npm install dompurify

2. 사용법

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

function Ex() {
    const sanitizer = dompurify.sanitize;
    return (
        <div dangerouslySetInnerHTML={{__html: sanitizer("<h1 style=\"color: red\">예제</h1>")}}></div>
    )
}

export default Ex

위 코드와 같이 html 코드 앞에 dompurify.sanitize로 감싸주기만하면 됩니다.

 

 

https://ko.reactjs.org/docs/dom-elements.html

https://velog.io/@badbeoti/10%EA%B0%80%EC%A7%80-%EC%98%88%EC%A0%9C%EB%A1%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EB%8A%94-react-%EB%B3%B4%EC%95%88

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