Semua artikel

HTML Entities: cara menampilkan karakter khusus dengan aman

Dalam HTML, karakter <, >, dan & memiliki makna khusus dan wajib di-escape. Bahasa Indonesia sendiri memakai alfabet Latin tanpa diakritik, jadi masalah entity di sini biasanya bukan soal huruf, melainkan soal konten yang ditempel dari sumber lain — terutama Microsoft Word dan situs berita yang di-scrape.

Kenapa bahasa Indonesia "aman" dari masalah karakter khusus

Berbeda dari bahasa dengan diakritik seperti bahasa Prancis atau Vietnam, kata-kata bahasa Indonesia — "rumah", "pergi", "mengapa" — hampir seluruhnya memakai huruf ASCII polos. Ini berarti pengembang jarang perlu memikirkan entity bernama khusus untuk huruf; fokusnya cukup pada empat karakter reserved HTML dan tanda kutip.

Tanda kutip pintar dari salinan Word/Google Docs

Konten yang ditulis di Word atau Google Docs lalu ditempel ke CMS sering membawa tanda kutip lengkung (&ldquo;, &rdquo;) dan tanda hubung panjang (&mdash;) alih-alih tanda kutip lurus biasa. Ini sering terlihat di situs berita dan blog berbahasa Indonesia yang alur editorialnya melibatkan draf di Word sebelum dipublikasikan lewat WordPress — hasilnya tampil normal di browser, tapi bisa mengacaukan pencarian teks yang hanya mencocokkan tanda kutip lurus.

Entity bernama dan numerik

Entity HTML dapat ditulis dengan dua cara: kode bernama (&lt;, &amp;, &quot;) atau numerik (&#60;, &#38;, atau dalam heksadesimal &#x3C;). Browser menampilkan keduanya dengan cara yang sama.

Set karakter minimal yang perlu di-escape

  • <&lt; — agar tag tidak dimulai.
  • >&gt; — untuk menutup teks dengan benar setelah tag.
  • &&amp; — agar & tidak dibaca sebagai awal entity lain.
  • " dan '&quot;, &#39; — wajib di dalam nilai atribut bertanda kutip.

Kaitannya dengan XSS

Sebagian besar kerentanan XSS muncul justru karena teks yang dimasukkan pengguna disisipkan ke HTML tanpa di-escape. Menampilkan "<script>...</script>" tanpa mengubahnya menjadi entity akan membuat browser menjalankannya sebagai kode. Escaping adalah perlindungan dasar — meski bukan satu-satunya.

Konteks itu penting: teks vs atribut

Meng-escape <, >, dan & sudah cukup untuk teks di antara tag, tetapi di dalam atribut bertanda kutip, karakter kutip yang dipakai — ganda atau tunggal — juga harus di-escape secara khusus. Jika atribut dibatasi tanda kutip ganda tetapi nilainya mengandung tanda kutip ganda yang tidak di-escape, markup akan "putus" lebih awal dari yang diharapkan.

Coba alat