Saat mengembangkan atau mengelola aplikasi web, mungkin Anda pernah mengalami masalah di mana tag HTML seperti <p> muncul di dashboard atau halaman web. Alih-alih menampilkan teks biasa, tag ini justru tampil di layar, membuat tampilan jadi tidak rapi.
Masalah ini bisa disebabkan oleh beberapa hal, terutama terkait dengan bagaimana teks atau data diproses dan ditampilkan di aplikasi Anda. Berikut beberapa cara untuk memperbaikinya:
1. Sanitasi Input Data
Pastikan bahwa data yang diterima dari pengguna atau sumber eksternal telah disaring untuk menghindari masuknya tag HTML yang tidak diinginkan. Jika data tersebut dimasukkan ke dalam sistem tanpa filtering, tag HTML seperti <p> bisa saja muncul di tampilan.
Untuk mengatasi ini, Anda bisa menggunakan fungsi sanitasi seperti htmlspecialchars() di PHP yang akan mengubah karakter-karakter HTML menjadi entitas teks yang aman.
Contoh penggunaan di PHP:
$$
phpCopy code$text = "<p>Ini adalah teks</p>";
echo htmlspecialchars($text);
$$
Hasilnya, tag <p> tidak akan dirender, dan hanya teks yang muncul.
2. Gunakan Escape Character di Template Engine
Jika Anda menggunakan framework seperti Laravel yang memiliki template engine Blade, pastikan menggunakan escape character yang benar. Gunakan sintaks {{ $text }} untuk meng-escape teks secara otomatis, sehingga tag HTML tidak dirender. Hindari penggunaan {!! $text !!} kecuali Anda ingin teks tersebut dirender sebagai HTML.
3. Hindari Penggunaan innerHTML di JavaScript
Jika Anda menggunakan JavaScript untuk memasukkan teks ke dalam elemen HTML, pastikan tidak menggunakan innerHTML jika hanya ingin menampilkan teks biasa. innerHTML akan merender tag HTML apa adanya. Sebagai gantinya, gunakan textContent atau innerText.
Contoh penggunaan yang tepat di JavaScript:
$$
javascriptCopy codedocument.getElementById("myDiv").textContent = "<p>Hello World</p>";
$$
Ini akan memastikan bahwa tag <p> tidak ditampilkan sebagai HTML.
4. Konfigurasi Editor Teks WYSIWYG
Jika Anda menggunakan editor teks WYSIWYG pada dashboard atau panel admin, seperti CKEditor atau TinyMCE, cek pengaturan editor tersebut. Editor seperti ini sering kali menambahkan tag HTML secara otomatis, termasuk tag <p>. Pastikan untuk mengkonfigurasi editor agar tidak menambahkan tag yang tidak diperlukan atau menggunakan plugin sanitasi untuk membersihkan teks.
5. Bersihkan Data dari Backend
Untuk memastikan data aman dari tag HTML yang tidak diinginkan, Anda bisa membersihkan data dari backend sebelum dikirim ke frontend. Gunakan library seperti HTML Purifier untuk PHP, yang dapat menyaring tag HTML berbahaya atau tidak diperlukan dari teks yang diterima sistem.
Contoh penggunaan HTML Purifier di PHP:
$$
phpCopy code$config = HTMLPurifier_Config::createDefault();
$purifier = new HTMLPurifier($config);
$clean_html = $purifier->purify($raw_html);
$$
Kesimpulan
Kemunculan tag HTML seperti <p> di dashboard bisa terjadi karena beberapa alasan, termasuk kurangnya sanitasi input, kesalahan penggunaan innerHTML, atau konfigurasi yang kurang tepat pada template engine atau editor teks. Dengan menerapkan solusi di atas, Anda dapat memastikan bahwa teks yang tampil di aplikasi web Anda bersih dari tag HTML yang tidak diinginkan.
