[ReactJS] dangerouslySetInnerHTML가 뭘까?

Next.js 환경에서 개발을 시작한 지 꽤 지났지만 최근까지도 나는 dangerouslySetInnerHTML 이게 innerHTML을 XSS로부터 보호해 주는 내장된 innerHTML이라고 생각했었다. 

충격적이게도 innerHTML이랑 전혀 다를 게 없었다. 공식문서 내용을 가져와보자.

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다.

출처 : DOM 엘리먼트 - React

 

그저 "위험하다는 것을 상기"시키기 위해 dangerouslySetInnerHTML라고 명시되어있었던 것뿐 XSS를 보호해 주던 건 아니었다.

보안조치

dangerouslySetInnerHTML를 사용하려면 보안 조치를 하고나서 사용하는 게 좋다.

오래된 이슈이기도 해서 그런지 다양한 방안들이 존재한다.

1. dompurify
   : 생각보다 굉장히 많이 사용되는 라이브러리이며 최근까지도 업데이트가 진행되는 듯하다.
2. sanitize-html
   : 1번에 비해서는 사용량이 떨어지지만 그래도 많이 사용되는 라이브러리이다.
3. HTML Sanitizer API
   : 라이브러리가 아닌 내장되어 있는 api인데, 아쉽게도 모든 브라우저에서 사용이 가능한 건 아니다.
   그냥 이런 게 있구나 정도로만 알고 추후에 모든 브라우저에서 사용이 가능하게 되는 순간에 활용해 보면 좋을 듯하다.

---

참고 : https://wormwlrm.github.io/2021/11/21/Sanitizer-API.html

Sanitizer API를 이용해 안전하게 DOM 조작하기 - 재그지그의 개발 블로그