Nilai dari formulir, API, atau URL biasanya ditampilkan sebagai teks, bukan ditafsirkan sebagai HTML. Menetapkannya ke textContent memberitahu browser untuk membuat konten teks daripada mengurai tag dan atribut.

const message = document.querySelector("#message");
message.textContent = userProvidedName;

Jangan membangun markup dengan penggabungan

  • Hindari menugaskan string yang tidak tepercaya ke innerHTML.
  • Buat elemen dengan metode DOM ketika struktur dinamis diperlukan.
  • Jika HTML yang kaya merupakan persyaratan asli, gunakan pembersih yang terpelihara dan tentukan tag dan atribut mana yang diperbolehkan.

Ingatlah konteksnya

Teks yang dimasukkan ke dalam node teks ditangani secara berbeda dari nilai yang digunakan dalam atribut URL, CSS, atau HTML. Validasi URL terhadap protokol dan tujuan yang diizinkan antarmuka Anda sebelum menetapkannya ke tautan.

Uji dengan tanda kurung sudut dan karakter kutipan dalam masukan sampel. Mereka harus tampil sebagai karakter yang terlihat, bukan menjadi elemen antarmuka baru.