교차 사이트 스크립팅(Cross-site scripting, XSS)은 여전히 웹에서 가장 빈번하게 발생하는 취약점 중 하나입니다. 새롭게 표준화된 Sanitizer API는 웹 개발자가 신뢰할 수 없는 HTML을 DOM에 삽입하기 전에 정제(sanitize)할 수 있는 직관적인 방법을 제공합니다. Firefox 148은 모두에게 더 안전한 웹 환경을 제공하기 위해 이 표준화된 보안 강화 API를 최초로 탑재한 브라우저입니다. 다른 브라우저들도 곧 뒤따라 이를 지원할 것으로 예상됩니다.
XSS 취약점은 웹사이트가 의도치 않게 공격자로 하여금 사용자 생성 콘텐츠를 통해 임의의 HTML이나 자바스크립트를 주입하도록 허용할 때 발생합니다. 공격자는 이를 통해 사용자 상호작용을 감시하고 조작할 수 있으며, 해당 취약점을 악용할 수 있는 한 지속적으로 사용자 데이터를 탈취할 수 있습니다. XSS는 오랫동안 방어하기 까다로운 것으로 악명 높았으며, 거의 10년 동안 웹 취약점 상위 3개(CWE-79) 안에 줄곧 랭크되어 왔습니다.
Firefox는 2009년 콘텐츠 보안 정책(Content-Security-Policy, CSP) 표준화를 주도한 것을 시작으로 초기부터 XSS 문제 해결에 깊이 관여해 왔습니다. CSP는 브라우저가 로드하고 실행할 수 있는 리소스(스크립트, 스타일, 이미지 등)를 웹사이트가 제한할 수 있도록 하여 XSS에 대한 강력한 방어선을 제공합니다. 그러나 지속적인 개선과 관리에도 불구하고, 웹사이트 구조를 대대적으로 변경해야 하고 보안 전문가의 꾸준한 검토가 요구되었기 때문에 CSP는 광범위한 웹 생태계를 모두 보호할 만큼 충분히 채택되지는 못했습니다.
Sanitizer API는 악의적인 HTML을 무해한 HTML로 변환하는, 즉 정제하는 표준화된 방법을 제공하여 이러한 간극을 메우도록 설계되었습니다. setHTML() 메서드는 HTML을 삽입하는 과정에 정제 단계를 직접 통합하여 기본적으로 안전(safety by default)을 보장합니다. 다음은 간단하지만 안전하지 않은 형태의 HTML을 정제하는 예시입니다.
document.body.setHTML(`<h1>Hello my name is <img src="x">`);이 정제 과정은 HTML <h1> 요소를 유지하면서, 내부의 <img> 요소와 그 onclick 속성을 제거합니다. 이를 통해 XSS 공격 요소를 차단하고 결과적으로 다음과 같이 안전한 HTML만 남게 됩니다.
<h1>Hello my name is</h1>개발자는 보안에 취약한 innerHTML 할당을 setHTML()로 교체함으로써, 최소한의 코드 변경만으로 더 강력한 XSS 방어 기능을 적용할 수 있습니다. 만약 특정 상황에서 setHTML()의 기본 설정이 너무 엄격하거나 조건에 맞지 않는다면, 개발자는 유지하거나 제거할 HTML 요소와 속성을 정의하는 커스텀 설정을 지정할 수 있습니다. 운영 중인 웹 페이지에 도입하기 전에 Sanitizer API를 미리 실험해 보고 싶다면, Sanitizer API 플레이그라운드를 활용해 보는 것을 권장합니다.
더욱 견고한 보호를 원한다면, HTML 파싱과 삽입에 대한 통제를 중앙 집중화하는 Trusted Types와 Sanitizer API를 결합할 수 있습니다. 일단 setHTML()을 도입하고 나면, 사이트에서는 복잡한 커스텀 정책이 없어도 더 쉽게 Trusted Types 강제 적용을 활성화할 수 있습니다. 엄격한 정책을 통해 지정된 setHTML()의 사용은 허용하면서 그 외에 안전하지 않은 HTML 삽입 방식은 전면 차단함으로써 향후 XSS가 재발하는 것을 막을 수 있습니다.
이처럼 Sanitizer API는 기존 코드에 사용된 innerHTML을 setHTML()로 손쉽게 교체할 수 있게 해 주며, 웹에서 XSS 공격으로부터 사용자를 보호할 수 있는 안전하고 새로운 기본 방식을 제시합니다. Firefox 148은 Sanitizer API뿐만 아니라 Trusted Types도 함께 지원함으로써 사용자에게 한결 더 안전한 웹 환경을 제공합니다. 이제 모든 개발자는 이러한 표준을 채택함으로써, 전담 보안 팀을 구성하거나 복잡한 구현 변경을 거치지 않아도 효과적으로 XSS를 예방할 수 있게 됩니다.
위 삽화에 대한 이미지 출처: Website, by Desi Ratna; Person, by Made by Made; Hacker by Andy Horvath.
🚀 한국어로 된 프런트엔드 아티클을 빠르게 받아보고 싶다면 Korean FE Article(https://kofearticle.substack.com/)을 구독해주세요!
