Defaults.Exposed › Perbaikan › Perlindungan clickjacking (X-Frame-Options)

Cara memperbaiki Perlindungan clickjacking (X-Frame-Options)

Instruksi satu baris yang memberi tahu browser untuk tidak membiarkan website lain secara diam-diam memuat website Anda di dalam website mereka sendiri. Tanpanya, penipu bisa menyembunyikan halaman nyata Anda yang sudah login di balik halaman palsu dan mengelabui pelanggan Anda agar mengklik hal-hal yang tidak pernah mereka maksudkan — menyetujui pembayaran, mengubah kata sandi, memberikan akses.

Intinya bagi bisnis Anda: Penipu bisa secara tak terlihat membungkus website langsung Anda di dalam website palsu dan mencuri uang atau akses akun dari pelanggan yang sudah login — dan bagi pelanggan, tampak seperti website Anda yang melakukannya. Perbaikannya gratis dan butuh pengembang sekitar 15 menit; membiarkannya tidak aktif adalah celah yang diketahui yang bisa dideteksi dalam hitungan detik oleh kriminal maupun pembeli yang berhati-hati.

Kerugian yang dapat ditimbulkan

• Penipu menyembunyikan layar login atau pembayaran Anda yang sebenarnya di balik halaman yang tampak tidak berbahaya dan mengelabui pelanggan agar 'mengkonfirmasi' transfer atau perubahan pengaturan tanpa menyadarinya — pelanggan menyalahkan Anda, bukan penyerang.
• Area akun yang sudah login dimuat secara tak terlihat di atas halaman 'Anda menang — klik untuk mengklaim'; klik itu sebenarnya menyetujui perubahan nyata pada akun pelanggan, dan Anda yang menerima panggilan dukungan yang marah.
• Tim IT calon pelanggan menjalankan pemindaian keamanan cepat sebelum menandatangani, melihat website Anda bisa disematkan oleh siapa saja, dan menandainya sebagai risiko yang menghentikan atau membatalkan kesepakatan.
• Merek Anda menjadi umpan dalam kampanye penipuan; pelanggan yang tertipu mengingatnya sebagai 'perusahaan yang websitenya membiarkan itu terjadi'.
• Pemindaian auditor atau asuransi siber mencantumkan perlindungan clickjacking yang hilang sebagai kegagalan higienitas dasar — murah untuk diperbaiki, memalukan untuk ditandai.

Mengapa ini penting. Ini adalah pengaturan gratis satu baris yang butuh beberapa menit untuk ditambahkan, dan menutup seluruh kelas penipuan yang ditujukan pada pelanggan yang sudah login Anda. Dalam penilaian kami ini adalah pemeriksaan keamanan web yang bernilai poin nyata dan dinilai tingkat keparahan tinggi, karena header yang hilang meninggalkan lubang yang diketahui dan mudah diperiksa yang diotomatisasi oleh kriminal dan dicari oleh pembeli.

Penjelasan dalam bahasa sederhana

Ketika seseorang mengunjungi website Anda, browser mereka juga bisa diperintahkan untuk memuat website Anda di dalam website lain — seperti jendela kecil yang disematkan di dalam halaman yang lebih besar. Kedengarannya tidak berbahaya, dan kadang memang begitu. Tapi itulah mekanisme di balik serangan yang disebut clickjacking.

Begini caranya. Penipu membangun halaman mereka sendiri dan diam-diam memuat website Anda yang asli di dalamnya — secara tak terlihat, dibuat sepenuhnya transparan. Kemudian mereka menempatkan konten mereka sendiri di atasnya: tombol yang mencolok, “Putar video,” “Klaim hadiah Anda.” Pelanggan Anda melihat halaman penyerang dan mengklik apa yang tampak seperti tombol yang tidak berbahaya. Tapi karena website Anda yang asli duduk secara tak terlihat di bawah kursor mereka, klik sebenarnya mendarat di halaman Anda — mengkonfirmasi pembayaran, mengubah kata sandi, menyetujui akses, menerima izin. Pelanggan mengira mereka mengklik satu hal; mereka sebenarnya mengklik hal lain, di website yang mereka percaya.

Perlindungan clickjacking adalah instruksi pendek dan tak terlihat yang dikirimkan website Anda kepada browser setiap pengunjung yang mengatakan, intinya:

“Jangan biarkan website lain memuat saya di dalam mereka. Jika seseorang mencoba, tolak.”

Browser modern mematuhi ini secara otomatis. Dengan diaktifkan, triknya tidak berfungsi — salinan website Anda yang tertanam menolak untuk dimuat. Tanpanya, website Anda bisa digunakan sebagai lapisan tersembunyi dalam penipuan, dan pelanggan yang terkena akan mengaitkan semuanya dengan merek Anda, bukan merek penyerang.

Dampak finansial yang perlu diketahui

