Digital Transformation
Clickjacking (UI Redress Attack)
Clickjacking, atau UI redress attack, adalah serangan yang menempatkan situs target di dalam iframe hampir transparan lalu memasang elemen memikat di atasnya. Klik yang dikira pengguna menuju tombol biasa justru diteruskan ke aksi di situs target. Pertahanan utamanya adalah header X-Frame-Options dan direktif frame-ancestors pada Content Security Policy.
Apa itu Clickjacking?
Clickjacking mengeksploitasi kepercayaan visual, bukan celah kode. Penyerang membungkus situs target di iframe yang dibuat nyaris tidak terlihat, misalnya dengan opacity: 0.01, lalu menaruh tombol atau gambar menarik di atas posisi elemen aslinya. Saat pengguna mengklik apa yang ia kira tombol "klaim hadiah", browser meneruskan klik itu ke iframe.
Jika pengguna sudah login di situs target, aksi seperti menyetujui izin, mengubah pengaturan, atau mengonfirmasi transaksi bisa tereksekusi tanpa ia sadari. Inilah yang membedakan clickjacking dari XSS: tidak ada kode jahat yang disuntikkan ke situs Anda, yang dibajak adalah niat klik penggunanya.
Pola Serangan dan Mitigasinya
| Pola | Cara kerja | Mitigasi server |
|---|---|---|
| Transparent overlay | Iframe situs target di-set hampir transparan | X-Frame-Options: DENY |
| Cursor spoofing | Kursor palsu digambar menyimpang dari posisi asli | frame-ancestors 'self' di CSP |
| Likejacking | Tombol share atau follow ditumpangi banner | Konfirmasi dua langkah untuk aksi sosial |
| Drag-and-drop hijack | Data ditarik keluar dari halaman target | Konfirmasi ulang untuk aksi sensitif |
Untuk aplikasi modern, direktif CSP frame-ancestors menggantikan peran X-Frame-Options karena lebih granular dan sudah didukung seluruh browser evergreen per 2026. Praktik yang aman: kirim keduanya, karena sebagian proxy dan webview lama masih hanya membaca header lawas.
Di Next.js, keduanya dipasang sekali di headers() pada next.config.ts sehingga berlaku untuk seluruh rute tanpa pengulangan konfigurasi.
Kenapa Penting?
Untuk landing page kampanye, dashboard klien, sampai halaman checkout, clickjacking merusak kepercayaan yang dibangun bertahun-tahun. Pola yang berulang muncul dalam audit yang dijalankan Vito Atmo: halaman login admin dibangun cepat, header keamanan tidak pernah dipasang, dan halaman itu tetap dapat disematkan di situs mana pun, termasuk situs phishing yang meniru halaman promosi resmi.
Perbaikannya murah. Menambahkan dua header di konfigurasi server menutup seluruh vektor ini tanpa mengubah satu baris pun kode aplikasi.
Pertanyaan Umum
Apakah melarang iframe mengganggu integrasi partner?
Bisa, jika layanan Anda memang perlu disematkan. Gunakan frame-ancestors https://partner.com untuk mengizinkan domain tertentu, bukan DENY total.
Apakah frame-busting berbasis JavaScript sudah cukup?
Tidak. Skrip frame-buster dapat dilumpuhkan lewat atribut sandbox pada iframe penyerang. Header server-side harus tetap menjadi pertahanan utama.
Bagaimana cara mengecek situs saya rentan?
Buka halaman yang ingin diuji lewat perkakas developer browser dan periksa response header-nya. Jika X-Frame-Options dan Content-Security-Policy sama-sama tidak muncul, halaman itu dapat disematkan siapa saja.
Istilah Terkait