JavaScript - Serangan Clickjacking
Hai, para pemrogram yang sedang belajar! Hari ini, kita akan mendalam ke dunia menarik keamanan web, khususnya fokus pada trik kecil yang licik yang disebut Clickjacking. Jangan khawatir jika Anda baru dalam programming - saya akan mengarahkan Anda melalui topik ini langkah demi langkah, sama seperti yang saya lakukan bagi banyak siswa selama tahun-tahun mengajar saya. Jadi, mari kita mulai!
Serangan Clickjacking
Imaginasikan Anda tentang untuk mengklik video kucing yang lucu, tapi malah memesan 100 bebek karet. Itu sebenarnya apa yang dilakukan serangan clickjacking - itu menipu Anda untuk mengklik sesuatu yang Anda tak kehendaki.
Clickjacking, juga dikenal sebagai UI redressing, adalah teknik berbahaya yang digunakan oleh penyerang untuk menipu pengguna untuk mengklik sesuatu yang berbeda dari apa yang mereka khawatirkan mereka mengklik. Ini bisa mengarah ke aksi yang tidak dikehendaki, pencurian data, atau bahkan instalasi malware.
Bagaimana clickjacking bekerja?
Sekarang, mari kitauraikan bagaimana serangan licik ini benar-benar bekerja:
- Penyerang menciptakan halaman web yang tampak tak berbahaya.
- Mereka menanamkan situs target (itu 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 interaksi dengan situs target yang tersembunyi.
Itu seperti trik tangan sihir pengguna, tapi dengan halaman web!
Contoh
mari lihat beberapa contoh kode untuk memahami konsep ini lebih baik. Jangan khawatir jika Anda belum mengerti segalanya - kita akan memecahnya!
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 decoy yang menjanjikan hadiah.
- Kita menanamkan 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 delete account 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 diedit</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) ditanamkan dalam iframe yang tak terlihat.
- Ketika pengguna mencoba untuk menyeret dan menjatuhkan gambar, mereka mungkin tanpa kehendak interaksi dengan situs target, potensialnya mengungkapkan informasi pribadi.
Insiden Serangan Clickjacking Dunia Nyata
Clickjacking bukan hanyaancaman teoritis. Itu telah digunakan dalam serangan dunia nyata:
- Pada tahun 2008, worm clickjacking menyebar melalui Facebook, membuat pengguna tanpa kehendak mengklik tombol "Like" di halaman tertentu.
- Pada tahun 2012, peneliti menunjukkan serangan clickjacking pada pasar aplikasi Google Android yang dapat menipu pengguna untuk membeli aplikasi tanpa pengetahuan mereka.
- Pada tahun 2017, kerentanan clickjacking ditemukan di Microsoft Outlook Web App, memungkinkan penyerang untuk membaca email korban.
Insiden ini menunjukkan betapa pentingnya untuk memahami dan mencegah serangan clickjacking.
Tindakan Pencegahan
Sekarang kita tahu bahaya nya, mari kita lihat bagaimana kita dapat menjaga dari serangan clickjacking:
| Metode | Deskripsi | Contoh |
|---|---|---|
| X-Frame-Options | Header HTTP yang menghindari halaman ditampilkan di iframe | X-Frame-Options: DENY |
| Content Security Policy | Memungkinkan kontrol yang lebih halus atas sumber mana yang dapat menanamkan 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 itu 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 serangan baru muncul, kita harus terus memperbarui pertahanan kita. Tetap semangat, terus belajar, dan selalu prioritas keamanan dalam perjalanan pengembangan web Anda!
Saya harap tutorial ini membantu Anda memahami serangan clickjacking. Ingat, dengan kekuatan coding yang besar datang tanggung jawab yang besar. Gunakan keterampilan Anda bijaksana, dan selamat coding!
Credits: Image by storyset