HTMX tidak kompatibel dengan baik dengan CSP (Content Security Policy)

• HTMX adalah framework JavaScript yang memungkinkan elemen DOM diganti dengan data dinamis melalui permintaan AJAX
• Karena HTMX menambahkan perilaku dinamis ke halaman menggunakan tag HTML biasa dengan atribut kustom, sulit untuk memberikan keamanan tambahan terhadap serangan cross-site scripting (XSS)
• Secara umum, Content Security Policy (CSP) dapat digunakan untuk membatasi JavaScript yang boleh dijalankan
• Sulit untuk mengonfigurasi CSP yang tetap membuat HTMX berfungsi sambil tetap melindungi dari cross-site scripting

Memuat fragment berbahaya

• Salah satu metode injeksi pada HTMX adalah melakukan permintaan ke host berbahaya
• HTMX mengambil fragment HTML yang dapat berisi JavaScript lalu menempatkannya ke dalam halaman
• Ini dapat digunakan untuk memicu permintaan ke domain di luar domain aplikasi web dan memuat skrip berbahaya

eval yang tidak aman

• HTMX membuat dan menjalankan kode secara dinamis
• Fitur-fitur HTMX berikut melakukan hal ini: trigger filter, atribut hx-on, serta hx-vals atau hx-headers dengan prefiks js:/javascript:
• Agar fitur-fitur ini berfungsi, aplikasi harus memakai opsi CSP unsafe-eval untuk mengizinkan evaluasi kode dinamis
• Namun, jika unsafe-eval diizinkan, JavaScript dapat langsung disuntikkan melalui fitur HTMX

Menonaktifkan HTMX dengan hx-disable

• Atribut hx-disable dapat digunakan untuk menonaktifkan fitur HTMX pada sebagian halaman
• Dokumentasinya mengklaim bahwa ini dapat memberi keamanan tambahan
• Namun ini mudah dilewati: cukup tutup tag div dengan `

` lalu sisipkan payload di luar elemen yang memiliki atribut hx-disable

Nonce untuk skrip inline

• Menggunakan nonce dalam CSP adalah cara paling aman untuk mencegah injeksi skrip
• Aplikasi menghasilkan nonce acak dan menambahkannya ke semua skrip yang merupakan bagian dari aplikasi
• Skrip yang disuntikkan penyerang tidak memiliki nonce yang benar, sehingga tidak akan dijalankan
• HTMX memiliki fitur yang secara otomatis menambahkan nonce yang benar ke skrip inline yang diambil
• Ini memang praktis, tetapi sepenuhnya merusak model keamanan CSP berbasis nonce
• Dengan menambahkan nonce yang benar ke semua skrip yang ditemukan, HTMX benar-benar merusak keamanan yang disediakan nonce
• Penambahan nonce otomatis dilakukan melalui parameter htmx.config.inlineScriptNonce

Tag meta konfigurasi

• HTMX memiliki beberapa opsi konfigurasi yang dapat diatur menggunakan tag ``
• Dalam serangan XSS, konfigurasi HTMX dapat diubah dengan menyuntikkan tag `` yang sesuai
• Sebagai contoh, di atas disebutkan bahwa atribut hx-disable menonaktifkan pemrosesan HTMX
• Namun, nama atribut tersebut dapat diubah di konfigurasi
• Jika diubah dari hx-disable menjadi nama lain, fitur hx-disable dapat dinonaktifkan

Kesimpulan

• Menggunakan HTMX di sebuah situs secara signifikan memperbesar permukaan serangan dari injeksi HTML
• Risiko XSS dapat dibatasi dengan Content Security Policy, tetapi tidak mungkin memberikan keamanan terhadap injeksi sambil tetap memakai semua fitur HTMX

[galadbran]

Rasanya semestinya ada juga sanggahan terhadap tulisan ini atau pembahasan tentang cara menggunakannya dengan aman...

[xguru]

Rilis Htmx 2.0.0
htmx - alat canggih untuk HTML