Encoder / Decoder HTML
Enkode teks ke entitas HTML atau dekode entitas HTML kembali ke teks.
Cara menggunakan Encoder / Decoder HTML
- 1
Masukkan teks atau HTML Anda
Tempel teks biasa yang ingin Anda escape, atau entitas HTML yang ingin Anda konversi kembali, ke dalam kotak input.
- 2
Pilih encode atau decode
Klik Encode to HTML Entities untuk mengonversi karakter seperti < > & menjadi entitas yang aman, atau Decode HTML Entities untuk mengubah entitas kembali menjadi karakter yang terbaca.
- 3
Tinjau output
Periksa hasil yang dikonversi di kotak output, dan gunakan Swap Input/Output untuk merangkai konversi balik jika diperlukan.
- 4
Salin hasilnya
Tekan Copy Output untuk mengambil teks yang telah di-encode atau di-decode, atau Clear Both untuk mengatur ulang kolom.
Pengkodean HTML: Meng-escape Karakter Khusus dengan Aman
Apa arti pengkodean HTML
Pengkodean HTML, yang juga disebut escaping HTML, mengubah karakter yang memiliki makna khusus dalam HTML menjadi rujukan karakter sehingga peramban menampilkannya sebagai teks harfiah alih-alih menafsirkannya sebagai markup. Peramban membaca < mentah sebagai awal sebuah tag, jadi untuk menampilkan tanda kurang-dari yang sesungguhnya di halaman Anda harus menuliskan rujukan <. Pengkodean adalah penerjemahan yang aman antara apa yang ingin Anda tampilkan dan apa yang akan dieksekusi peramban jika tidak.
Hanya ada segelintir karakter yang benar-benar perlu di-escape dalam HTML sehari-hari, tetapi menanganinya dengan benar adalah perbedaan antara halaman yang ditampilkan dengan benar dan yang rusak atau menjadi rentan. Rujukan tersebut hadir dalam dua jenis: entitas bernama seperti <, dan rujukan numerik seperti < atau <, yang semuanya menghasilkan karakter terlihat yang sama.
Karakter inti dan entitasnya
Lima karakter mencakup hampir setiap kebutuhan escaping. Ampersan & menjadi & dan harus didahulukan dalam konversi manual apa pun, karena ia mengawali setiap entitas. Tanda kurang-dari < menjadi < dan tanda lebih-dari > menjadi >, karena keduanya membatasi tag. Kutip ganda " menjadi " dan kutip tunggal atau apostrof ' menjadi ' (atau ' yang bernama dalam HTML5), yang penting di dalam nilai atribut.
Aturan ampersan-dahulu mencegah bug yang halus. Jika Anda mengganti < menjadi < dan baru setelah itu meng-escape ampersan, Anda akan mengubah < yang baru saja Anda tulis menjadi &lt; dan menampilkan teks harfiah "<" di halaman. Selalu kodekan & sebelum yang lain. Alat ini menerapkan konversi dalam urutan yang benar secara otomatis, sehingga Anda tidak pernah terjebak hal itu.
Contoh terselesaikan: menampilkan cuplikan kode
Bayangkan Anda ingin sebuah halaman secara harfiah menampilkan teks <a href="x">Tom & Jerry</a> alih-alih menampilkan sebuah tautan. Setiap karakter khusus diganti dengan rujukannya. Kurung sudut pembuka menjadi <, yang penutup menjadi >, kutip ganda di sekitar atribut menjadi ", dan ampersan di antara nama-nama itu menjadi &.
Hasil terkodenya adalah <a href="x">Tom & Jerry</a>. Ditempel ke dalam berkas HTML, peramban mencetak kode sumber asli secara terlihat di layar, persis seperti halaman tutorial atau dokumentasi akan menampilkan contoh markup, alih-alih mengubahnya menjadi elemen anchor yang berfungsi.
Mengapa pengkodean mencegah XSS
Cross-site scripting (XSS) adalah serangan di mana penyerang menyuntikkan HTML atau JavaScript ke dalam sebuah halaman melalui suatu ruas yang kemudian ditampilkan kepada pengguna lain, seperti komentar, nama pengguna, atau istilah pencarian. Jika sebuah situs menyisipkan teks tak tepercaya itu ke dalam halaman tanpa meng-escape-nya, sebuah muatan seperti tag script akan dieksekusi di peramban korban dengan hak istimewa situs tersebut, memungkinkan pencurian sesi dan yang lebih buruk.
Pengkodean menetralkan serangan itu pada akarnya. Ketika karakter berbahaya di-escape, sebuah <script>alert(1)</script> yang disuntikkan disimpan dan ditampilkan sebagai teks terlihat yang tak berbahaya — <script>alert(1)</script> — alih-alih sebagai elemen yang dapat dieksekusi. Pertahanan tunggal yang paling andal terhadap kelas kerentanan ini adalah meng-encode-HTML setiap potong data tak tepercaya tepat pada titik di mana ia dituliskan ke dalam halaman.
Konten elemen versus konteks atribut
Di mana Anda menempatkan data mengubah karakter mana yang berbahaya, dan satu aturan escaping saja tidak cukup untuk setiap tempat. Di dalam konten elemen — teks di antara tag pembuka dan penutup — karakter kritisnya adalah <, >, dan &. Di dalam nilai atribut, karakter kutip yang membatasi atribut itulah yang memungkinkan penyerang keluar dari nilai, jadi " dan ' harus dikodekan di sana selain ampersan.
Kebiasaan yang paling tangguh adalah selalu mengutip atribut Anda dan mengkodekan karakter kutip yang bersesuaian bersama dengan < > dan &. Atribut tanpa kutip jauh lebih sulit diamankan, karena kemudian spasi dan banyak karakter lain dapat keluar dari nilai. Ada pula konteks yang sepenuhnya terpisah — di dalam blok script, blok style, atau atribut URL — di mana escaping HTML saja tidak memadai dan diperlukan pengkodean khusus-konteks sebagai gantinya.
Pengkodean versus pendekodean, dan kapan melakukan masing-masing
Pengkodean adalah arah yang Anda gunakan saat menghasilkan keluaran: ambil teks mentah dan hasilkan markup yang aman dengan aksi Encode. Pendekodean adalah kebalikannya, mengubah entitas kembali menjadi karakter harfiahnya dengan aksi Decode, yang berguna ketika Anda memiliki sumber yang telah di-escape — disalin dari basis data, email, atau alat lain — dan ingin membaca atau menyunting teks yang mendasarinya.
Alur kerja praktis menggunakan keduanya dengan tombol Swap. Anda mungkin mendekodekan cuplikan tersimpan menjadi karakter biasa, menyuntingnya, lalu mengkodekan ulang versi yang telah disunting untuk ditampilkan dengan aman, semuanya tanpa mengetik ulang. Cukup ingat aturan emas soal waktu: kodekan pada saat keluaran, bukan pada saat masukan, karena meng-escape terlalu dini dapat merusak data yang perlu tetap mentah di penyimpanan.
Kesalahan umum yang harus dihindari
Kesalahan klasiknya adalah pengkodean ganda: menjalankan teks yang sudah di-escape melalui pengkode lagi, yang mengubah & menjadi &amp; dan menampilkan teks harfiah "&" kepada pengguna Anda. Kodekan tepat sekali, dan hanya pada batas keluaran. Sepupu dekatnya adalah meng-escape data dalam perjalanan masuk ke basis data Anda dan lagi dalam perjalanan keluar, yang menghasilkan kekacauan yang sama.
Kesalahan lain yang sering adalah mengira escaping HTML melindungi setiap konteks. Padahal tidak: ia tidak melindungi data yang ditempatkan di dalam sebuah string JavaScript, sebuah nilai CSS, atau sebuah href yang diawali dengan javascript:; semua itu membutuhkan aturan pengkodean tersendiri. Terakhir, jangan membuat sendiri pengkode parsial yang melupakan ampersan atau kutip atribut — celah-celah itulah tempat bug dan XSS menyusup. Biarkan pengkode yang lengkap dan terurut dengan benar melakukan pekerjaannya.
Pertanyaan yang sering diajukan
Karakter apa yang di-encode menjadi entitas HTML?
Bagaimana encoding membantu mencegah XSS?
Bisakah saya mengonversi entitas kembali menjadi teks normal?
Untuk apa tombol Swap?
Apakah input saya dikirim ke server?
Alat terkait
Lanjutkan dengan alat praktis ini