SVG 보안 이슈와 클릭재킹(Clickjacking): XSS 취약점과 악성 코드 차단 수칙

SVG는 단순한 이미지 포맷이 아닌 자바스크립트 스크립팅과 하이퍼링크가 가능한 하나의 독립된 'XML 문서'입니다. 이 사실을 모르는 채 유저로부터 SVG 파일 업로드를 허용하거나 필터링 없이 렌더링하면 사이트 전체 권한이 탈취되는 XSS(크로스 사이트 스크립팅)나 클릭재킹(Clickjacking)의 치명적인 제로데이 폭탄을 안게 됩니다. SVG 파일의 주요 보안 구멍과 수칙을 진단합니다.

1. SVG를 통한 XSS(Cross-Site Scripting)의 작동 원리

보안 침투 스크립트가 숨겨진 SVG 예시입니다.

<svg xmlns="http://www.w3.org/2000/svg">
  <!-- 이미지 내부 스크립트가 실행되어 쿠키 및 세션 정보 탈취 가능 -->
  <script>
    alert(document.cookie);
  </script>
  <rect width="100" height="100" fill="blue" />
</svg>

브라우저가 이 SVG 파일을 단순한 이미지 뷰어로 열지 않고 웹서버에서 직접 서빙해 버리면, 내장된 `<script>` 태그가 동작해 세션 탈취나 악성 행위를 자행합니다.

2. 투명 유리를 입힌 클릭재킹(Clickjacking) 위협

악성 해커들은 투명하게 조작된 고성능 SVG 오버레이 링크 패널을 일반 버튼 위에 덮어씌워 유저들이 결제 버튼이나 설정 변경 버튼을 클릭한 순간 다른 유료 결제 링크나 구독 링크로 납치하는 사기 전술(Clickjacking)을 구사합니다.

"웹 사이트 보안의 관점에서 업로드된 모든 SVG는 검증되지 않은 실행 파일과 동일하게 취급해야 안전합니다."

3. SVG 보안 사고를 예방하는 3대 보안 수칙

<img> 태그 바인딩 활용: 인라인 삽입 대신 `<img src="unsafe.svg">` 형태로 이미지 노드를 불러오면 브라우저가 스크립트의 작동 및 하이퍼링크 동작을 원천적으로 차단합니다.
DOMPurify 라이브러리 연동: 인라인 SVG 사용 시 서버/클라이언트 단에서 스크립트 태그와 이벤트 핸들러(onclick 등)를 완전 거세하는 새니타이저(Sanitizer) 엔진 구축.
CSP(콘텐츠 보안 정책) 설정: HTTP 헤더에 `Content-Security-Policy` 정책을 설정해 자바스크립트 임의 실행을 지휘 통제합니다.

4. 요약: 안전하게 벡터 그래픽을 소유하라

뛰어난 그래픽 표현 뒤에 숨은 XML 스크립팅 위협 경로를 선제적으로 모니터링하고 차단하여 해킹 위협 없는 안전한 웹 서비스를 구축해 보십시오.