Apa Itu Clickjacking dan Cara Mencegahnya di Website

Pernahkah kamu mengklik tombol "Tutup" di sebuah iklan, lalu ternyata yang terklik adalah sesuatu yang lain? Itulah gambaran sederhana clickjacking. Penyerang memasang halaman website asli di dalam bingkai (iframe) yang dibuat transparan, lalu menaruh tombol umpan di atasnya. Pengunjung mengira menekan tombol "Klaim hadiah", padahal yang sebenarnya diklik adalah tombol "Hapus akun", "Ubah email", atau "Setujui pembayaran" di situs aslimu.

Kabar baiknya, pencegahan clickjacking termasuk yang paling mudah di dunia keamanan website. Cukup kirim satu atau dua header HTTP yang memberi tahu browser bahwa halamanmu tidak boleh dibingkai oleh situs lain. Panduan ini menjelaskan cara kerjanya, lalu langkah memasangnya di server yang umum dipakai.

Bagaimana clickjacking bekerja?

Serangannya memanfaatkan fitur biasa di browser: halaman web boleh menampilkan halaman lain di dalam <iframe>. Penyerang membuat situs jebakan, memuat halamanmu di iframe, lalu memakai CSS untuk membuatnya transparan dan menempatkannya tepat di atas tombol umpan.

Karena pengunjung mungkin sedang login di situsmu, klik di iframe itu dijalankan dengan sesi miliknya. Tindakan yang bisa disalahgunakan antara lain mengubah pengaturan akun, menekan tombol suka atau ikuti, memberi izin kamera atau mikrofon pada aplikasi web, sampai mengonfirmasi transaksi satu klik.

Halaman yang paling berisiko adalah halaman yang punya tombol berdampak dan hanya butuh satu atau dua klik: dashboard akun, pengaturan, halaman konfirmasi, dan panel admin.

Langkah 1: Cek apakah websitemu bisa dibingkai

Jalankan perintah ini dari terminal untuk melihat header yang dikirim server:

curl -sI https://domainkamu.com | grep -iE 'x-frame-options|content-security-policy'

Kalau tidak ada keluaran sama sekali, websitemu belum punya perlindungan. Kamu juga bisa menguji langsung dengan membuat file HTML sederhana di komputer:

<iframe src="https://domainkamu.com" width="800" height="600"></iframe>

Buka file itu di browser. Bila halamanmu tampil di dalam bingkai, berarti situs lain juga bisa melakukannya. Bila browser menolak menampilkan, perlindungan sudah aktif.

Langkah 2: Pilih aturan yang tepat

Ada dua header yang dipakai, dan OWASP menyarankan memakai keduanya untuk perlindungan menyeluruh¹:

• Content-Security-Policy: frame-ancestors adalah cara modern. Nilai 'none' melarang semua pembingkaian, 'self' hanya mengizinkan domainmu sendiri, dan kamu bisa menambah domain lain yang dipercaya².
• X-Frame-Options adalah header lama yang masih berguna untuk browser lawas. Nilai yang dipakai DENY atau SAMEORIGIN. Nilai ALLOW-FROM sudah usang dan tidak didukung browser modern, jadi jangan dipakai³.

Untuk kebanyakan website bisnis, pilihan amannya adalah frame-ancestors 'self' dan X-Frame-Options: SAMEORIGIN. Pakai 'none' dan DENY bila websitemu sama sekali tidak memakai iframe dari domain sendiri.

Langkah 3: Pasang header di server

Apache atau hosting cPanel

Tambahkan ke file .htaccess di folder utama website (membutuhkan modul mod_headers, yang umumnya sudah aktif di hosting):

<IfModule mod_headers.c>
  Header always set X-Frame-Options "SAMEORIGIN"
  Header always set Content-Security-Policy "frame-ancestors 'self'"
</IfModule>

Nginx

Tambahkan di blok server lalu uji dan muat ulang konfigurasi:

add_header X-Frame-Options "SAMEORIGIN" always;
add_header Content-Security-Policy "frame-ancestors 'self'" always;

sudo nginx -t && sudo systemctl reload nginx

Perlu diingat, di Nginx add_header dari blok luar tidak diwariskan ke blok location yang punya add_header sendiri. Bila ada location seperti itu, tambahkan header di sana juga.

Cloudflare

Bila domain memakai proxy Cloudflare, header bisa ditambahkan tanpa menyentuh server lewat fitur Transform Rules untuk mengubah response header.

Langkah 4: Perhatikan bila sudah punya CSP

Kalau websitemu sudah mengirim header Content-Security-Policy untuk keperluan lain, jangan menambah header CSP kedua secara asal. Tambahkan direktif frame-ancestors ke kebijakan yang sudah ada, dipisah titik koma. Contoh:

Content-Security-Policy: default-src 'self'; frame-ancestors 'self'

Satu hal penting: direktif frame-ancestors tidak berlaku bila ditulis di tag <meta http-equiv> di HTML². Ia harus dikirim sebagai header HTTP dari server. Pembahasan header keamanan lain seperti HSTS dan CSP lengkap ada di cara memasang security headers.

Langkah 5: Uji ulang dan cek fitur yang memakai iframe

Ulangi perintah curl di langkah 1 dan pastikan kedua header muncul. Buka lagi file HTML uji, halamanmu seharusnya tidak lagi tampil di dalam bingkai.

Setelah itu cek bagian website yang memang memakai iframe: pratinjau tema di panel CMS, widget yang ditanam di situs mitra, atau halaman yang sengaja disematkan di aplikasi lain. Bila ada yang rusak, tambahkan domain yang dipercaya ke frame-ancestors, misalnya frame-ancestors 'self' https://mitra.example.com. WordPress sendiri sudah mengirim X-Frame-Options: SAMEORIGIN di halaman login dan admin, jadi pratinjau di dalam dashboard tetap berjalan dengan pengaturan SAMEORIGIN.

Pertahanan tambahan

Header di atas adalah perlindungan utama. Beberapa lapisan lain membantu:

• Cookie SameSite. Cookie sesi dengan atribut SameSite=Lax atau Strict tidak dikirim saat halaman dimuat di iframe situs lain, sehingga pengunjung terlihat belum login di dalam bingkai.
• Konfirmasi untuk tindakan penting. Minta password ulang atau kode 2FA untuk mengubah email, password, dan rekening.
• Lindungi juga dari CSRF. Clickjacking dan CSRF sama-sama memanfaatkan sesi pengguna. Penjelasannya ada di apa itu CSRF.

Ringkasan pilihan header

Checklist singkat:

• Header Content-Security-Policy dengan frame-ancestors terkirim dari server.
• Header X-Frame-Options bernilai DENY atau SAMEORIGIN.
• Hasil uji iframe menunjukkan halaman ditolak dibingkai.
• Fitur yang sah memakai iframe tetap berjalan.
• Tindakan penting meminta konfirmasi ulang.

Untuk gambaran celah web lain yang perlu diwaspadai, lihat OWASP Top 10 untuk pemilik website.