HTML Injection menjadi salah satu serangan web yang sering diabaikan, padahal dampaknya bisa sangat serius bagi sebuah aplikasi. Di dunia pemrograman modern, terutama bagi mahasiswa IT, pelajar, dan programmer yang membangun atau mengelola website, memahami serangan ini adalah sebuah keharusan.
HTML Injection bukan hanya sekadar “bug visual”, tetapi bisa menjadi pintu masuk untuk manipulasi konten, pencurian data, ataupun eksploitasi lanjutan jika dipadukan dengan teknik lain. Karena itulah, artikel ini membahas HTML Injection secara lengkap dan mudah dipahami.
Apa Itu HTML Injection?
HTML Injection adalah sebuah celah keamanan pada aplikasi web yang memungkinkan seorang attacker memasukkan kode HTML berbahaya ke dalam halaman web. Kode HTML yang disisipkan ini nantinya akan di-render oleh browser seolah-olah itu adalah bagian asli dari halaman. Serangan ini terjadi ketika input user tidak diproses atau difilter dengan benar, sehingga kode HTML yang dimasukkan oleh attacker tidak dibersihkan dan langsung ditampilkan kepada pengguna lain.
HTML Injection sering disamakan dengan XSS (Cross Site Scripting), padahal keduanya memiliki perbedaan yang signifikan. Jika XSS mengizinkan attacker menyisipkan kode JavaScript, HTML Injection fokus pada penyisipan elemen HTML, seperti <h1>, <p>, <img>, hingga <form>. Meskipun terlihat lebih sederhana dibandingkan XSS, HTML Injection tetap berbahaya karena attacker bisa memanipulasi tampilan halaman, membuat fake form untuk mencuri data, menempatkan script via event handler HTML tertentu, atau memodifikasi struktur UI untuk mengarahkan user ke tindakan salah. Bahkan HTML Injection bisa menjadi pintu awal sebelum attacker meningkatkan serangannya ke XSS.
Bagaimana HTML Injection Terjadi?
Proses terjadinya HTML Injection biasanya mengikuti alur seperti ini:
- Attacker menemukan area input
Area input bisa berupa form pendaftaran, form komentar, kolom pencarian, atau parameter pada URL. Semua tempat yang menerima input user berpotensi menjadi titik serangan jika tidak ditangani dengan benar. - Attacker memasukkan payload HTML
Payload ini bisa berupa tag<b>,<img>,<iframe>,<script>tersembunyi melalui atribut event, atau elemen lain yang dapat memanipulasi halaman. - Aplikasi tidak mem-filter input
Jika aplikasi tidak melakukan sanitasi, encoding, atau escaping karakter tertentu, maka input tersebut dianggap sebagai HTML biasa. - Server mengembalikan input ke browser
Browser menampilkan input tersebut sebagai bagian asli dari HTML halaman. - HTML berbahaya berhasil berjalan
Hasil akhirnya, tampilan halaman berubah sesuai keinginan attacker—bisa menjadi fake login form, iklan palsu, redirect tersembunyi, atau manipulasi visual lain.
Karena prosesnya relatif sederhana, HTML Injection sering menjadi serangan favorit bagi attacker pemula. Namun meski sederhana, dampaknya sangat serius, terutama jika halaman yang terkena adalah halaman penting seperti halaman login atau halaman dashboard user.
Jenis–Jenis HTML Injection
HTML Injection terbagi menjadi beberapa jenis utama berdasarkan bagaimana payload diproses oleh aplikasi, diataranya:
1. HTML Injection Reflected
Serangan ini terjadi ketika data yang disuntikkan attacker langsung muncul kembali (reflected) kepada pengguna melalui respons server. Misalnya, ketika kamu mengetik sesuatu di search bar dan input tersebut ditampilkan kembali di hasil pencarian tanpa filter. Pada jenis ini, payload hanya tampil kepada user yang mengakses URL atau halaman dengan parameter berbahaya. Serangan reflected biasanya digunakan dalam skenario phishing, di mana attacker mengirimkan link berbahaya kepada korban.
2. HTML Injection Stored
Ini adalah jenis HTML Injection yang paling berbahaya. Payload disimpan di database dan ditampilkan kepada semua user yang mengakses halaman terkait. Contoh kasus yang sering terjadi adalah ketika seseorang mengirim komentar HTML di kolom komentar blog WordPress. Begitu komentar tersimpan, setiap pengunjung yang membuka halaman tersebut akan melihat manipulasi HTML yang disisipkan. Karena sifatnya persisten, jenis ini berpotensi digunakan untuk serangan phishing massal atau manipulasi tampilan website dalam jangka panjang.
3. HTML Injection DOM-Based
Serangan ini terjadi di sisi client, bukan di sisi server. Serangan DOM-based terjadi ketika JavaScript di browser mengambil input user dan langsung memasukkannya ke halaman tanpa melakukan sanitasi. Contoh yang sering terjadi adalah ketika script JavaScript menggunakan innerHTML untuk menampilkan data user. Ketika attacker berhasil memanipulasi input, kode HTML berbahaya segera diproses oleh browser. Jenis ini semakin sering muncul di aplikasi modern yang heavily-dependent pada JavaScript.
Mengapa HTML Injection Berbahaya?
Dampak utama HTML Injection meliputi:
1. Manipulasi Tampilan Halaman
Attacker bisa mengubah struktur halaman, menambahkan teks palsu, membuat popup palsu, atau membuat element HTML yang tidak seharusnya ada. Ini dapat membuat user salah memahami informasi atau mengklik sesuatu yang tidak aman.
2. Phishing Berbasis HTML
Attacker dapat menambahkan form login palsu di dalam halaman asli. Karena tampilan form sama persis dengan website, user yang tidak berhati-hati bisa memasukkan email dan password mereka, yang kemudian dikirim ke attacker.
3. Pencurian Data dan Sessions
Meskipun HTML Injection sendiri tidak menjalankan JavaScript, attacker bisa memanfaatkan atribut event HTML seperti onerror, onclick, atau onload untuk memasukkan script sederhana. Ini bisa mengarah pada pencurian cookie atau token.
4. Merusak Reputasi Website
Jika sebuah website terlihat rusak atau memunculkan konten aneh akibat HTML Injection, user akan kehilangan kepercayaan. Ini sangat berpengaruh bagi website e-commerce, portal kampus, atau platform komunitas.
5. Menjadi Celah untuk Serangan Lanjutan
HTML Injection bisa menjadi batu loncatan menuju serangan lebih berat, terutama jika digunakan untuk mem-bypass filter keamanan atau memanipulasi DOM untuk memasukkan script tambahan.
Cara Kerja HTML Injection (Step-by-Step)
Berikut adalah tahapan lengkap cara kerja HTML Injection:
- Attacker Menemukan Input yang Tidak Difilter
Proses biasanya dimulai ketika attacker menemukan kolom input yang menerima data dari user. Ini bisa berupa form komentar, kolom pencarian, halaman feedback, atau parameter di URL. Attacker biasanya mencoba memasukkan karakter khusus seperti<,>,",', atau tag HTML untuk melihat apakah input tersebut diproses apa adanya. - Memasukkan Payload HTML Berbahaya
Setelah mengetahui bahwa input tidak disaring, attacker mulai mencoba payload HTML. Contohnya seperti<h1>Hacked</h1>untuk tes sederhana, atau tag<iframe>untuk menanam halaman phishing. Pada tahap ini, attacker mulai menguji batas filter aplikasi. - Aplikasi Tidak Melakukan Validasi atau Escaping
Inilah inti masalah. Ketika aplikasi menampilkan kembali input user tanpa proses sanitasi maupun encoding, maka browser akan menganggap input tersebut sebagai bagian dari struktur HTML yang sah. - Browser Merender Payload Sebagai HTML Asli
Setelah respons diterima, browser akan merender HTML tersebut dan menghasilkan tampilan yang dimodifikasi sesuai input attacker. Pada kasus tertentu, event handler HTML sepertionerroratauonclickbisa menjalankan script tambahan. - Serangan Berhasil Berjalan di Halaman Korban
Pada tahap akhir, user yang melihat halaman tersebut akan melihat tampilan yang telah dimanipulasi. Jika attacker menyisipkan fake form atau gambar tertentu, ini bisa mengecoh user untuk memberikan data sensitif.
Jika aplikasi menyimpan input tersebut (stored injection), maka seluruh pengunjung halaman menjadi korban. Sedangkan jika sistem hanya menampilkan input sementara (reflected), maka korban muncul jika user membuka URL yang telah dimodifikasi.
Teknik Umum yang Dipakai Attacker
1. Manipulasi Input HTML
Teknik paling dasar adalah mencoba tag HTML secara langsung. Attacker mengetik elemen seperti <b>Test</b> atau <marquee> untuk memastikan apakah input dapat dirender. Jika hasilnya tampil apa adanya, attacker tahu bahwa website rentan dan siap melanjutkan dengan payload lebih berbahaya.
2. Menggunakan Karakter Bypass Filter
Beberapa filter hanya memblokir tag <script>, sehingga attacker menggunakan tag lain seperti <img src=x onerror=alert(1)> atau <svg onload=alert(1)> untuk menghindari filter. Meskipun serangannya sederhana, ini sering berhasil pada sistem yang sanitasi inputnya tidak komprehensif.
3. Encoding Payload
Attacker juga bisa melakukan encoding karakter menjadi HTML entities seperti < atau < agar melewati filter otomatis. Setelah itu browser akan mendecode karakter tersebut dan merender HTML sesuai bentuk aslinya. Teknik ini sangat efektif di aplikasi yang hanya memfilter karakter dasar tetapi tidak memfilter encoding.
Perbandingan HTML Injection vs XSS
Berikut tabel perbandingan lengkap:
| Aspek | HTML Injection | XSS (Cross-Site Scripting) |
|---|---|---|
| Kode yang disisipkan | HTML (tag, elemen, struktur) | JavaScript (fungsi, event, script berbahaya) |
| Tingkat bahaya | Menengah — bisa menjadi tinggi tergantung payload | Sangat tinggi — bisa mencuri cookie, token, session |
| Tujuan serangan | Manipulasi tampilan & phishing | Eksekusi script dan pencurian data |
| Cara kerja | Browser merender input sebagai HTML | Browser menjalankan script berbahaya |
| Penyebab utama | Input HTML tidak disanitasi | JavaScript tidak difilter |
| Contoh | Fake form, modifikasi UI | Keylogger, cookie stealing, session hijacking |
| Hubungan keduanya | Bisa menjadi langkah awal menuju XSS | Merupakan level eksploitasi yang lebih berbahaya |
Cara Mencegah HTML Injection
Berikut adalah langkah-langkah pencegahannya:
1. Sanitasi Input
Sanitasi input berarti membersihkan input user dari karakter atau tag HTML yang berbahaya. Misalnya, semua tag < dan > harus di-escape atau diblokir sepenuhnya. Banyak framework modern menyediakan fungsi sanitasi otomatis.
2. Validasi Input
Validasi memastikan hanya data yang sesuai format yang diterima. Misalnya, jika input hanya menerima angka, maka karakter lain harus ditolak. Dengan validasi ketat, serangan HTML Injection menjadi jauh lebih sulit dilakukan.
3. Escape Output
Ini adalah langkah paling penting. Escape output memastikan bahwa semua nilai yang ditampilkan ke halaman tidak diperlakukan sebagai HTML, tetapi sebagai teks biasa. Misalnya, di PHP kamu bisa menggunakan htmlspecialchars().
4. Gunakan Library Security
Library seperti OWASP ESAPI atau fungsi sanitasi bawaan framework dapat memastikan input selalu aman. Menggunakan library standar lebih aman daripada membuat filter sendiri.
5. Gunakan WAF (Web Application Firewall)
WAF membantu memblokir payload HTML dan mengurangi risiko serangan. WAF modern dapat mendeteksi pola input mencurigakan dan memblokirnya sebelum mencapai server.
Kesimpulan
Pada pembahasan kita di atas dapat kita simpulkan bahwa HTML Injection mungkin terlihat seperti celah kecil yang sering diremehkan oleh banyak developer pemula, tetapi pada kenyataannya, serangan ini bisa membuka pintu menuju berbagai eksploitasi lain yang jauh lebih berbahaya. HTML Injection terjadi ketika aplikasi web tidak memproses input user dengan benar dan malah merendernya sebagai HTML murni.
Pencegahan HTML Injection sebenarnya cukup straightforward jika dilakukan dengan pendekatan yang tepat: sanitasi input, validasi input, escape output, gunakan library keamanan, serta melengkapi sistem dengan WAF. Setiap developer harus menganggap semua input dari user sebagai potensi serangan sampai input tersebut divalidasi secara menyeluruh. Jangan pernah mengasumsikan bahwa user akan selalu memasukkan data yang aman.
Artikel ini merupakan bagian seri artikel Programming dari KantinIT.com dan jika ada ide topik yang mau kami bahas silahkan komen di bawah ya..
