Pengantar

Clickjacking adalah serangan yang dapat menipu pengguna agar mengklik elemen yang sebenarnya berbeda dari yang terlihat.

Serangan ini juga dikenal sebagai UI Redressing. Attacker memanfaatkan tampilan website untuk menyamarkan halaman atau tombol yang menjadi target.

Sebagai contoh, pengguna melihat tombol “Putar Video”. Namun, tombol tersebut sebenarnya berada di atas tombol lain. Ketika pengguna mengkliknya, tindakan yang tidak disadari dapat terjadi.

Clickjacking biasanya memanfaatkan <iframe> untuk menampilkan halaman target di dalam website milik attacker. Karena itu, perlindungan terhadap framing menjadi bagian penting dalam pencegahannya. (dikutip dari: OWASP – Clickjacking Defense Cheat Sheet)

Apa Itu Clickjacking?

Clickjacking adalah teknik serangan yang memanipulasi antarmuka agar pengguna melakukan klik tanpa menyadari target sebenarnya.

Istilah ini berasal dari gabungan kata:

  • Click → tindakan klik pengguna.
  • Jacking → mengambil alih atau memanipulasi tindakan tersebut.

Dalam serangan tertentu, website asli ditempatkan di dalam <iframe>. Attacker kemudian membuat tampilan palsu di atasnya.

baca juga : DNS-over-HTTPS (DoH) vs DNS-over-TLS (DoT): Mana yang Lebih Aman untuk Privasi Internet?

Bagaimana Clickjacking Bekerja?

Serangan clickjacking biasanya melibatkan beberapa komponen.

1. Attacker Membuat Website Palsu

Attacker membuat halaman yang terlihat menarik atau meyakinkan.

Contohnya:

“Klik untuk mendapatkan hadiah!”

Tujuannya adalah membuat korban tertarik untuk mengklik halaman tersebut.

2. Website Target Dimasukkan ke iframe

Attacker kemudian mencoba memasukkan website target menggunakan <iframe>.

Contohnya:

<iframe src=“https://target.example”></iframe>

Jika website target mengizinkan framing, halaman tersebut dapat muncul di dalam website attacker.

3. Tampilan Target Disamarkan

Attacker dapat mengatur posisi dan tampilan elemen.

Tujuannya adalah membuat pengguna tidak menyadari keberadaan iframe.

4. Korban Melakukan Klik

Korban mengklik tombol yang terlihat.

Namun, klik tersebut dapat diteruskan ke elemen pada website target.

Contoh Skenario Clickjacking

Bayangkan pengguna sudah login ke sebuah website.

Website tersebut memiliki tombol:

[ Ubah Pengaturan ]

Attacker membuat website dengan pesan:

Klik untuk mendapatkan hadiah!

Di balik tampilan tersebut, attacker mencoba menempatkan halaman target.

Jika perlindungan framing tidak tersedia, klik korban dapat mengenai tombol pada website target.

Akibatnya, pengguna dapat melakukan tindakan yang sebenarnya tidak mereka inginkan.

Mengapa Clickjacking Berbahaya?

Dampak clickjacking bergantung pada fungsi yang tersedia di website target.

Beberapa risiko yang mungkin terjadi antara lain:

  • Mengubah pengaturan akun.
  • Mengaktifkan fitur tertentu.
  • Mengirim formulir.
  • Memberikan persetujuan.
  • Melakukan tindakan pada akun yang sedang login.
  • Mengubah preferensi pengguna.

Risikonya menjadi lebih serius jika target memiliki fungsi sensitif.

Sebagai contoh, akun yang sudah login dapat memiliki hak untuk mengubah data atau konfigurasi. Dalam kondisi tersebut, satu klik yang tertipu dapat menghasilkan perubahan yang tidak diinginkan.

Clickjacking vs Phishing

Clickjacking dan phishing sering dianggap sama. Padahal, keduanya memiliki mekanisme berbeda.

Phishing

Phishing biasanya membuat korban memasukkan informasi ke website palsu.

Contohnya:

Website palsu
↓
“Masukkan username dan password”
↓
Data dicuri

Clickjacking

Clickjacking lebih berfokus pada manipulasi klik.

Website attacker
↓
Tampilan menipu
↓
Korban melakukan klik
↓
Aksi pada website target

Dengan demikian, phishing lebih sering berusaha mencuri informasi, sedangkan clickjacking dapat digunakan untuk memanipulasi tindakan pengguna.

baca juga : HTTP/2 Server Push vs Preload: Mana yang Lebih Efektif untuk Mempercepat Website?

