내가 원래 알고 있던 방법은 자바스크립트의 DOM API를 이용해서 innerHTML에 직접 html을 할당하는 방법이다.
const nodeH1 = document.querySelector('h1');
const highlightSpan = 'Hello <span color="red">World</span>';
nodeH1.innerHTML = highlightSpan;
리액트에서는 태그의 속성으로 dangerouslySetInnerHTML를 추가하여 string 형태의 마크업을 렌더링할 수 있다.
const highlightSpan = 'Hello <span color="red">World</span>';
return <h1 dangerouslySetInnerHTML={highlightSpan} />;
이렇게 마크업을 그대로 코드에 삽입하는 방식은 사이트의 공격 경로가 되어 보안 취약점이 된다는 단점이 있다.
그러므로 서버로부터 받아오거나, 자체적인 파서를 거쳐 안전하다고 검증된 결과만 사용하도록 해야 한다.
onError 같은 이벤트 속성을 이용하는 방식 등을 이용해서 XSS (Cross-Site Scripting) 공격을 받을 수 있다.