DangerouslySetInnerHTML, 알아야 할 3가지

React 개발자라면 누구나 한 번쯤 부딪히는 dangerouslySetInnerHTML. 이 강력한 도구는 HTML 코드를 직접 삽입하여 다양한 기능을 구현할 수 있지만, 동시에 심각한 보안 위험을 초래할 수 있습니다. 마치 칼날처럼, 잘 다루면 유용하지만 조심하지 않으면 큰 상처를 입을 수 있는 도구입니다.

DangerouslySetInnerHTML, 알아야 할 3가지

DangerouslySetInnerHTML?

dangerouslySetInnerHTML은 React에서 HTML 코드를 직접 삽입하는 특별한 속성입니다. 이 속성을 사용하면 다양한 기능을 구현할 수 있지만, 동시에 심각한 보안 위험을 초래할 수 있습니다.

왜 사용할까요?

1. 동적 HTML 콘텐츠 삽입: API 응답, 사용자 입력 또는 서버 측 렌더링 결과와 같이 동적으로 변하는 HTML 콘텐츠를 삽입할 때 유용합니다.
2. 편리한 솔루션: 특정 라이브러리 또는 컴포넌트가 HTML 문자열을 직접 요구할 경우 편리한 해결책을 제공합니다.
3. 고급 기능 구현: 텍스트 편집기, 댓글 시스템, 차트와 같은 고급 기능을 구현할 때 사용할 수 있습니다.

주의해야할 사항

1. XSS 공격 취약성

• 악의적인 사용자가 스크립트 코드를 삽입하여 사용자 정보를 탈취하거나 웹사이트를 손상시킬 수 있습니다.
• 사용 전 반드시 데이터 검증: 사용자 입력 또는 외부 데이터를 사용하기 전에 엄격한 검증 및 정제 과정을 거쳐 XSS 공격 코드를 제거해야 합니다.
• 라이브러리 검증: 사용하는 라이브러리가 XSS 공격 방지 기능을 제공하는지 확인해야 합니다.

2. 성능 저하

• 직접 DOM을 조작하기 때문에 React의 가상 DOM과 렌더링 프로세스를 방해하여 성능 저하를 초래할 수 있습니다.
• 최후의 수단으로 사용: 다른 안전한 방법이 없는 경우에만 최후의 수단으로 사용해야 합니다.

3. 기타 주의 사항

• __html 속성 사용: dangerouslySetInnerHTML 속성은 객체 형태로 사용해야 하며, 객체 내부에는 __html이라는 키에 HTML 문자열을 값으로 설정해야 합니다.
• 라이브러리 버전 확인: 사용하는 라이브러리가 최신 버전인지 확인하고, XSS 공격 취약점 패치가 적용되었는지 확인해야 합니다.
• 보안 전문가 검토: 중요한 프로젝트에서 사용할 경우 보안 전문가에게 코드를 검토받는 것이 좋습니다.

대안

• React 컴포넌트 사용: HTML 코드를 컴포넌트로 분리하여 관리하면 XSS 공격 위험을 줄일 수 있습니다.
• dangerouslySetInnerHTML 대체 라이브러리 사용: XSS 공격 방지 기능을 제공하는 sanitize-html, DOMPurify 과 같은 라이브러리를 사용할 수 있습니다.

결론

dangerouslySetInnerHTML은 강력한 도구이지만, 동시에 위험한 도구입니다. 사용하기 전에 위험성을 충분히 이해하고, 안전하게 사용하기 위한 방법을 숙지해야 합니다. 칼날처럼, 현명하게 사용하여 웹 개발의 든든한 동반자가 되도록 하세요.