Apa Itu HTML Escaping?

HTML escaping adalah proses mengganti karakter yang memiliki makna khusus dalam HTML dengan referensi entitas yang sesuai. Lima karakter yang harus di-escape adalah ampersand (&), kurang-dari (<), lebih-dari (>), tanda kutip ganda ("), dan tanda kutip tunggal ('). Tanpa escaping, browser akan menginterpretasikan karakter-karakter ini sebagai instruksi markup, bukan teks yang dapat ditampilkan, sehingga merusak tampilan halaman dan membuka celah untuk serangan injeksi.

Spesifikasi HTML (yang dikelola oleh WHATWG) mendefinisikan dua bentuk referensi karakter: entitas bernama seperti & dan entitas numerik seperti & atau &. Entitas bernama lebih mudah dibaca dalam kode sumber. Entitas numerik (desimal atau heksadesimal) dapat merepresentasikan titik kode Unicode apa pun, sehingga berguna untuk karakter yang tidak memiliki alias bernama. Kedua bentuk menghasilkan output yang identik di browser.

Unescaping (disebut juga decoding) adalah operasi kebalikannya: mengonversi referensi entitas kembali ke karakter literalnya. Ini umum dilakukan saat mengekstrak teks dari sumber HTML, memigrasikan konten antar sistem, atau men-debug template yang melakukan double-encode entitas. Alat ini menangani kedua arah di browser, sehingga Anda dapat memverifikasi logika escaping atau memulihkan teks biasa dari sumber HTML dalam hitungan detik.

Mengapa Menggunakan Alat HTML Escape?

Mengganti tanda kurung sudut dan ampersand secara manual di blok teks besar sangat melelahkan dan rentan kesalahan. Alat khusus ini mengonversi input Anda dalam satu langkah tanpa perlu instalasi apa pun.

⚡

Konversi instan

Tempelkan teks atau HTML dan dapatkan output yang di-escape atau di-unescape secara langsung. Tidak perlu menunggu permintaan ke server karena semua pemrosesan terjadi secara lokal di JavaScript.

🔒

Pemrosesan yang mengutamakan privasi

Input Anda tidak pernah meninggalkan browser. Tidak ada yang dikirim ke server atau disimpan di mana pun, sehingga Anda dapat dengan aman meng-escape markup yang mengandung kredensial, API key, atau kode internal.

📋

Tanpa akun atau pengaturan

Buka halaman dan langsung mulai menempel. Tidak ada login, tidak ada verifikasi email, dan tidak ada perangkat lunak yang perlu diinstal. Berjalan di perangkat apa pun dengan browser modern.

🌐

Cakupan entitas penuh

Menangani lima karakter khusus HTML wajib ditambah entitas numerik (desimal dan heksadesimal). Mendukung konversi bolak-balik: escape lalu unescape menghasilkan string asli kembali.

Kasus Penggunaan HTML Escape

Developer frontend: menampilkan input pengguna

Saat merender teks yang dikirimkan pengguna di dalam halaman, escape terlebih dahulu untuk mencegah browser menginterpretasikannya sebagai tag HTML. Ini adalah pertahanan utama terhadap stored XSS di template mana pun yang menghasilkan string mentah.

Engineer backend: menghasilkan respons HTML

Kode sisi server yang menggabungkan string menjadi HTML harus meng-escape nilai dinamis sebelum penyisipan. Gunakan alat ini untuk memverifikasi bahwa fungsi escaping Anda menghasilkan output yang benar untuk kasus-kasus tepi seperti kutipan bersarang.

DevOps: menyematkan konfigurasi dalam HTML

JSON inline atau perintah shell di dalam halaman HTML (misalnya, dalam tag script atau atribut data) memerlukan escaping. Verifikasi bahwa tanda kurung sudut dan ampersand dalam cuplikan konfigurasi Anda dikodekan dengan benar.

QA engineer: menguji vektor XSS

Tempelkan payload XSS umum ke dalam alat ini untuk memastikan bahwa output aplikasi Anda sesuai dengan versi yang di-escape dengan benar. Bandingkan output yang di-escape karakter demi karakter dengan apa yang dihasilkan aplikasi Anda.

Technical writer: contoh kode dalam dokumentasi

Mempublikasikan cuplikan kode dalam dokumen berbasis HTML (Jekyll, Hugo, CMS kustom) memerlukan escaping tanda kurung sudut untuk sintaks tipe generik dan placeholder template. Tempelkan contoh kode Anda dan setiap karakter khusus akan dikodekan secara instan.

Pelajar: mempelajari entitas HTML

Ketik atau tempelkan karakter apa pun dan lihat bentuk entitas bernama dan numeriknya. Bereksperimen dengan kasus tepi seperti non-breaking space, em dash, dan simbol Unicode untuk memahami cara kerja pengkodean karakter HTML.

Tabel Referensi Entitas HTML

Tabel di bawah ini mencantumkan entitas HTML yang umum digunakan. Lima karakter khusus (& < > " ') harus selalu di-escape dalam konten HTML dan nilai atribut. Entitas lainnya bersifat opsional tetapi berguna untuk karakter yang sulit diketik atau ambigu dalam kode sumber.

Karakter	Deskripsi	Entitas bernama	Entitas numerik
&	Ampersand	&	&
<	Less-than sign	<	<
>	Greater-than sign	>	>
"	Double quote	"	"
'	Single quote / apostrophe	'	'
	Non-breaking space
©	Copyright sign	©	©
®	Registered sign	®	®
—	Em dash	—	—
’	Right single quote	’	’
€	Euro sign	€	€

Escaping vs. Unescaping: Kapan Menggunakan Masing-masing

Kedua operasi adalah kebalikan satu sama lain. Memilih arah yang salah menghasilkan output yang double-encoded atau tidak terlindungi.

Escape (encode)

Gunakan saat menyisipkan teks yang tidak dipercaya atau dinamis ke dalam HTML. Mengonversi literal < menjadi < sehingga browser menampilkan karakter tersebut, bukan memulai tag. Terapkan sebelum merender input pengguna, entri log, atau string apa pun yang mungkin mengandung markup.

Unescape (decode)

Gunakan saat mengekstrak teks biasa dari sumber HTML. Mengonversi < kembali menjadi <. Terapkan saat memigrasikan konten dari CMS, mengurai HTML hasil scraping, atau memperbaiki string double-encoded seperti &amp; yang menampilkan nama entitas alih-alih karakter.

Contoh Kode

Berikut adalah contoh fungsional HTML escaping dan unescaping dalam empat bahasa pemrograman. Setiap cuplikan mencakup kedua arah dan menangani kasus tepi seperti kutipan bersarang dan entitas numerik.

JavaScript (browser / Node.js)

// Escape HTML entities manually
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
}

escapeHtml('<img src="x" onerror="alert(1)">')
// → "&lt;img src=&quot;x&quot; onerror=&quot;alert(1)&quot;&gt;"

// Unescape using DOMParser (browser only)
function unescapeHtml(str) {
  const doc = new DOMParser().parseFromString(str, 'text/html')
  return doc.documentElement.textContent
}

unescapeHtml('&lt;div&gt;Hello&lt;/div&gt;')
// → "<div>Hello</div>"

Python

import html

# Escape special characters
html.escape('<script>alert("XSS")</script>')
# → '&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;'

# Escape including single quotes (quote=True is default in Python 3.8+)
html.escape("It's <b>bold</b>", quote=True)
# → 'It&#x27;s &lt;b&gt;bold&lt;/b&gt;'

# Unescape entities back to characters
html.unescape('&lt;p&gt;Price: &euro;10&lt;/p&gt;')
# → '<p>Price: €10</p>'

# Unescape numeric entities
html.unescape('&#60;div&#62;&#38;amp;&#60;/div&#62;')
# → '<div>&amp;</div>'

package main

import (
    "fmt"
    "html"
)

func main() {
    // Escape HTML special characters
    escaped := html.EscapeString(`<a href="page?id=1&sort=name">Link</a>`)
    fmt.Println(escaped)
    // → &lt;a href=&quot;page?id=1&amp;sort=name&quot;&gt;Link&lt;/a&gt;

    // Unescape back to original
    original := html.UnescapeString("&lt;b&gt;Go &amp; HTML&lt;/b&gt;")
    fmt.Println(original)
    // → <b>Go & HTML</b>
}

PHP

<?php
// Escape HTML entities (ENT_QUOTES escapes both " and ')
echo htmlspecialchars('<p class="info">Tom & Jerry's</p>', ENT_QUOTES, 'UTF-8');
// → &lt;p class=&quot;info&quot;&gt;Tom &amp; Jerry&#039;s&lt;/p&gt;

// Convert all applicable characters to HTML entities
echo htmlentities('Price: 10€ — 50% off', ENT_QUOTES, 'UTF-8');
// → Price: 10&euro; &mdash; 50% off

// Decode entities back
echo html_entity_decode('&lt;div&gt;&amp;copy; 2026&lt;/div&gt;');
// → <div>&copy; 2026</div>

Pertanyaan yang Sering Diajukan

Apa perbedaan antara HTML escaping dan URL encoding?

HTML escaping mengganti karakter yang bersifat khusus dalam HTML (< > & " ') dengan referensi entitas seperti < agar ditampilkan sebagai teks. URL encoding (percent-encoding) mengganti karakter yang tidak aman dalam URL dengan urutan hex %XX. Keduanya melindungi konteks yang berbeda: HTML escaping mencegah injeksi markup, sedangkan URL encoding memastikan query string dan segmen path yang valid.

Karakter apa saja yang harus di-escape dalam HTML?

Lima karakter yang selalu harus di-escape adalah: & (ampersand), < (kurang-dari), > (lebih-dari), " (tanda kutip ganda di dalam atribut), dan ' (tanda kutip tunggal di dalam atribut). Kegagalan meng-escape salah satu dari karakter-karakter ini dapat merusak rendering atau menciptakan kerentanan cross-site scripting.

Apakah ' valid di HTML5?

Ya. Entitas bernama ' didefinisikan dalam spesifikasi HTML5 dan didukung oleh semua browser modern. Entitas ini bukan bagian dari HTML 4, yang hanya mengenal &, <, >, dan ". Jika Anda perlu mendukung parser HTML 4 yang sangat lama, gunakan bentuk numerik ' sebagai gantinya.

Bagaimana cara memperbaiki entitas HTML yang double-encoded seperti &amp;?

Double encoding terjadi ketika string yang sudah di-escape melewati fungsi escaping kedua kalinya. Solusinya adalah melakukan unescape sampai output stabil. Tempelkan string double-encoded ke alat ini dalam mode unescape, lalu jalankan lagi jika referensi & masih ada. Untuk mencegah double encoding, periksa apakah input sudah di-escape sebelum menerapkan fungsi escape.

Bisakah saya menggunakan entitas HTML di dalam string JavaScript?

Entitas HTML diinterpretasikan oleh parser HTML, bukan engine JavaScript. Di dalam blok script, kode berjalan setelah parser HTML memproses halaman, sehingga < dalam blok script menjadi < sebelum JavaScript membacanya. Untuk event handler inline (onclick, dll.), nilai atribut di-decode HTML terlebih dahulu, kemudian dieksekusi sebagai JavaScript. Dalam file .js eksternal, entitas tidak memiliki makna khusus dan diperlakukan sebagai teks literal.

Apa perbedaan antara htmlspecialchars dan htmlentities di PHP?

htmlspecialchars() hanya meng-escape lima karakter khusus (& < > " ') yang memengaruhi struktur HTML. htmlentities() meng-escape kelima karakter tersebut ditambah setiap karakter yang memiliki entitas HTML bernama, seperti tanda hak cipta dan huruf beraksen. Untuk tujuan keamanan, htmlspecialchars() dengan ENT_QUOTES sudah cukup. htmlentities() berguna ketika Anda memerlukan output yang aman untuk ASCII pada sistem yang tidak dapat menangani UTF-8.

Apakah HTML escaping cukup untuk mencegah XSS?

HTML escaping mencegah XSS dalam kasus yang paling umum: menyisipkan teks yang tidak dipercaya ke dalam konten elemen HTML atau nilai atribut. Ini tidak melindungi konteks injeksi lainnya. Menyisipkan data pengguna ke dalam blok script memerlukan JavaScript string escaping. Menyisipkan ke dalam atribut style memerlukan CSS escaping. Menyisipkan ke dalam atribut URL (href, src) memerlukan validasi URL ditambah encoding. Pertahanan XSS yang lengkap menerapkan escaping khusus konteks di setiap titik penyisipan.

HTML Escape / Unescape