HTML Escape — Konverter Karakter Khusus dan Entitas HTML
Ubah karakter khusus HTML seperti <, >, &, ", dan ' menjadi entitas HTML agar browser menampilkannya sebagai teks, bukan sebagai kode.
Anda juga dapat mengembalikan entitas HTML ke karakter aslinya melalui proses decode.
Semua proses berjalan langsung di browser tanpa mengirim data ke server.
Gunakan URL Encoding & Decoding untuk karakter khusus pada URL,
dan Base64 Encoding & Decoding untuk mengirim data dalam bentuk teks secara aman.
Mengapa HTML Escape Penting — Cegah XSS dan Tampilkan Data dengan Aman
Tanpa HTML escape, browser dapat menganggap input pengguna sebagai kode yang dapat dijalankan.
Sebagai contoh, <script>alert('XSS')</script> dapat dieksekusi jika ditampilkan secara langsung.
HTML escape penting untuk komentar, pencarian, dan semua area yang menampilkan input pengguna.
Gunakan alat ini untuk memeriksa hasil sebelum dipublikasikan.
Kode Entitas HTML Utama — Karakter yang Perlu Di-Escape
Berikut adalah karakter HTML yang paling sering di-escape beserta kode entitas yang sesuai.
| Karakter | Kode Entitas | Keterangan |
|---|---|---|
| < | < | Awal tag HTML |
| > | > | Akhir tag HTML |
| & | & | Awal entitas |
| " | " | Tanda kutip pada atribut |
| ' | ' | Tanda kutip tunggal pada atribut |
< dan > diperlakukan sebagai tag HTML, sedangkan & menandai awal entitas sehingga perlu diproses lebih dahulu.
Tanda kutip juga perlu di-escape di dalam atribut HTML agar struktur markup tetap valid.
digunakan untuk mempertahankan beberapa spasi atau membuat spasi tanpa pemisah baris.
Apa Itu HTML Unescape — Mengembalikan Entitas ke Karakter Asli
Unescape adalah kebalikan dari escape. Proses ini mengubah entitas HTML seperti <, >, dan & kembali menjadi karakter aslinya seperti <, >, dan &.
Unescape sering digunakan untuk memulihkan string entitas HTML yang tersimpan di API atau database menjadi HTML asli,
mengembalikan konten yang sudah di-escape dari template email atau sistem eksternal sebelum diedit,
serta melakukan debugging pada string yang mengalami encoding berulang di server.
Gunakan tombol ESCAPE / UNESCAPE di bagian atas alat untuk beralih antara kedua mode.
Perbandingan Format Escape — HTML, JavaScript, dan JSON
Cara melakukan escape pada karakter khusus berbeda tergantung tempat penggunaannya.
HTML menggunakan entitas seperti <, >, &, dan ". Format ini cocok untuk teks yang dimasukkan langsung ke dalam HTML.
String JavaScript menggunakan escape berbasis backslash seperti \", \', dan \\. Format ini digunakan untuk teks di dalam kode JavaScript.
JSON mengikuti spesifikasi JSON dan melakukan escape pada tanda kutip serta karakter kontrol. Umumnya digunakan untuk respons API dan file JSON.
Alat ini mendukung format HTML, JavaScript, dan JSON sehingga Anda dapat memilih format yang sesuai lalu langsung menyalin hasilnya.
Referensi HTML Escape per Bahasa — Cara Menangani Escape di Server
Setelah memeriksa hasil menggunakan alat ini, proses HTML escape tetap sebaiknya dilakukan secara otomatis di sisi server.
| Language | Metode Escape |
|---|---|
| Java (Spring) | HtmlUtils.htmlEscape(str) |
| Java (Commons Text) | StringEscapeUtils.escapeHtml4(str) |
| JavaScript | textContent / createTextNode() |
| Python | html.escape(str) |
| PHP | htmlspecialchars($str, ENT_QUOTES) |
| Go | html.EscapeString(str) |
| Ruby | CGI.escapeHTML(str) |
Template engine seperti Thymeleaf, Jinja2, dan Blade biasanya melakukan escape otomatis melalui ekspresi seperti th:text dan {{ }}.
Namun jika menggunakan th:utext atau filter raw untuk menampilkan HTML asli, hasil akhirnya tetap perlu diperiksa secara manual.
Entitas HTML yang Sering Digunakan — Referensi Cepat untuk Disalin
Berikut adalah entitas HTML yang paling sering digunakan dalam pengembangan. Klik untuk menyalin dan langsung digunakan.
| Karakter | Entitas Bernama | Entitas Numerik | Keterangan |
|---|---|---|---|
| < | < | < | Lebih kecil dari, awal tag |
| > | > | > | Lebih besar dari, akhir tag |
| & | & | & | Ampersand |
| " | " | " | Tanda kutip ganda |
| ' | ' | ' | Tanda kutip tunggal |
| Spasi | |   | Spasi tanpa pemisah baris |
| © | © | © | Simbol hak cipta |
| ® | ® | ® | Simbol merek terdaftar |
| ™ | ™ | ™ | Simbol merek dagang |
| — | — | — | Tanda pisah panjang |
Entitas bernama (format <) dan entitas numerik (format <) menghasilkan karakter yang sama.
Entitas numerik juga dapat digunakan untuk karakter yang tidak memiliki nama entitas khusus.
Pertanyaan yang Sering Ditanyakan
Ya. Keduanya adalah proses encoding yang berbeda dan digunakan untuk tujuan yang berbeda.
HTML escape mengubah karakter khusus menjadi bentuk seperti < dan & agar browser menampilkannya sebagai teks, bukan sebagai tag atau entitas HTML.
URL encoding mengubah karakter yang tidak aman digunakan langsung di URL menjadi format percent-encoding seperti %2F dan %20.
Karena fungsi keduanya berbeda, penggunaan yang tertukar dapat menyebabkan hasil yang tidak sesuai harapan.
Jika konten HTML perlu dikirim melalui parameter URL, lakukan URL encoding terlebih dahulu untuk pengiriman data lalu terapkan HTML escape secara terpisah saat menampilkan hasilnya.
Ya. Escape juga penting di banyak situasi selain perlindungan terhadap XSS.
Salah satu contoh umum adalah ketika input pengguna dimasukkan langsung ke atribut HTML.
Misalnya, jika nilai yang mengandung tanda kutip dimasukkan ke atribut seperti href atau value tanpa escape, struktur atribut dapat rusak dan menghasilkan perilaku yang tidak diinginkan.
Template email, pembuatan PDF, ekspor CSV, dan format keluaran lainnya juga membutuhkan escape yang sesuai dengan konteks masing-masing.
Ya. Saat menggunakan atribut th:text, Thymeleaf secara otomatis menerapkan HTML escape.
Sebagai contoh, jika model berisi test, hasil yang ditampilkan melalui th:text akan muncul sebagai teks biasa dan tidak diproses sebagai HTML.
Sebaliknya, th:utext menampilkan HTML tanpa escape. Jika digunakan untuk input yang tidak tepercaya, hal ini dapat menimbulkan risiko XSS.
Gunakan th:utext hanya untuk konten dari sumber yang tepercaya, seperti HTML yang dibuat dan telah ditinjau secara internal.
Tidak. Semua proses escape dan unescape dijalankan sepenuhnya di dalam browser Anda.
Data yang dimasukkan—termasuk kode HTML, skrip, API key, maupun teks lainnya—tidak dikirim ke server eksternal.
Alat ini hanya mengubah karakter khusus yang umumnya memerlukan escape di HTML, seperti <, >, &, ", dan '.
Karakter Unicode, emoji, dan sebagian besar sistem penulisan modern umumnya dapat ditampilkan dengan benar di HTML5 menggunakan UTF-8 tanpa memerlukan HTML escape tambahan.
Namun, beberapa sistem lama atau lingkungan yang hanya mendukung ASCII dapat memerlukan referensi karakter numerik berbasis Unicode code point dibanding menampilkan karakter secara langsung. Dalam kasus tersebut, pengaturan encoding tambahan mungkin tetap diperlukan.
Tidak sepenuhnya sama, meskipun keduanya sering digunakan secara bergantian.
HTML Entity adalah notasi yang didefinisikan dalam HTML untuk merepresentasikan karakter tertentu, seperti <, &, dan ©.
HTML Escape adalah proses mengubah karakter khusus menjadi HTML Entity agar browser menampilkannya sebagai teks dan bukan menganggapnya sebagai markup.
Dengan kata lain, HTML Entity merupakan hasil dari proses escape. Dalam pencarian dan dokumentasi teknis, kedua istilah ini sering diperlakukan sebagai konsep yang sama.