5분 만에 만든 눈송이 효과, XSS 시한폭탄으로 변질될 수 있다!
by DD
5개월 전
조회수 13
단순 UI 효과를 위해 복사한 코드가 XSS 취약점을 유발할 수 있음을 경고함
innerHTML 사용 시, 외부 설정값으로 인해 악성 스크립트가 주입될 수 있음
React/Angular와 같은 프레임워크도 innerHTML 사용 시 XSS로부터 안전하지 않음
innerHTML의 위험성
innerHTML은 HTML 문자열을 직접 DOM에 삽입하므로, 외부 입력값에 취약하다. 구체적으로, XSS 공격은 악성 스크립트를 주입하여 사용자 정보를 탈취하거나, 웹사이트를 변조할 수 있다. 따라서 textContent를 사용하거나, DOMPurify와 같은 라이브러리를 통해 HTML sanitization을 수행해야 한다.
프레임워크와 XSS 방어
React, Angular와 같은 프레임워크는 기본적으로 XSS 공격을 방어하지만, innerHTML 사용 시에는 예외이다. dangerouslySetInnerHTML 또는 [innerHTML] 속성은 프레임워크의 보호 기능을 우회한다. 반면, Content Security Policy(CSP)는 XSS 공격의 피해를 줄이는 데 도움이 되지만, 근본적인 해결책은 아니다.
안전한 코딩 습관
작은 UI 기능이라도 코드 리뷰와 보안 테스트를 반드시 수행해야 한다. 구체적으로, 외부 데이터를 innerHTML에 직접 삽입하는 것을 피하고, textContent를 사용한다. 따라서, DOMPurify와 같은 라이브러리를 활용하여 HTML sanitization을 적용하고, 보안 경계를 명확히 정의하는 것이 중요하다.
