dangerouslySetInnerHTML

걸음걸음·2023년 7월 8일
0

React

목록 보기
9/9

svg 확장자는 지금까지 로컬에 파일을 두고 import 하는 방법으로만 사용해왔어서, json 형식으로 파일을 받는 경우 어떻게 다루어야 할지 막막해졌다.
한참 방법을 찾아보다가 발견한 방법이 'dangerouslySetInnerHTML'

dangerouslySetInnerHTML

브라우저 DOM 에서 innerHTML을 사용하기 위한 React의 대체 방법
해당 태그를 사용하여 직접적으로 HTML 삽입 가능

__html 키로 객체를 전달하여 사용

<button dangerouslySetInnerHTML={{ __html: item }} key="" />
  • 단 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출됨
    => 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성
    가능하면 사용하지 않는 것이 좋고, 불가피하게 사용해야 한다면 XSS 공격을 방지하는 방법이 필요(ex. dompurify 등 sanitization library)
profile
꾸준히 나아가는 개발자입니다.

0개의 댓글