Berikut adalah skenario nyata sehari-hari. Kami tidak menyebut nama bisnis nyata; ini adalah ilustrasi bagaimana celah itu digunakan.

1. “Konfirmasi” yang tak terlihat. Pelanggan sudah login ke portal akun Anda di satu tab. Mereka mendarat di halaman (dari iklan, email, hasil pencarian) yang menjanjikan sesuatu yang menggiurkan dan menampilkan tombol besar “Lanjutkan”. Tersembunyi di balik tombol itu adalah kontrol “Konfirmasi transfer” atau “Ubah email” Anda yang asli, dimuat dari sesi mereka yang sudah login. Mereka mengklik “Lanjutkan” — dan tanpa sadar mengotorisasi perubahan pada akun nyata mereka bersama Anda.

2. Pembajakan pengaturan. Penyerang membingkai halaman pengaturan akun Anda dan melapisi game atau survei yang tidak berbahaya. Beberapa klik di tempat yang tepat secara diam-diam mengubah pengaturan — menambahkan email penyerang sebagai alamat pemulihan, memberikan izin aplikasi, atau menonaktifkan peringatan keamanan.

3. Kesepakatan yang terhenti. Pelanggan yang lebih besar mengirimkan kuesioner keamanan standar mereka sebelum menandatangani. Satu baris menanyakan apakah website Anda mengatur perlindungan anti-framing (X-Frame-Options / CSP frame-ancestors). Kontak IT Anda harus menjawab “tidak,” dan pengadaan berhenti sementara Anda bergegas memperbaiki pengaturan gratis 15 menit yang sekarang terlihat seperti tanda merah di depan pembeli.

4. Kampanye merek-sebagai-umpan. Karena halaman nyata dan tepercaya Anda bisa disematkan, penyerang menggunakan login atau checkout Anda sebagai lapisan yang meyakinkan dalam kampanye phishing yang lebih luas. Pelanggan yang terkena tidak menyalahkan penyerang yang misterius — mereka mengingatnya sebagai saat “website Anda” membiarkan mereka kena penipuan.

5. Tanda merah audit. Pemindaian penanggung asuransi, atau auditor yang meninjau postur keamanan Anda, mencantumkan perlindungan clickjacking yang hilang di antara temuan. Ini adalah item higienitas dasar yang klise; ditandai menandakan bahwa perlindungan mudah dan gratis tidak ada — yang mempengaruhi bagaimana keamanan Anda yang lain dinilai.

Benang merahnya: kerusakannya mendarat pada pelanggan nyata yang sudah login yang melakukan sesuatu yang tidak mereka maksudkan — dan membawa nama Anda, bukan nama penyerang.

Penjelasan teknis

Ketika browser meminta halaman dari website Anda, server Anda mengirimkan kembali halaman ditambah beberapa “header” tak terlihat — instruksi ekstra yang dibaca browser tapi tidak pernah dilihat pengunjung. Perlindungan clickjacking dikirimkan melalui header ini. Ada dua, dan pemeriksaan kami lulus jika salah satu ada:

1. Header yang lebih lama — X-Frame-Options:

X-Frame-Options: SAMEORIGIN

Ini adalah kontrol jangka panjang yang didukung secara luas. Ini mengambil salah satu dari dua nilai praktis:

• SAMEORIGIN — website Anda sendiri bisa menyematkan halaman-halamannya sendiri, tapi tidak ada website luar yang bisa. Default aman untuk hampir semua orang.
• DENY — tidak ada yang bisa menyematkan halaman Anda, termasuk Anda sendiri. Gunakan ini hanya jika website Anda tidak pernah mem-frame kontennya sendiri.

2. Header modern — Content-Security-Policy frame-ancestors:

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

Ini adalah kontrol yang lebih baru dan lebih fleksibel yang ditunjuk standar saat ini. Ini melakukan pekerjaan yang sama tapi memungkinkan Anda tepat tentang siapa yang bisa menyematkan Anda:

• frame-ancestors 'self' — setara dengan SAMEORIGIN.
• frame-ancestors 'none' — setara dengan DENY.
• frame-ancestors 'self' https://partner.example.com — website Anda sendiri ditambah satu mitra tepercaya yang disebutkan, dan tidak ada orang lain.

Seperti apa “baik” itu

Pengaturan terkuat menggunakan keduanya: frame-ancestors untuk browser modern (dan untuk ketepatan menyebutkan embedder yang diizinkan) dan X-Frame-Options: SAMEORIGIN sebagai fallback untuk klien yang lebih lama. Pemeriksaan kami puas dengan salah satu sendiri — tapi karena keduanya gratis dan butuh menit yang sama, tidak ada alasan untuk tidak mengatur keduanya.

Satu detail penting yang harus diketahui pengembang Anda: header Content-Security-Policy-Report-Only tidak menegakkan apa pun — hanya melaporkan. Jika Anda ingin perlindungan clickjacking benar-benar berlaku, harus datang dari header yang menegakkan (CSP normal dengan frame-ancestors, atau X-Frame-Options), bukan yang hanya laporan.

