Keamanan iframe Clickjacking dan X-Frame-Options

Pembajakan klik (penyamaran antarmuka pengguna) menyematkan situs target dalam iframe transparan di atas halaman pengalih. Pengguna mengira mereka mengeklik halaman pengalih, tetapi sebenarnya mengeklik halaman tersembunyi yang sudah terautentikasi di bawahnya—menjalankan tindakan di situs target tanpa sepengetahuan mereka.

Penyerang memuat victim.com dalam iframe transparan yang ditempatkan di atas tombol "Klik untuk menang!". Saat pengguna mengeklik, mereka sebenarnya mengeklik tombol "Hapus Akun" milik victim.com—dalam keadaan terautentikasi sebagai diri mereka sendiri melalui cookie sesi victim.com. Tidak diperlukan phishing.

X-Frame-Options: DENY mencegah halaman dimuat dalam iframe apa pun. X-Frame-Options: SAMEORIGIN hanya mengizinkan halaman dari asal yang sama untuk melakukan penyematan iframe. Tetapkan header ini di sisi server pada semua halaman terautentikasi untuk mencegah pembajakan klik.

Content-Security-Policy: frame-ancestors 'none' adalah pengganti modern yang lebih fleksibel untuk X-Frame-Options: DENY. frame-ancestors 'self' menggantikan SAMEORIGIN. frame-ancestors juga dapat mengizinkan asal tepercaya tertentu: frame-ancestors https://trusted.example.com.

Pemecahan bingkai lama menggunakan JavaScript untuk keluar dari bingkai. Cara ini mudah dikalahkan oleh atribut sandbox (yang memblokir skrip pemecah bingkai). Selalu gunakan header sisi server (X-Frame-Options atau CSP frame-ancestors)—pemecahan bingkai dengan JavaScript tidak andal.

Kasus penggunaan yang sah untuk pembingkaian: menyematkan konten Anda sendiri pada asal Anda sendiri (SAMEORIGIN), serta mengizinkan mitra tertentu menyematkan widget Anda (frame-ancestors dengan asal tertentu). Rancang kebijakan untuk mengizinkan kasus-kasus ini sekaligus menolak semua kasus lainnya.

Tetapkan X-Frame-Options (untuk peramban lama) dan CSP frame-ancestors (untuk peramban modern) guna memperoleh cakupan maksimal. Jika keduanya tersedia, frame-ancestors diutamakan pada peramban yang mendukung CSP. Mengirimkan keduanya memastikan perlindungan dari pembajakan klik pada semua agen pengguna.

Bahkan iframe dengan asal yang sama dapat menimbulkan risiko: XSS tersimpan pada halaman yang disematkan dapat mengakses halaman induk melalui parent.document jika berasal dari asal yang sama. Gunakan sandbox tanpa allow-same-origin untuk iframe dengan asal sama yang tidak memerlukan akses ke halaman induk guna membatasi dampak kerentanan konten yang disematkan.

Verifikasi perlindungan dari pembajakan klik: gunakan tab jaringan peramban untuk memeriksa header respons X-Frame-Options atau CSP frame-ancestors. Alat seperti securityheaders.com menganalisis header. Buat halaman HTML pengujian dengan iframe yang mengarah ke situs Anda, lalu pastikan halaman tersebut gagal dimuat.

Saat menyematkan konten pihak ketiga (YouTube, Google Maps), Anda adalah situs yang melakukan pembingkaian—pastikan layanan yang disematkan mengizinkan pembingkaian dalam kebijakan X-Frame-Options miliknya. Anda tidak dapat menyematkan situs yang mencegah pembingkaian—hal ini memang dirancang demikian dan melindungi pengguna layanan yang disematkan.

Tidak seperti sebagian besar direktif CSP, frame-ancestors tidak dapat ditetapkan melalui tag meta HTTP-equiv—direktif ini harus dikirim sebagai header respons HTTP. Hal ini memastikan penyerang tidak dapat menghapus perlindungan dengan memanipulasi HTML yang disematkan sebelum peramban membaca tag meta.

Mengapa kode pemecah bingkai JavaScript merupakan pertahanan pembajakan klik yang tidak andal?

Pembajakan klik menyematkan halaman yang terautentikasi dalam iframe transparan untuk membajak klik. Pertahanan: header X-Frame-Options: DENY atau header CSP frame-ancestors: none di sisi server. Tetapkan keduanya untuk cakupan lintas peramban. Pemecahan bingkai dengan JavaScript tidak andal—selalu gunakan header HTTP. frame-ancestors menawarkan daftar izin asal tepercaya yang terperinci, yang tidak dapat ditawarkan X-Frame-Options.