[React] html-react-parser

dangerouslySetInnerHTML를 사용하다가 보안상의 이슈로 html-react-parser 라이브러리를 사용하게 되었다

dangerouslySetInnerHTML는 HTML 마크업을 컴포넌트에 직접 삽입할 때 사용한다

리액트는 XSS(Cross-Site Scripting) 공격을 방지하기 위해

HTML이나 JavaScript 코드가 컴포넌트에 삽입되는 것을 제한하는데

dangerouslySetInnerHTML를 사용하면 이 제한을 무시하고 직접 삽입

말그대로 dangerous 해진다

dangerouslySetInnerHTML 사용

const App = () => {
const htmlString = `<p>!! 나는 <strong>위험한</strong> 속성이다 !!</p>`;

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

export default App;

html-react-parser 사용

html-react-parser

라이브러리 install

npm install html-react-parser
npm install @types/html-react-parser

yarn add html-react-parser
yarn add @types/html-react-parser

간단한 사용법

parse() 함수를 사용하여 HTML을 동적으로 렌더링할 수 있다

import parse from 'html-react-parser';

const App = () => {
  const htmlString = `
    <div>
      <h1>!! Hello !! World !!</h1>
    </div>
  `;

  return (
    <div>
      {parse(htmlString)}
    </div>
  );
};

export default App;