Cara memperbaikinya (gratis, ~15 menit)

Berikan bagian ini kepada siapa pun yang menjalankan website Anda — orang IT, pengembang web, atau dukungan hosting. Perbaikannya gratis. Ini adalah satu atau dua response header, atau aturan di CDN Anda. Tidak ada yang perlu dibeli.

Pemeriksaan lulus ketika baik header X-Frame-Options (diatur ke DENY atau SAMEORIGIN) atau direktif CSP frame-ancestors ada. Pengaturan sabuk-dan-gesper yang direkomendasikan menambahkan keduanya.

Langkah 1 — Putuskan seberapa ketat

• Sebagian besar bisnis: SAMEORIGIN / frame-ancestors 'self'. Website Anda sendiri tetap berfungsi; orang luar diblokir.
• Jika website Anda tidak pernah menyematkan halamannya sendiri: DENY / frame-ancestors 'none' untuk lockdown maksimum.
• Jika mitra sejati harus menyematkan halaman tertentu: sebutkan mereka secara eksplisit dengan frame-ancestors 'self' https://partner.example.com; dan tidak ada orang lain yang masuk.

Langkah 2 — Tambahkan header (pilih platform Anda)

Nginx — di dalam blok server Anda:

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

Apache — pastikan mod_headers diaktifkan, kemudian di virtual host Anda:

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

Microsoft IIS — di web.config di dalam <customHeaders>:

<add name="X-Frame-Options" value="SAMEORIGIN" />
<add name="Content-Security-Policy" value="frame-ancestors 'self';" />

Cloudflare (atau CDN serupa): pergi ke Rules → Transform Rules → Modify Response Header, dan tambahkan dua aturan yang mengatur X-Frame-Options ke SAMEORIGIN dan Content-Security-Policy ke frame-ancestors 'self'; pada semua respons. Ini adalah rute termudah jika Anda tidak memiliki akses server langsung.

Sudah mengirim Content-Security-Policy untuk alasan lain? Jangan membuat header CSP kedua — tambahkan frame-ancestors ke kebijakan yang ada. Dua header CSP bisa bertentangan.

Website builder (Squarespace, Wix, Shopify, dan sejenisnya): platform ini sering mengatur perlindungan anti-framing untuk Anda, sehingga Anda mungkin sudah lulus tanpa perlu melakukan apa pun. Jika pemeriksaan kami menandainya, kontrolnya biasanya ada di pengaturan keamanan platform, atau Anda menambahkannya di CDN yang duduk di depan website. (Catatan: Google Workspace dan Microsoft 365 mengaktifkan email Anda, bukan website Anda — header ini diatur di mana pun website publik Anda benar-benar berada, bukan di admin Workspace/365.)

Langkah 3 — Muat ulang dan verifikasi

Muat ulang server web atau deploy aturan CDN, kemudian muat website langsung Anda dan periksa response header — alat dev browser → tab Network → klik permintaan halaman → Response Headers, atau alat pengecekan header gratis mana pun. Konfirmasi header muncul pada respons halaman nyata, bukan hanya halaman utama. Kemudian jalankan ulang pemeriksaan.

Kesalahan umum

• Menggunakan CSP hanya laporan dan mengasumsikan itu melindungi Anda. Content-Security-Policy-Report-Only hanya melaporkan pelanggaran — tidak menegakkan apa pun. Anda memerlukan header yang menegakkan agar perlindungan berlaku.
• Mengatur dua header Content-Security-Policy yang terpisah. Jika Anda sudah memiliki CSP, tambahkan frame-ancestors ke dalamnya daripada mengeluarkan kebijakan kedua; header CSP yang bertentangan bisa menghasilkan perilaku yang tidak terduga.
• Mengatur DENY ketika website Anda sendiri menyematkan halamannya sendiri. DENY memblokir semua framing, termasuk milik Anda sendiri. Jika ada bagian dari website Anda yang menggunakan iframe dari dirinya sendiri, gunakan SAMEORIGIN / frame-ancestors 'self' sebagai gantinya.
• Hanya melindungi halaman utama. Halaman yang paling penting untuk clickjacking adalah yang sudah login — pengaturan akun, konfirmasi pembayaran, admin. Pastikan header diterapkan di seluruh website, bukan hanya ke halaman depan.
• Mengasumsikan HTTPS atau gembok sudah mencakup ini. Enkripsi dan anti-framing tidak berhubungan. Sertifikat yang sempurna tidak melakukan apa pun untuk menghentikan halaman Anda disematkan.
• Mengandalkan solusi lama. JavaScript “frame-busting” (skrip yang mencoba keluar dari frame) tidak dapat diandalkan dan bisa dilewati. Header adalah perbaikan yang benar dan ditegakkan browser.

FAQ