[React] 리액트 innerHtml 표시하기 (dangerouslySetInnerHTML)사용 주의점 및 보안 방법

Intro 

안녕하세요. 리액트에서 innerHtml을 표시하는 방법에 대해 알아보겠습니다. 최근에 스마트에디터 관련한 작업을 진행하고 있었습니다. 에디터에 저장된 내용이 그대로 html tag로 저장되고, 저장된 html tag를 그대로 화면에 표시해야 했죠. 저장된 이 innerHtml를 어떻게 표시해야 할까요? 함께 알아봅시다 :)

 

How to solve the problem

React에서 innerHtml를 표시하는 위해서는 아래 코드와 같이 dangerouslySetInnerHTML를 활용할 수 있습니다. 

import React from 'react';

function MyComponent() {
  const sampleHtml = '<p>Hello world! </p>';

  return (
    <div dangerouslySetInnerHTML={{ __html: sampleHtml }} />
  );
}

 

여기서 dangerouslySetInnerHTML의 prop 값으로 html 값을 전달하고 있고, 이는 __html이라는 속성을 갖고 있습니다. __html 속성은 리액트에서 허용하지 않는 HTML 문자열을 포함할 수 있다고 합니다. 

 

• script tag
• on 접두사를 가진 이벤트 핸들러 (ex. onclick, onload)
• javascript URL (ex. href 속성, src 속성)
• style 속성 
• form 태그 

 

주의점

보안 문제 때문에 신중하게 사용해야 합니다. 사용자가 입력한 내용을 렌더링해야 하는 경우, 사용자가 악성 스크립트를 삽입하는 등의 보안 문제가 발생할 수 있습니다. 이런 경우에는 입력 값의 보안 검사를 통해 이러한 문제를 예방해야 합니다.

 

보안 검사 방법

보안검사 방법에는 여러 방법이 있을 수 있는데요, 리액트에서는 DOMPurify와 같은 라이브러리를 사용하여 입력 값의 보안 검사를 실행할 수 있습니다. 아래는 예시 코드입니다. 

import React from 'react';
import DOMPurify from 'dompurify';

function MyComponent({ htmlContent }) {
  const sanitizedHtml = DOMPurify.sanitize(htmlContent);

  return (
    <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />
  );
}