Kodekan atau dekodekan entitas HTML _

Cara kerja pengkodean entitas HTML

Entitas HTML adalah referensi karakter yang diurai peramban kembali menjadi satu karakter. Lima karakter HTML yang dicadangkan (<, >, &, ", ') selalu perlu dikodekan saat teks dirender sebagai HTML; yang lainnya bersifat opsional dan bergantung pada encoding dokumen.

1. Pilih mode dan cakupan. Mode kodekan memproses masukan Anda karakter per karakter. Mode dekodekan memindai masukan untuk mencari pola entitas. Sakelar cakupan menentukan apakah hanya lima karakter aman-HTML yang dikodekan, atau setiap titik kode non-ASCII juga ditulis ulang.
2. Pilih gaya entitas. Entitas bernama (©) mudah dibaca dalam kode sumber. Referensi desimal (©) dan referensi hex (©) mencakup setiap titik kode Unicode tanpa memerlukan nama. Klien email lama dan parser XML lebih menyukai bentuk numerik.
3. Proses masukan. Saat mengkodekan, setiap titik kode dibaca dan dicari dalam tabel bawaan sekitar 200 entitas bernama umum. Yang tidak ditemukan beralih ke numerik. Saat mendekodekan, pemindaian dilakukan dengan satu regex yang mencocokkan &name;, &#NNN;, dan &#xHH; dalam satu proses.
4. Petakan ke karakter. Kecocokan bernama diselesaikan melalui tabel terbalik. Kecocokan numerik diproses melalui String.fromCodePoint dengan basis 10 atau 16. Entitas bernama yang tidak dikenal dibiarkan tidak berubah agar masukan parsial dapat diputar balik tanpa kehilangan data.
5. Mode langsung. Aktifkan mode langsung dan setiap penekanan tombol akan menjalankan ulang konversi dengan debounce 150 md. Berguna saat Anda menyesuaikan cuplikan dan ingin umpan balik langsung sebelum menempelkannya ke dalam template.

Mengapa mengkodekan entitas HTML

• Mencegah masukan pengguna merusak tata letak. Ketika pengguna mengetik tanda < yang tidak sengaja di kotak komentar, memasukkan teks tersebut langsung ke HTML akan menulis ulang sisa halaman. Mengkodekan karakter yang dicadangkan terlebih dahulu berarti peramban merender karakter tersebut alih-alih mengurainya sebagai awal tag.
• Menjaga nilai atribut tetap valid. Menyematkan string yang dikutip di dalam atribut HTML memerlukan penggantian kutipan yang disematkan dengan " (untuk atribut bertanda kutip ganda) atau ' (untuk yang bertanda kutip tunggal). Jika tidak, parser menutup atribut lebih awal dan sisa baris menjadi markup tersasar.
• Menetralkan HTML tidak sengaja dalam data tersimpan. Log, laporan bug, dan ekspor obrolan sering kali mengandung tanda kurung sudut dan ampersand nyata. Mengkodekan entitas dump sebelum menempelkannya ke halaman dokumentasi membuat salinan tersebut terlihat sebagai teks alih-alih memicu renderer atau detektor tautan otomatis.
• Berbagi cuplikan kode dengan aman. Memposting contoh tag seperti <script>alert(1)</script> di posting blog, email, atau pesan Slack memerlukan pengkodean kurung agar cuplikan ditampilkan bukan dijalankan. Teknik yang sama mencakup badan umpan RSS dan bidang `description` JSON-LD.

Aplikasi umum

Pengkodean entitas muncul di mana pun teks mentah disusun menjadi HTML saat runtime — bahkan ketika framework biasanya menanganinya untuk Anda, alat manual berguna untuk saat-saat ketika tidak.

• Template yang dirender server: Jinja2, ERB, Twig, dan Handlebars melarikan diri secara otomatis secara default, tetapi blok raw dan penanda `safe` mematikannya — codec memungkinkan Anda mengonfirmasi apa yang akan dihasilkan oleh escape tersebut.
• Pembuatan email dan buletin: banyak mesin template ESP tidak melarikan diri dari bidang gabungan secara otomatis, sehingga tanda kutip pintar dan glyph hak cipta dalam nama yang diberikan pengguna perlu dikodekan terlebih dahulu.
• Dokumentasi dan contoh kode: menempelkan contoh tag HTML ke dalam posting blog Markdown atau cuplikan situs statis memerlukan pengkodean kurung agar renderer memperlakukannya sebagai teks yang terlihat.

Contoh yang dikerjakan

Tempel <script>alert('hi')</script> ke masukan dengan mode diatur ke Kodekan, gaya Named, cakupan Minimal. Keluaran berbunyi <script>alert('hi')</script>. Alihkan gaya ke Numerik hex dan masukan yang sama menghasilkan <script>alert('hi')</script>. Balik mode ke Dekodekan, tempel string yang dikodekan kembali, dan tag asli kembali utuh.

FAQ

Apa itu entitas HTML?

Entitas HTML adalah referensi karakter yang disubstitusikan peramban kembali menjadi karakter tunggal saat mengurai halaman. Mereka hadir dalam tiga bentuk: bernama (seperti & untuk &), numerik desimal (&), dan numerik hex (&). Lima karakter HTML yang dicadangkan (<, >, &, ", ') perlu dikodekan setiap kali teks dimasukkan ke HTML. Sekitar 2.225 entitas bernama lainnya mencakup simbol, aksen, dan huruf Yunani tetapi bersifat opsional setelah encoding dokumen adalah UTF-8.

Kapan saya harus menggunakan entitas named vs numerik?

Gunakan entitas bernama saat Anda ingin kode sumber mudah dibaca (seorang manusia yang meninjau © dalam template langsung mengerti). Gunakan numerik (desimal atau hex) saat konsumen lebih lama atau lebih ketat — parser XML, klien email lama, dan beberapa pembaca umpan hanya mengenali sebagian kecil entitas bernama HTML5, dan semuanya mengenali bentuk numerik. Hex cenderung menang dalam konteks yang berfokus pada keamanan karena sejajar satu-satu dengan notasi titik kode Unicode yang digunakan dalam dokumen spesifikasi.

Apakah pendekodean menangani entitas hex seperti &?

Ya. Pendekode menggunakan satu regex yang mencocokkan semua tiga bentuk entitas dalam satu proses: &name;, &#NNN;, dan &#xHH;. Kecocokan numerik diselesaikan dengan String.fromCodePoint menggunakan basis 10 atau 16. Masukan campuran (bernama dan numerik dalam string yang sama) didekodekan dengan benar, dan nama yang tidak diketahui dibiarkan sebagai teks literal agar masukan parsial dapat diputar balik tanpa kehilangan data.

Apakah ini aman untuk digunakan dengan masukan yang tidak tepercaya?

Codec itu sendiri hanya berjalan di peramban dan tidak mengirimkan masukan Anda ke mana pun. Apakah keluaran aman untuk disematkan bergantung pada konteks. Pengkodean entitas menangani konteks badan HTML dan nilai atribut, yang mencakup kasus OWASP Aturan #1. Konteks JavaScript (penangan acara inline, blok `<script>`), konteks CSS, dan konteks URL masing-masing memerlukan aturan pengkodean sendiri — pengkodean entitas saja tidak cukup di sana. Untuk pertahanan berlapis di sisi server, padukan ini dengan mesin template yang sadar konteks seperti DOMPurify atau auto-escape framework Anda.

Pengkodean entitas sisi peramban berada di batas antara masukan pengguna dan HTML yang dirender. Melakukan konversi secara lokal berarti Anda dapat memeriksa apa yang akan dihasilkan framework Anda, tanpa pernah mengirim teks asli ke alat pihak ketiga.