dangerouslySetInnerHTML adalah pengganti React untuk menggunakan innerHTML di DOM browser untuk mengatur HTML secara terprogram atau dari sumber eksternal.
Ini digunakan untuk menyuntikkan markup HTML secara langsung ke dalam output yang dirender komponen. Nama “dangerouslySetInnerHTML” menyiratkan bahwa menggunakan prop ini berpotensi menjadi tidak aman jika tidak digunakan dengan hati-hati, karena ini memungkinkan Anda untuk memasukkan konten HTML mentah tanpa mekanisme React yang biasa untuk rendering dan sanitasi.
Kapan Menggunakan dangerouslySetInnerHTML
dangerouslySetInnerHTML digunakan saat anda membutuhkan render teks yang diformat dalam elemen div. Selain itu, anda dapat menggunakannya untuk merender konten persis seperti yang telah anda format. Sebagai contoh website blog, Biasanya memeliki menjadi beberapa bagian seperti header, paragraf, gambar, blok kode, dll.
Untuk melakukan render kontent semacam itu pada react anda harus memanipulasi DOM untuk mendapatkan elemen HTML dalam konten dan menyetelnya ke elemen menggunakan innerHTML.
Karena React tidak mengizinkan interaksi langsung dengan DOM, jadi konten anda tidak akan ditampilkan sebagaimana mestinya.
Anda bisa menggunakan dangerouslySetInnerHTML untuk mengatasi masalah diatas, akan tetapi dangerouslySetInnerHTML sebenarnya berbahaya untuk digunakan. Karena kerentanannya terhadap cross-site scripting (XSS) attacks.
Misalnya, jika pengguna diizinkan untuk menyisipkan HTML langsung ke halaman web melalui bidang formulir, peretas dapat menyematkan kode berbahaya ke dalam aplikasi, menyebabkan aplikasi berperilaku tidak sesuai atau bahkan mengakibatkan hilangnya data. Pertimbangkan kode berikut:
const App = () => {
const data = `Test <b onmouseover="alert('mouseover');">Helloww</b>`;
return (
<div dangerouslySetInnerHTML={{__html: data}} />
);
}Sepotong kode JavaScript tertanam dalam kode di atas. Ini akan memicu peringatan setiap kali pengguna mencoba mengakses aplikasi. Ini karena data tidak dibersihkan sebelum dirender dalam aplikasi. Jadi nantinya kode diatas akan tampil seperti berikut ini.
Test <b onmouseover="alert('mouseover');">Helloww</b>Untuk keamanan anda dapat membersihkan data untuk menghapus semua kode dan skrip berbahaya yang disematkan di dalamnya dan seharusnya hasilnya itu seperti berikut ini.
Test <b>Helloww</b>
Caranya anda bisa menggunakan DOMPurify. DOMPurify merupakan pembersih XSS khusus DOM untuk HTML guna mencegah serangan XSS dengan menghapus semua HTML berbahaya dalam konten yang dirender aplikasi.
Menggunakan DOMPurify
Silahkan instal terlebih dahulu DOMPurify di project react.js anda dengan perintah berikut ini.
npm install dompurify
Kemudian ubah kode anda menjadi berikut untuk menarapkan DOMPurify.
import DOMPurify from "dompurify";
const App = () => {
const data = `Test <b onmouseover="alert('mouseover');">Helloww</b>`;
return (
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data) }} />
);
}Perhatikan kode diatas, kita telah menggunakan DOMPurify untuk sanitasi data, sehingga nanti hasil outpunya menjadi seperti berikut.
Test <b>Helloww</b>
Bisa kita lihat bahwa kode javascript yang di sisipkan sudah hilang.
Kesimpulan
Pada artikel ini kita telah membahas mengenai dangerouslySetInnerHTML di react.js. Jadi dapat ditarik kesimpulan bahwa dangerouslySetInnerHTML hanyalah pengganti innerHTML di React dan harus digunakan dengan hati-hati.
Ketika anda menggunakan dangerouslySetInnerHTML, anda perlu mengambil tindakan dengan memastikan kodenya bersih dan tidak menajalankan skrip yang tidak diharapkan saat dirender.
Anda dapat menggunakan DOMPurify untuk pembersih XSS khusus DOM untuk HTML guna mencegah serangan XSS dengan menghapus semua HTML berbahaya dalam konten yang dirender aplikasi.