- HTMX는 JavaScript 프레임워크로, AJAX 요청을 통해 동적 데이터로 DOM 요소를 대체할 수 있게 해줌
- HTMX는 사용자 정의 속성이 있는 일반 HTML 태그를 사용하여 동적 동작을 페이지에 추가하기 때문에, 크로스 사이트 스크립팅(XSS) 공격에 대한 추가 보안을 제공하기 어려움
- 일반적으로 콘텐츠 보안 정책(CSP)을 사용하면 실행되는 JavaScript를 제한할 수 있음
- HTMX가 계속 작동하면서 크로스 사이트 스크립팅으로부터 보호되는 CSP를 구성하기는 어려움
악성 Fragment 로딩
- HTMX 주입 방법 중 하나는 악성 호스트에 대한 요청을 수행하는 것
- HTMX는 JavaScript를 포함할 수 있는 HTML 프래그먼트를 검색하여 페이지에 배치함
- 웹 애플리케이션의 도메인 이외의 도메인에 대한 요청을 트리거하여 악성 스크립트를 로드하는 데 사용할 수 있음
안전하지 않은 eval
- HTMX는 동적으로 코드를 생성하고 실행함
- 다음과 같은 HTMX 기능들이 이를 수행함: 트리거 필터, hx-on 속성, js:/javascript: 접두사가 있는 hx-vals 또는 hx-headers
- 이러한 기능이 작동하려면 애플리케이션에서
unsafe-eval CSP 옵션을 사용하여 동적 코드 평가를 허용해야 함
- 그러나
unsafe-eval을 허용하면 HTMX 기능을 사용하여 JavaScript를 즉시 주입할 수 있음
hx-disable 을 사용한 HTMX 비활성화
- hx-disable 속성을 사용하여 페이지 일부에서 HTMX 기능을 비활성화할 수 있음
- 문서에서는 이를 통해 추가 보안을 제공할 수 있다고 주장함
- 하지만 이는 쉽게 우회할 수 있음:
</div>로 div 태그를 닫고 hx-disable 속성이 있는 요소 외부에 페이로드를 삽입하면 됨
인라인 스크립트에 대한 nonce
- CSP에서 nonce를 사용하는 것은 스크립트 주입을 방지하는 가장 안전한 방법
- 애플리케이션은 임의의 nonce를 생성하고 애플리케이션의 일부인 모든 스크립트에 추가함
- 공격자가 주입한 스크립트에는 올바른 nonce가 없으므로 실행되지 않음
- HTMX에는 검색한 인라인 스크립트에 올바른 nonce를 자동으로 추가하는 기능이 있음
- 이는 편리하지만 nonce가 있는 CSP의 보안 모델을 완전히 깨뜨림
- 발견되는 모든 스크립트에 올바른 nonce를 추가함으로써 HTMX는 nonce가 제공하는 보안을 완전히 손상시킴
- nonce 자동 추가는
htmx.config.inlineScriptNonce 매개변수를 통해 수행됨
설정 메타 태그
- HTMX에는
<meta> 태그를 사용하여 구성할 수 있는 여러 구성 옵션이 있음
- XSS 공격에서는 올바른
<meta> 태그를 주입하여 HTMX의 구성을 수정할 수 있음
- 예를 들어, 위에서
hx-disable 속성이 HTMX 처리를 비활성화한다고 언급했음
- 그러나 구성에서 해당 속성의 이름을 변경할 수 있음
-
hx-disable에서 다른 것으로 설정하면 hx-disable 기능을 비활성화할 수 있음
결론
- 사이트에서 HTMX를 사용하면 HTML 주입의 공격 표면이 크게 증가함
- 콘텐츠 보안 정책을 사용하여 XSS 위험을 제한할 수 있지만, 모든 HTMX 기능을 사용하면서 주입에 대한 보안을 제공하는 것은 불가능함