Menukar Teks Biasa kepada HTML: Apa yang Berubah, Mengapa Penting dan Cara Melakukannya dengan Betul
Menampal teks mentah ke dalam HTML tanpa penukaran adalah salah satu cara paling biasa untuk merosakkan halaman atau memperkenalkan lubang keselamatan. Inilah tepat apa yang dilakukan penukar teks ke HTML dan bilakah anda memerlukannya.
Apa yang Sebenarnya Berubah Apabila Anda Menukar Teks kepada HTML
Teks biasa dan HTML kelihatan serupa, tetapi pelayar web menguraikannya dengan sangat berbeza. Lima transformasi berlaku apabila anda menukar teks kepada HTML dengan betul:
&menjadi&— ampersand memulakan setiap entiti HTML dan mesti dilepaskan dahulu<menjadi<— tanpa ini, sebarang kurungan sudut dalam teks memulakan tag HTML>menjadi>— sebab yang sama, menutup tafsiran tag- Baris baru menjadi tag
<br>atau dibalut dalam elemen<p>— baris baru mentah tidak kelihatan dalam HTML - URL biasa menjadi pautan
<a href="...">— pilihan tetapi hampir selalu berguna
Pengekodan Entiti HTML: Mengapa Ia Penting
Ini bukan sekadar soal output yang bersih. Ini adalah isu keselamatan.
Bayangkan pengguna menghantar ulasan yang mengandungi <script>alert(1)</script>. Jika anda menampal rentetan itu terus ke dalam halaman HTML tanpa pengekodan, pelayar akan melaksanakannya sebagai JavaScript. Itu adalah serangan XSS (Cross-Site Scripting).
Penyelesaiannya mudah: enkod sebelum output. Dalam PHP, htmlspecialchars() mengendalikan empat aksara kritikal. Dalam Python, html.escape() menampungnya.
Perenggan vs Baris Baru: Memilih Struktur yang Betul
Gunakan tag <p> untuk kandungan blok. Tag perenggan membawa makna semantik yang memberitahu pelayar, pembaca skrin dan enjin carian bahawa ini adalah unit prosa yang berbeza.
Gunakan <br> untuk baris baru yang disengajakan dalam blok. Puisi, alamat pos, lirik lagu — semuanya memerlukan baris baru visual tetapi masih merupakan satu unit logik.
Aksara Khas di Luar Asas
| Aksara | Entiti | Bila diperlukan |
|---|---|---|
| " | " | Dalam nilai atribut HTML |
| ' | ' | Atribut dengan petikan tunggal (HTML5) |
| ruang tidak putus | | Elakkan baris baru antara "10 kg" |
| tanda pisah panjang | — | Tanda pisah tipografi dalam prosa |
| hak cipta | © | Notis hak cipta di footer |
Kes Penggunaan Sebenar
Menampal kandungan ke dalam CMS adalah kes yang paling biasa. WordPress dan sistem serupa biasanya mempunyai sanitizer sendiri, tetapi jika anda bekerja dalam blok HTML mentah atau CMS headless yang menerima HTML secara langsung, teks yang tidak dikodkan akan menyebabkan masalah.
Templat HTML e-mel lebih tidak bertoleransi lagi. Klien e-mel tidak berkongsi enjin rendering yang sama. Pengekodan entiti yang betul adalah wajib jika e-mel anda mesti dipaparkan dengan betul dalam Outlook dan Apple Mail secara serentak.
Menukar catatan blog dari Word atau Google Docs adalah senario yang paling rumit. Aplikasi-aplikasi ini menyisipkan tanda petik tipografi, apostrof melengkung dan tanda pisah tidak standard. Penukar yang baik membersihkan aksara tidak standard ini dan menggantikannya dengan entiti HTML yang betul.
Apa yang Biasanya Ditawarkan Penukar Teks ke HTML
- Balit dalam
<p>— baris baru berganda menjadi pemisah perenggan - Tukar URL kepada pautan — kesan http:// dan https:// dan bungkus dalam tag sauh
- Pelihara ruang kosong — berguna untuk kandungan pra-format, output dalam
<pre> - Tambah nl2br — tukar setiap baris baru kepada
<br> - Buang HTML sedia ada — bersihkan tag dari teks input sebelum menukar
Tukar Teks Biasa kepada HTML Serta-merta
Tampal sebarang teks biasa dan dapatkan output HTML yang bersih dan selamat dengan pilihan untuk membalut perenggan, memautkan URL, mengekod entiti dan memelihara ruang kosong.