SVG, 안전하게 사용하려면? CSP와 샌드박스 기술의 중요성!

본문에서는 Scratch 프로젝트를 예시로, SVG(Scalable Vector Graphics)의 보안 취약점(Security Vulnerabilities) 문제를 다룬다. 특히, 사용자 입력 기반의 SVG를 처리하는 과정에서 XSS(Cross-Site Scripting) 공격에 노출될 수 있음을 지적한다. CSS nesting relaxed syntax와 같이 기존에 알려지지 않은 공격 벡터가 지속적으로 발견되면서, SVG sanitization의 어려움이 부각된다.

논의에서는 CSP(Content Security Policy)를 통해 HTTP 요청을 제어하고, iframe을 활용하여 SVG를 샌드박싱하는 방식을 제시한다. CSP는 특정 출처에서만 리소스를 로드하도록 제한하여 HTTP leak 문제를 해결하고, iframe은 SVG가 메인 문서에 영향을 미치는 것을 방지한다. 이러한 접근 방식은 브라우저의 내장된 보안 기능을 활용하여 안전성을 확보하는 데 중점을 둔다.

일부 댓글에서는 HTML Sanitizer API를 사용하여 SVG를 안전하게 처리하는 방법을 언급하지만, CSS 스타일(Style)에 대한 제어가 어렵다는 한계를 지적한다. 특히, CSS를 통한 공격은 API의 기본 설정으로는 방어하기 어렵다. 따라서, CSS 관련 취약점을 해결하기 위해서는 보다 정교한 sanitization 로직이 필요하다는 점을 강조한다.

커뮤니티에서는 SVG의 복잡성으로 인해 안전한 사용이 어렵다는 점을 지적하며, 새로운 이미지 형식(Image Format)의 필요성을 제기한다. 특히, 폰트 임베딩, 텍스트 래핑, 애니메이션 지원 등 기본적인 기능을 갖추면서도 보안에 강한 새로운 형식을 제안한다. 이는 SVG의 모든 기능을 필요로 하지 않는 경우, 보다 안전하고 단순한 대안을 모색할 필요가 있음을 시사한다.