dangerouslySetInnerHTML

개요

---

Next.js를 이용하여 상품설명을 랜더링 하는중 <p>...</p> 이런 태그가 감싸져 있고 이를 랜더링 하려 하니 태그도 같이 랜더링 하는 경우가 발생하여 정리해본다

dangerouslySetInnerHTML

검색하며 찾아보니 dangerouslySetInnerHTML을 사용해서 javascript의 innerHTML 처럼 사용할 수 있는것을 확인했다.
innerHTML은 string을 HTML으로 만들어서 랜더링해준다. 하지만 이는 xss 공격에 취약하다고 설명이 되어있었다.

XSS(Cross Site Scripting)란
사이트 간 스트립팅이라는 이름의 웹 취약점으로써, 웹 사이트의 관리자가 아닌 악의적인 사용자가 악성 스크립트를 사입하여 의도하지 않은 명령을 실행시키거나 세션을 탈취하는 취약점

따라서 이를 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html 으로 키를 전달했다.

<div>
{
 productData?.description &&
  <div dangerouslySetInnerHTML={{ __html 	:productData.description}}></div>
}

</div>

결론

---

음,, DOMPurify이런 라이브러리를 통해 방지할 수 있다는데 한번 라이브러리를 사용한뒤에 포스팅을 해야겠다! 고려해야할점이 많구나!