[React] String을 html로 파싱하기 - dangerouslySetInnerHTML

회사 자체 컴포넌트를 사용하는 중에, 툴팁으로도 표현을 해야 하고 클릭 시 팝업을 띄워야 했는데 이 때 툴팁은 html태그가 인식되어 들여쓰기가 되는 반면에 팝업에서는 html태그까지 모두 string으로 나오는 것을 보았다.

이를 해결하기 위해서 구글링을 해 본 결과, 리액트에서는 다음과 같은 방법을 사용했다.

---

dangerouslySetInnerHTML

dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다.

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

 

let memo = 'hello <br/> world!';

render(){
	return{
    	<div dangerouslySetInnerHTML={{__html : memo }}
    }
}

 

결과는 다음과 같습니다.

사이트 간 스크립팅 (크로스 사이트 스크립팅(cross-site scripting, XSS))

사이트 간 스크립팅은 웹 애플리케이션에서 많이 나타나는 취약점의 하나로 웹사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점입니다. 주로 여러 사용자가 보게 되는 전자 게시판에 악성 스크립트가 담긴 글을 올리는 형태로 이루어집니다.

이 취약점은 웹 애플리케이션이 사용자로부터 입력 받은 값을 제대로 검사하지 않고 사용할 경우 나타납니다. 이 취약점으로 해커가 사용자의 정보(쿠키, 세션 등)를 탈취하거나, 자동으로 비정상적인 기능을 수행하게 할 수 있습니다.

주로 다은 웹 사이트와 정보를 교환하는 식으로 작동하므로 사이트 간 스크립팅이라고 합니다.

 

---

참고:

https://ko.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

DOM 엘리먼트 – React

https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9D%B4%ED%8A%B8_%EA%B0%84_%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8C%85

사이트 간 스크립팅 - 위키백과, 우리 모두의 백과사전