dangerouslySetInnerHTML(XSS 보안 이슈)

reactquill을 커스텀해서 사용하면서 이미지 첨부를 해야했다.

지금까지의 프로젝트에서는 프론트에서 직접 a3계정을 만들어서 첨부하는 과정으로 이미지 업로드를 진행했었는데 이번에는 이미지 업로드 api를 전달받아서 업로드를 하는 방식으로 진행하게 됐다.
이 과정에서 이미지와 함께 문자열을 출력하면 html tag와 함께 출력이 되어 dangerouslySetInnerHTML에 대해서 찾아보게 되었다

dangerouslySetInnerHTML

dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 react의 속성 중의 하나로
컴포넌트의 내부 HTML 콘텐츠를 직접 설정하거나 랜더링하는데에 사용된다.

리엑트에서는 보통 jsx문법을 사용하여 컴포넌트의 렌더링을 정의하는데 원시 HTML을 렌더링 해야할 때가 종종 생기고 그 때 dangerouslySetInnerHTML을 사용할 수 있는 것 이다.

const data = useRef();

console.log(data)
...
	return(
		<div
       		dangerouslySetInnerHTML={{
			__html: data,
            }}
		/>
      )

코드가 많이 길어 생략된 부분이 많지만
위와 같이 dangerouslySetInnerHTML에 useRef를 이용해 받아온 값(data)을 보내주는 방식으로 코드를 작성했다.
dangerousSetInnerHTML은 __html 키에 매칭된 객체를 반환한다.

받아온 값에 콘솔을 띄우면 html태그와 함께 문자열이 출력되게 되고,
dangerouslySetInnerHTML을 거쳐 실제 화면에서는 문구를 태그 없이 문자열만 출력할 수 있게 된다.

XSS 보안 이슈

하지만 dangerouslySetInnerHTML은 XSS 보안에 취약하다는 단점을 가지고 있다.
렌더링 할 때 데이터가 안전한 html이라는 것을 확신할 수 있는 경우에 사용해야 하고 사용자 입력이나 외부 데이터를 그대로 전달하면 보안 취약점을 만들 수 있다.

XSS_사이트간 스크립팅 공격과 크로스 사이트 스크립팅(cross-site scripting) 

XSS 공격은 공격자에 의해 작성된 스크립트가 다른 사용자에게 전달되는 기법이다.
이 때 사용자의 정보가 노출되거나, 웹 사이트가 변조 될 수 있다.

그렇기 때문에 dangerouslySetInnerHTML을 이용할 땐 주의해야 하며, 데이터를 검증하는 과정을 함께 해야겠다는 것을 다시 한 번 정리 할 수 있었다.