dangerouslySetInnerHTML

회사 업무 중 ,,,. json 파일에 무더기로 있던 텍스트들을 변수로 사용하여, 메인페이지에 내보내고 있었다.. However,.. html 태그까지 모두 string으로 나온 것 ~! 이를 방지하기 위해, 폭풍 검색.. 그래서 알아낸 이름부터 무서운 🚨 dangerouslySetInnerHTML 🚨

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

const hi = 'hello <br/> world'
const HelloWorld= () =>{
	return <div dangerouslySetInnerHTML={{__html: hi}} />
}

사이트 간 스크립팅 공격 / 크로스 사이트 스크립팅 (XXS, cross-site scripting)

• 웹 어플리케이션의 취약점 중 하나
• 관리자가 아닌 사람이 페이지에 악성 스크립트를 삽입할 수 있음 ex) 게시판에 악성 스크립트가 담긴 글을 올려 사이트 공격 가능
• 악성 스크립트를 통해 해커가 사용자의 정보(쿠키, 세션 등)을 탈취하거나 비정상적인 기능을 수행
• 주로 다른 웹사이트와 정보를 교환하는 식으로 작동하므로 사이트간 스크립팅이라고 함
• 취약점을 방지하고자 사용자의 입력 값을 검사하고 사용해야함