HTMXはCSP（Content Security Policy）と相性が良くない

• HTMXはJavaScriptフレームワークで、AJAXリクエストを通じて動的データでDOM要素を置き換えられるようにする
• HTMXはカスタム属性を持つ通常のHTMLタグを使ってページに動的な動作を追加するため、クロスサイトスクリプティング（XSS）攻撃に対する追加のセキュリティを提供するのが難しい
• 一般に、コンテンツセキュリティポリシー（CSP）を使うと実行されるJavaScriptを制限できる
• HTMXを動作させ続けながら、クロスサイトスクリプティングから保護するCSPを構成するのは難しい

悪意のあるフラグメントの読み込み

• HTMXの注入方法の1つは、悪意のあるホストへのリクエストを実行すること
• HTMXは、JavaScriptを含められるHTMLフラグメントを取得してページに配置する
• Webアプリケーションのドメイン以外のドメインへのリクエストをトリガーし、悪意のあるスクリプトを読み込むために利用できる

安全でない 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タグを閉じ、hx-disable属性を持つ要素の外側にペイロードを挿入すればよい

インラインスクリプトに対する nonce

• CSPでnonceを使うことは、スクリプト注入を防ぐ最も安全な方法
• アプリケーションはランダムなnonceを生成し、アプリケーションの一部であるすべてのスクリプトに追加する
• 攻撃者が注入したスクリプトは正しいnonceを持たないため実行されない
• HTMXには、取得したインラインスクリプトに正しいnonceを自動追加する機能がある
• これは便利だが、nonceを使ったCSPのセキュリティモデルを完全に壊してしまう
• 見つかったすべてのスクリプトに正しいnonceを追加することで、HTMXはnonceが提供するセキュリティを完全に損なう
• nonceの自動追加は htmx.config.inlineScriptNonce パラメータを通じて行われる

設定用メタタグ

• HTMXには、`` タグを使って構成できる複数の設定オプションがある
• XSS攻撃では、適切な `` タグを注入してHTMXの設定を変更できる
• たとえば、上で hx-disable 属性がHTMX処理を無効化すると述べた
• しかし、設定でその属性名を変更できる
• hx-disable を別のものに設定すると、hx-disable 機能を無効化できる

結論

• サイトでHTMXを使うと、HTML注入の攻撃対象領域が大幅に増える
• コンテンツセキュリティポリシーを使ってXSSリスクを制限することはできるが、HTMXのすべての機能を使いながら注入に対するセキュリティを提供することは不可能である

[galadbran]

この記事に対する反論や、安全に使う方法についての話があってもよさそうなものですが……

[xguru]

Htmx 2.0.0 リリース
htmx - high power tools for HTML