Ekod atau nyahkod entiti HTML _

Cara pengekodan entiti HTML berfungsi

Entiti HTML ialah rujukan aksara yang dihurai semula oleh pelayar kepada aksara tunggal. Lima aksara HTML terpelihara (<, >, &, ", ') sentiasa perlu dikodkan apabila teks dirender sebagai HTML; yang lain adalah pilihan dan bergantung pada pengekodan dokumen.

1. Pilih mod dan skop. Mod Ekod melalui input anda aksara demi aksara. Mod Nyahkod melalui input mencari corak entiti. Togol skop memutuskan sama ada hanya lima aksara selamat HTML dikodkan, atau sama ada setiap titik kod bukan-ASCII juga ditulis semula.
2. Pilih gaya entiti. Entiti bernama (©) mudah dibaca dalam sumber. Rujukan perpuluhan (©) dan rujukan hex (©) membawa setiap titik kod Unicode tanpa memerlukan nama. Klien e-mel lama dan penghurai XML lebih suka bentuk berangka.
3. Lalui input. Semasa pengkodan, kami membaca setiap titik kod dan mencarinya dalam jadual terbina dalam kira-kira 200 entiti bernama biasa. Kegagalan jatuh kepada berangka. Semasa penyahkodan, kami mengimbas dengan regex tunggal yang memadankan &name;, &#NNN;, dan &#xHH; dalam satu laluan.
4. Petakan kepada aksara. Padanan bernama diselesaikan melalui jadual terbalik. Padanan berangka melalui String.fromCodePoint dengan asas 10 atau asas 16. Entiti bernama yang tidak diketahui dibiarkan tidak disentuh supaya input separa perjalanan pergi-balik tanpa kehilangan.
5. Mod langsung. Togolkan mod langsung dan setiap ketukan kekunci menjalankan semula penukaran dengan debounce 150 ms. Berguna apabila anda mengubah suai coretan dan mahukan maklum balas segera sebelum menampalnya ke dalam templat.

Mengapa mengekod entiti HTML

• Halang input pengguna daripada memecah tataletak. Apabila pengguna menaip < yang tersasar ke dalam kotak komen, menjatuhkan teks itu terus ke dalam HTML menulis semula seluruh halaman. Mengekod aksara terpelihara dahulu bermakna pelayar merender aksara itu dan bukannya menghurainya sebagai permulaan tag.
• Kekalkan nilai atribut sebagai sah. Membenamkan rentetan petikan dalam atribut HTML memerlukan petikan terbenam digantikan dengan " (untuk atribut berpetikan berganda) atau ' (untuk berpetikan tunggal). Jika tidak, penghurai menutup atribut lebih awal dan baki baris menjadi markup tersasar.
• Hapuskan HTML tidak sengaja dalam data tersimpan. Log, laporan pepijat, dan eksport sembang sering mengandungi kurungan sudut dan ampersand sebenar. Mengekod entiti lambakan sebelum menampalnya ke dalam halaman dokumentasi memastikan salinan itu kelihatan sebagai teks dan bukannya mencetuskan renderer atau pengesan pautan automatik.
• Kongsi coretan kod dengan selamat. Menyiarkan tag contoh seperti <script>alert(1)</script> dalam catatan blog, e-mel, atau mesej Slack memerlukan kurungan dikodkan supaya coretan dipaparkan dan bukannya dijalankan. Teknik yang sama meliputi badan suapan RSS dan medan `description` JSON-LD.

Aplikasi biasa

Pengekodan entiti muncul di mana sahaja teks mentah digubah ke dalam HTML pada masa jalan — walaupun apabila rangka kerja biasanya mengendalikannya untuk anda, alat manual berguna untuk masa-masa ia tidak.

• Templat yang dirender oleh pelayan: Jinja2, ERB, Twig, dan Handlebars auto-escape secara lalai, tetapi blok mentah dan penanda `safe` mematikan itu — kodek membolehkan anda mengesahkan apa yang escape sepatutnya dihasilkan.
• Pengarangan e-mel dan surat berita: banyak enjin templat ESP tidak auto-escape medan gabungan, jadi petikan pintar dan glif hak cipta dalam nama yang dibekalkan pengguna memerlukan pra-pengekodan.
• Dokumentasi dan sampel kod: menampalkan tag HTML contoh ke dalam catatan blog Markdown atau coretan tapak statik memerlukan kurungan dikodkan supaya renderer menganggapnya sebagai teks kelihatan.

Contoh yang dikerjakan

Tampalkan <script>alert('hi')</script> ke dalam input dengan mod ditetapkan kepada Ekod, gaya Bernama, skop Minimum. Output berbunyi <script>alert('hi')</script>. Tukar gaya kepada Hex berangka dan input yang sama menghasilkan <script>alert('hi')</script>. Balikkan mod kepada Nyahkod, tampalkan semula rentetan yang dikodkan, dan tag asal kembali utuh.

FAQ

Apakah entiti HTML?

Entiti HTML ialah rujukan aksara yang digantikan oleh pelayar kembali kepada aksara tunggal apabila ia menghurai halaman. Ia hadir dalam tiga bentuk: bernama (seperti & untuk &), berangka perpuluhan (&), dan berangka hex (&). Lima aksara HTML terpelihara (<, >, &, ", ') memerlukan pengekodan bila-bila masa teks dijatuhkan ke dalam HTML. Kira-kira 2,225 entiti bernama lain meliputi simbol, aksen, dan huruf Greek tetapi adalah pilihan setelah pengekodan dokumen adalah UTF-8.

Bilakah saya perlu menggunakan entiti bernama berbanding berangka?

Gunakan entiti bernama apabila anda mahukan sumber dibaca dengan jelas (manusia yang menyemak © dalam templat memahaminya dengan serta-merta). Gunakan berangka (perpuluhan atau hex) apabila pengguna adalah lebih lama atau lebih ketat — penghurai XML, klien e-mel lama, dan sesetengah pembaca suapan hanya mengenali subset kecil entiti bernama HTML5, dan mereka semua mengenali bentuk berangka. Hex cenderung menang dalam konteks yang berfokus pada keselamatan kerana ia selaras satu-satu dengan notasi titik kod Unicode yang digunakan dalam dokumen spec.

Adakah penyahkodan mengendalikan entiti hex seperti &?

Ya. Penyahkod menggunakan regex tunggal yang memadankan ketiga-tiga bentuk entiti dalam satu laluan: &name;, &#NNN;, dan &#xHH;. Padanan berangka diselesaikan dengan String.fromCodePoint menggunakan asas 10 atau asas 16. Input campuran (bernama dan berangka dalam rentetan yang sama) disahkodkan dengan betul, dan nama yang tidak diketahui dibiarkan sebagai teks literal supaya input separa perjalanan pergi-balik tanpa kehilangan.

Adakah ini selamat untuk digunakan dengan input yang tidak dipercayai?

Kodek itu sendiri adalah berasaskan pelayar sahaja dan tidak menghantar input anda ke mana-mana. Sama ada output selamat untuk dibenamkan bergantung pada konteks. Pengekodan entiti mengendalikan konteks badan HTML dan nilai atribut, yang meliputi kes peraturan utama OWASP. Konteks JavaScript (pengendali peristiwa sebaris, blok `<script>`), konteks CSS, dan konteks URL masing-masing memerlukan peraturan pengekodan mereka sendiri — pengekodan entiti sahaja tidak mencukupi di sana. Untuk pertahanan mendalam bahagian pelayan, padankan ini dengan enjin templat yang sedar konteks seperti DOMPurify atau auto-escape rangka kerja anda.

Pengekodan entiti bahagian pelayar berada di sempadan antara input pengguna dan HTML yang dirender. Melakukan penukaran secara setempat bermakna anda boleh memeriksa kewarasan apa yang dikeluarkan oleh rangka kerja anda, tanpa menghantar teks asal ke alat pihak ketiga.