Apa Hubungan Clickjacking dengan iframe?

Elemen <iframe> menjadi bagian penting dalam banyak skenario clickjacking.

Iframe memungkinkan sebuah halaman menampilkan halaman lain di dalam dokumennya.

Contohnya:

<iframe src=“https://example.com”></iframe>

Jika website target dapat dimuat dalam iframe dari domain yang tidak dipercaya, attacker memiliki peluang untuk membuat UI yang menipu.

Karena itu, salah satu pertahanan utama adalah membatasi website mana yang boleh melakukan embedding.

MDN menjelaskan bahwa frame-ancestors dapat digunakan untuk menentukan dokumen mana yang diperbolehkan melakukan embedding terhadap sebuah halaman. (dikutip dari: MDN – Clickjacking)

Cara Mencegah Clickjacking

Ada beberapa lapisan perlindungan yang dapat digunakan.

Content Security Policy

Salah satu mekanisme utama adalah Content Security Policy (CSP).

CSP memiliki directive bernama:

frame-ancestors

Directive tersebut dapat menentukan siapa yang boleh melakukan framing terhadap website.

Jika website tidak perlu ditampilkan dalam iframe, konfigurasi berikut dapat digunakan:

Content-Security-Policy: frame-ancestors ‘none’;

Dengan konfigurasi tersebut, website tidak mengizinkan dirinya dimuat dalam frame.

OWASP merekomendasikan frame-ancestors sebagai mekanisme utama untuk membatasi framing.

Menggunakan frame-ancestors 'self'

Tidak semua website harus melarang iframe sepenuhnya.

Jika website hanya boleh dimuat oleh halaman dari origin yang sama, konfigurasi berikut dapat digunakan:

Content-Security-Policy: frame-ancestors ‘self’;

Artinya, hanya halaman dari origin yang sama yang diperbolehkan melakukan framing.

Pendekatan ini cocok untuk aplikasi yang memang membutuhkan iframe internal.

Menggunakan X-Frame-Options

Selain CSP, website dapat menggunakan header

X-Frame-Options: DENY

Konfigurasi tersebut melarang halaman dimuat di dalam frame.

Alternatif lainnya adalah:

X-Frame-Options: SAMEORIGIN

Konfigurasi tersebut hanya mengizinkan framing dari origin yang sama.

Namun, X-Frame-Options memiliki kemampuan yang lebih terbatas dibandingkan frame-ancestors. Karena itu, CSP frame-ancestors menjadi pilihan yang lebih fleksibel pada browser modern.

Jangan Memasang X-Frame-Options sebagai Meta Tag

Kesalahan yang sering terjadi adalah memasukkan X-Frame-Options ke dalam HTML.

Contohnya:

<meta http-equiv=“X-Frame-Options” content=“DENY”>

Cara tersebut tidak memberikan perlindungan yang benar.

X-Frame-Options harus dikirim sebagai HTTP response header.

OWASP secara khusus menyebut bahwa penggunaan meta tag untuk X-Frame-Options tidak berfungsi sebagai perlindungan clickjacking.

Perlindungan dengan SameSite Cookie

Clickjacking juga dapat dikurangi dengan konfigurasi cookie yang tepat.

Salah satu atribut yang penting adalah.

SameSite

Contohnya:

Set-Cookie: session=abc123; SameSite=Lax; Secure; HttpOnly

SameSite membantu mengontrol kapan cookie dapat dikirim dalam konteks lintas situs.

Namun, perlindungan ini sebaiknya dianggap sebagai lapisan tambahan, bukan pengganti frame-ancestors.

OWASP dan MDN sama-sama merekomendasikan penggunaan beberapa lapisan perlindungan untuk menghadapi clickjacking.

Apakah JavaScript Bisa Mencegah Clickjacking?

Dahulu, developer sering menggunakan teknik yang disebut frame-busting.

Contohnya adalah script yang memeriksa apakah halaman sedang berada di dalam iframe.

Namun, pendekatan tersebut tidak sebaik perlindungan berbasis HTTP header.

Attacker dapat menemukan cara untuk melewati implementasi JavaScript tertentu.

Karena itu, perlindungan sebaiknya dilakukan pada level response header.

OWASP juga menempatkan frame-busting sebagai pendekatan tambahan, terutama untuk kondisi tertentu, bukan sebagai pertahanan utama.

Cara Melindungi Website WordPress

Website WordPress juga dapat dilindungi dari clickjacking.

Salah satu pendekatan adalah menambahkan security header melalui server atau konfigurasi keamanan.

Contoh header:

