-
React String형의 Html 렌더링 하기Tip 2021. 7. 28. 17:02728x90
웹 프로젝트를 하다보면 서버 단에서 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들을 지정한다면 조금 더 안전하게 사용할 수 있다.
'Tip' 카테고리의 다른 글
ESLint react/display-name 해결하기 (0) 2021.09.02 eslint, prettier 수정, 검색 후 commit하기 (0) 2021.08.27 내가 Front-End를 끝내고 체크하는 리스트 (0) 2021.08.26 ESLint dependency cycle detected import/no-cycle Error 해결하기 (0) 2021.08.18 React 사용하지 않는 종속성 제거 (0) 2021.07.23