# HTMX는 CSP(Content Security Policy)와 잘 호환되지 않음

> Clean Markdown view of GeekNews topic #15695. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=15695](https://news.hada.io/topic?id=15695)
- GeekNews Markdown: [https://news.hada.io/topic/15695.md](https://news.hada.io/topic/15695.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2024-07-05T10:31:02+09:00
- Updated: 2024-07-05T10:31:02+09:00
- Original source: [sjoerdlangkemper.nl](https://www.sjoerdlangkemper.nl/2024/06/26/htmx-content-security-policy/)
- Points: 7
- Comments: 2

## Summary

HTMX는 동적 데이터 처리를 위해 JavaScript를 사용하는 프레임워크로, XSS 공격에 취약하여 CSP와의 호환이 어렵습니다. HTMX는 악성 스크립트를 로드하거나 `unsafe-eval`을 사용하여 동적 코드를 실행할 수 있어 보안 위험이 큽니다. CSP의 nonce 기능을 자동으로 추가하는 HTMX의 기능은 보안을 손상시킬 수 있으며, HTMX 사용 시 HTML 주입 공격 표면이 크게 증가합니다.

## Topic Body

- 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 기능을 사용하면서 주입에 대한 보안을 제공하는 것은 불가능함

## Comments



### Comment 27015

- Author: galadbran
- Created: 2024-07-06T11:49:38+09:00
- Points: 1

이 글에 대한 반론이나 안전한 사용 방법에 대한 얘기가 있을 법도 한데 말이지요...

### Comment 26978

- Author: xguru
- Created: 2024-07-05T10:32:02+09:00
- Points: 1

[Htmx 2.0.0 릴리즈](https://news.hada.io/topic?id=15401)  
[htmx - high power tools for HTML](https://news.hada.io/topic?id=2171)