Content-Security-Policy: frame-ancestors ‘self’;
X-Frame-Options: SAMEORIGIN

Jika website tidak membutuhkan iframe sama sekali, kebijakan dapat dibuat lebih ketat:

Content-Security-Policy: frame-ancestors ‘none’;
X-Frame-Options: DENY

Namun, konfigurasi harus disesuaikan dengan kebutuhan website.

Misalnya, jika WordPress menggunakan layanan tertentu yang membutuhkan embedding, frame-ancestors 'none' dapat menyebabkan fitur tersebut tidak berfungsi.

Cara Mengecek Perlindungan Clickjacking

Administrator dapat memeriksa HTTP response header website.

Gunakan browser DevTools:

F12
↓
Network
↓
Pilih halaman
↓
Response Headers

Kemudian cari:

Content-Security-Policy
X-Frame-Options

Jika terdapat konfigurasi seperti:

Content-Security-Policy: frame-ancestors ‘none’

website telah memiliki pembatasan framing.

Pemeriksaan juga dapat dilakukan menggunakan security header scanner.

Praktik Terbaik Mencegah Clickjacking

Untuk mendapatkan perlindungan yang lebih baik, gunakan beberapa lapisan keamanan.

Gunakan CSP

Prioritaskan:

Content-Security-Policy: frame-ancestors ‘none’;

Jika website membutuhkan framing internal, gunakan:

Content-Security-Policy: frame-ancestors ‘self’;

Gunakan X-Frame-Options

Untuk kompatibilitas tambahan, gunakan:

X-Frame-Options: DENY

atau:

X-Frame-Options: SAMEORIGIN

Atur Cookie

Gunakan atribut:

SameSite=Lax

atau:

SameSite=Strict

sesuai kebutuhan aplikasi.

Gunakan HTTPS

HTTPS melindungi komunikasi antara browser dan server.

Walaupun HTTPS tidak secara langsung mencegah clickjacking, penggunaannya tetap penting dalam keamanan website secara keseluruhan.

Kesalahan yang Harus Dihindari

Beberapa kesalahan dapat membuat perlindungan menjadi kurang efektif.

Hanya Mengandalkan JavaScript

Frame-busting script bukan pilihan utama.

Gunakan security headers sebagai lapisan pertama.

Menggunakan Meta Tag

Jangan menggunakan:

<meta http-equiv=“X-Frame-Options” content=“DENY”>

Gunakan HTTP response header.

Mengizinkan Semua Domain

Konfigurasi framing yang terlalu longgar dapat meningkatkan risiko.

Jika iframe memang diperlukan, batasi hanya pada domain yang dipercaya.

Tidak Memeriksa Cookie

Session cookie juga perlu dikonfigurasi dengan baik.

Gunakan SameSite sesuai kebutuhan aplikasi.

Clickjacking dalam Keamanan Website

Clickjacking merupakan salah satu contoh bahwa keamanan website tidak hanya berkaitan dengan password dan autentikasi.

Antarmuka pengguna juga perlu dilindungi.

Sebuah aplikasi dapat memiliki autentikasi yang kuat. Namun, jika halaman sensitif bebas dimuat oleh website lain, attacker masih dapat mencoba memanipulasi interaksi pengguna.

Karena itu, keamanan modern membutuhkan beberapa lapisan.

Authentication
+
Authorization
+
Security Headers
+
Cookie Security
+
HTTPS
↓
Perlindungan Website

Pendekatan seperti ini dikenal sebagai defense in depth.

baca juga : Centralized Identity Provider (IdP): Cara Kerja dan Perannya dalam Keamanan Akses Digital

Kesimpulan

Clickjacking atau UI Redressing adalah serangan yang memanfaatkan manipulasi tampilan untuk menipu pengguna agar melakukan klik tertentu.

Serangan tersebut sering memanfaatkan iframe. Oleh karena itu, membatasi website yang boleh melakukan framing menjadi langkah penting.

Untuk perlindungan utama, gunakan Content Security Policy dengan frame-ancestors. Sebagai lapisan tambahan, gunakan X-Frame-Options dan konfigurasi cookie SameSite. OWASP merekomendasikan beberapa mekanisme tersebut sebagai bagian dari defense in depth.

Website WordPress juga perlu memperhatikan konfigurasi security headers. Selain itu, administrator sebaiknya memeriksa response header secara berkala.

Dengan konfigurasi yang tepat, risiko clickjacking dapat dikurangi secara signifikan. Keamanan tersebut menjadi semakin penting untuk halaman yang memiliki tombol, formulir, atau fungsi sensitif.

Related Posts: