React String형의 Html 렌더링 하기

웹 프로젝트를 하다보면 서버 단에서 html 태그를 문자로 받아 띄어줘야 되는 경우가 있다.

 

이 경우 주로 사용하는 방법은 dangerouslySetInnerHTML을 이용하는 방법이 있다.

const Test = () => {
  const tagCodes = "<strong>Test Code</strong>"
  
  return <div dangerouslySetInnerHTML={{__html:tagCodes}} />
}

이 방법은 충분히 간편하지만 사용자가 등록할 수 있는 장소에서는 cross-site scripting(XSS) 공격에 매우 취약하기에 라이브러리를 사용해 조금이나마 안전한 방법으로 사용할 것을 권한다.

npm install sanitize-html

import sanitizeHtml from 'sanitize-html';

const Test = () => {
  const tagCodes = "<strong>Test Code</strong>"
  const cleanCode = sanitizeHtml(tagCodes);
  
  return <div dangerouslySetInnerHTML={{__html:cleanCode}} />
}

아래와 같이 사용하면 되고 sanitize-html의 두번째 인자로는 옵션들을 적용할 수 있으니 허용할 tag들이나 허용하지 않을 tag들을 지정한다면 조금 더 안전하게 사용할 수 있다.