flawopen.com/XSS di JavaScript/dangerouslySetInnerHTML
Apakah dangerouslySetInnerHTML di React aman?
Bayangkan JSX biasa sebagai printer label: teks tetap menjadi teks. dangerouslySetInnerHTML beralih ke mesin cetak yang menafsirkan string sebagai HTML. Jika string memuat konten yang dikendalikan penyerang, browser dapat memperlakukannya sebagai markup aktif. Gunakan titik keluaran ini hanya untuk HTML yang memang tepercaya atau telah disanitasi untuk konteks HTML yang tepat.
Mengapa JSX biasa tidak memerlukannya
function Comment({ html }) {
return <p dangerouslySetInnerHTML=
{{ __html: html }} />;
}
function Comment({ text }) {
return <p>{text}</p>;
}
Kapan dangerouslySetInnerHTML layak digunakan?
Gunakan hanya ketika produk perlu mempertahankan format rich text terbatas yang tidak dapat direpresentasikan sebagai anak React biasa. CMS, editor, atau renderer Markdown tidak otomatis tepercaya: konten tersimpan dan keluaran renderer tetap dapat berisi markup yang tidak tepercaya. Tentukan elemen dan atribut yang diizinkan, sanitasi dengan pustaka HTML yang dipelihara seperti DOMPurify, lalu kirim hasilnya langsung ke titik keluaran ini.
Cara penggunaan yang benar
Sanitasi tepat sebelum memberikan nilai ke dangerouslySetInnerHTML dengan pustaka terpelihara seperti DOMPurify. Jangan memakai ekspresi reguler sebagai sanitizer HTML. Hindari mengubah string setelah sanitasi karena transformasi berikutnya dapat membatalkan jaminannya. Perbarui sanitizer dan lingkungan parser-nya.
Daftar blokir tag yang dikenal tidak cukup: risiko juga dapat berasal dari atribut, bidang URL, namespace, dan perilaku parser. Tentukan daftar kecil elemen dan atribut yang diperlukan fitur, lalu konfigurasi sanitizer sesuai kebijakan tersebut. Tinjau tautan dan atribut URL lainnya secara terpisah berdasarkan tujuan yang diizinkan produk.
Cara memeriksa kode
grep -rn "dangerouslySetInnerHTML" --include="*.jsx" --include="*.tsx" .Pertanyaan umum
Itu bergantung pada renderer dan konfigurasinya. Periksa apakah HTML mentah diterima dan apakah keluarannya disanitasi; konversi Markdown saja tidak membuat HTML aman.
Ya. v-html juga memberikan HTML kepada browser tanpa interpolasi teks biasa dari framework. Perlakukan nilainya sebagai titik keluaran HTML dan sanitasi konten tidak tepercaya dengan kebijakan yang sesuai.
Referensi
- Dokumentasi React — dangerouslySetInnerHTML
- DOMPurify — sanitizer HTML dan catatan penggunaan
- MDN — pertimbangan keamanan Element.innerHTML
- flawopen.com — XSS di JavaScript