XSS di React: dangerouslySetInnerHTML dan Skrip Pihak Ketiga

React secara otomatis melakukan escape terhadap semua nilai yang dirender melalui JSX sebelum memasukkannya ke dalam DOM. Saat Anda menulis {userInput} dalam JSX, React memanggil operasi yang setara dengan penetapan textContent — nilai tersebut diperlakukan sebagai teks, bukan HTML. Secara bawaan, hal ini mencegah sebagian besar serangan XSS pada aplikasi React.

dangerouslySetInnerHTML={{ __html: htmlString }} adalah jalur keluar React yang melewati escape otomatis. Namanya sengaja terdengar mengkhawatirkan: nama tersebut memperingatkan bahwa Anda bertanggung jawab atas keamanan string HTML. React menetapkan innerHTML secara langsung, sehingga menjalankan HTML apa pun, termasuk skrip dan pengendali peristiwa.

Anda benar-benar memerlukan dangerouslySetInnerHTML saat merender HTML yang berasal dari penyunting teks kaya (seperti TipTap atau Quill), CMS yang menyimpan HTML, atau pengonversi Markdown ke HTML. Sumber-sumber ini menghasilkan markup HTML sungguhan yang harus dirender sebagai HTML, bukan sebagai teks yang di-escape.

Jika string HTML berisi <script>stealCookies()</script> atau <img src=x onerror="stealData()">, menetapkannya sebagai innerHTML akan menjalankan kode penyerang. Konten yang diberikan pengguna dan langsung diteruskan ke dangerouslySetInnerHTML tanpa sanitasi merupakan kerentanan XSS kritis.

DOMPurify adalah pembersih HTML standar industri untuk peramban. DOMPurify mengurai string HTML dalam konteks terisolasi, menghapus elemen dan atribut berbahaya (tag skrip, pengendali peristiwa, URL javascript:), lalu mengembalikan string HTML yang aman. Penggunaan: DOMPurify.sanitize(dirtyHtml) sebelum meneruskannya ke dangerouslySetInnerHTML.

Skrip pihak ketiga (analitik, widget obrolan, jaringan iklan) berjalan dengan izin yang sama seperti JavaScript aplikasi Anda. Skrip pihak ketiga yang disusupi atau berbahaya dapat membaca document.cookie, mengakses localStorage, membaca masukan formulir, dan mengirim permintaan ke server eksternal — semuanya tanpa tanda apa pun bagi pengguna.

Kebijakan Keamanan Konten adalah header HTTP yang menyatakan skrip mana yang diizinkan untuk dijalankan. Bahkan jika muatan XSS disuntikkan ke dalam DOM, CSP yang dikonfigurasi dengan benar dapat memblokir eksekusinya dengan membatasi skrip sebaris dan hanya mengizinkan sumber skrip yang masuk daftar izin. CSP adalah lapisan pertahanan kedua setelah sanitasi masukan.

Paket npm merupakan vektor serangan XSS yang nyata. Sebuah dependensi dapat menyertakan kode berbahaya yang mengirimkan variabel lingkungan atau data pengguna ke luar. Insiden node-ipc pada 2022 dan penyusupan ua-parser-js pada 2021 menunjukkan bahwa paket yang digunakan secara luas dapat diambil alih dan disusupi kode berbahaya. Audit dependensi dengan npm audit dan gunakan berkas pengunci.

Serangan XSS yang berhasil memungkinkan penyerang mencuri token JWT pengguna dari sessionStorage (mengirimkannya ke server yang dikendalikan penyerang), melakukan tindakan sebagai pengguna yang telah terautentikasi (panggilan API menggunakan sesi pengguna), mengubah DOM untuk menampilkan konten phishing, atau mencatat setiap penekanan tombol yang dilakukan pengguna dalam aplikasi.

API peramban Trusted Types mengharuskan semua titik tujuan DOM (innerHTML, eval, script.src) menerima objek bertipe khusus, bukan string mentah. Hal ini mencegah muatan XSS berbasis string mencapai DOM pada tingkat platform. React sedang mengupayakan kompatibilitas dengan Trusted Types, dan CSP dapat memberlakukannya.

Pola aman untuk merender HTML dari CMS adalah: ambil HTML, teruskan melalui DOMPurify.sanitize() dengan daftar izin tag dan atribut yang aman, lalu render menggunakan dangerouslySetInnerHTML={{ __html: cleanHtml }}. Jangan pernah melewati langkah sanitasi, meskipun Anda memercayai CMS tersebut, karena basis data CMS itu sendiri dapat disusupi.

Apa yang dilakukan DOMPurify ketika Anda memanggil DOMPurify.sanitize(htmlString)?

React secara otomatis melakukan escape terhadap nilai JSX, sehingga mencegah sebagian besar XSS. dangerouslySetInnerHTML melewati perlindungan ini untuk perenderan HTML yang sah — selalu sanitasi masukan terlebih dahulu dengan DOMPurify. Skrip pihak ketiga dan paket npm yang disusupi merupakan vektor XSS melalui rantai pasokan. Kebijakan Keamanan Konten menyediakan lapisan pertahanan kedua. XSS yang berhasil memungkinkan pencurian token, penyamaran identitas, dan phishing.