X-Frame-Options

Penggunaan

Serangan clickjacking mengelabui pengguna agar mengeklik elemen tersembunyi yang ditumpangkan di atas halaman yang sah. Penyerang menyematkan situs target di dalam iframe transparan, menempatkan antarmuka yang menyesatkan di atasnya, lalu menangkap klik yang sebenarnya ditujukan untuk konten di dalam frame. X-Frame-Options mencegah hal ini dengan memberi tahu browser apakah respons tersebut boleh ditampilkan di dalam sebuah frame.

Catatan

X-Frame-Options sudah usang dan digantikan oleh CSP frame-ancestors. Semua browser modern mendukung frame-ancestors, yang menawarkan kendali lebih rinci termasuk beberapa origin sekaligus dan pencocokan skema. X-Frame-Options masih banyak digunakan demi kompatibilitas mundur dengan browser lama.

Header ini menerima dua nilai yang masih aktif: DENY dan SAMEORIGIN. Nilai ketiga, ALLOW-FROM, didefinisikan pada implementasi terdahulu tetapi kini sudah usang dan diabaikan oleh browser modern.

DENY

Nilai DENY memblokir halaman agar tidak ditampilkan di dalam frame apa pun, terlepas dari situs yang memintanya. Tidak ada penyematan frame yang diizinkan dalam keadaan apa pun.

SAMEORIGIN

Nilai SAMEORIGIN mengizinkan halaman disematkan dalam frame hanya oleh halaman yang berbagi origin yang sama. Halaman di https://example.re boleh menyematkan halaman lain dari https://example.re, tetapi halaman dari origin berbeda akan diblokir.

ALLOW-FROM (usang)

Nilai ALLOW-FROM uri dulunya menginstruksikan browser untuk mengizinkan penyematan frame hanya dari URI yang ditentukan. Browser modern tidak lagi mendukung direktif ini. Fungsi yang setara tersedia melalui direktif CSP frame-ancestors:

Content-Security-Policy: frame-ancestors https://trusted.example.re

Contoh

Memblokir seluruh penyematan frame atas sebuah halaman, perlindungan paling ketat terhadap clickjacking:

X-Frame-Options: DENY

Mengizinkan penyematan frame dari origin yang sama sambil memblokir situs eksternal menyematkan halaman tersebut:

X-Frame-Options: SAMEORIGIN

Konfigurasi pertahanan berlapis yang menggabungkan X-Frame-Options dengan direktif CSP frame-ancestors untuk cakupan browser yang luas:

X-Frame-Options: SAMEORIGIN
Content-Security-Policy: frame-ancestors 'self'

Pemecahan masalah

Masalah penyematan frame muncul sebagai iframe kosong atau error di konsol ketika sebuah halaman menolak dirender di dalam dokumen lain.

Error konsol “Refused to display in a frame”. Browser memblokir halaman yang disematkan dan mencatat Refused to display ‘https://example.re/’ in a frame because it set ‘X-Frame-Options’ to ‘DENY’ (atau ‘SAMEORIGIN’). Periksa header respons dari URL yang disematkan pada tab Network DevTools. Jika halaman tersebut memang perlu disematkan, ubah nilai header dari DENY menjadi SAMEORIGIN, atau hapus header tersebut sepenuhnya dan gunakan CSP frame-ancestors untuk kendali yang lebih halus.

ALLOW-FROM tidak bekerja di browser modern. Direktif ALLOW-FROM sudah usang. Chrome, Firefox, dan Safari mengabaikan direktif tersebut sepenuhnya, memperlakukan header itu seolah-olah tidak ada nilai yang valid. Ganti ALLOW-FROM dengan direktif CSP frame-ancestors, yang mendukung beberapa origin: Content-Security-Policy: frame-ancestors https://trusted.example.re https://other.example.re.

X-Frame-Options dan CSP frame-ancestors saling bertentangan. Ketika kedua header hadir, browser yang mendukung CSP Level 2 dan setelahnya mengabaikan X-Frame-Options dan hanya mengikuti frame-ancestors. Browser lama yang tidak mendukung CSP kembali menggunakan X-Frame-Options. Pastikan kebijakan yang dimaksudkan konsisten pada kedua header. Mengirim X-Frame-Options: DENY bersamaan dengan frame-ancestors ‘self’ menciptakan ketidaksesuaian: browser modern mengizinkan penyematan frame dari origin yang sama, sementara browser lawas memblokir semua penyematan frame.

Penyematan yang sah ikut terblokir (formulir pembayaran, widget, aplikasi tersemat). Layanan pihak ketiga yang memerlukan penyematan iframe akan gagal ketika halaman induk mengirim X-Frame-Options: DENY. Gunakan CSP frame-ancestors untuk memasukkan origin tertentu yang memerlukan akses penyematan ke dalam daftar izin: Content-Security-Policy: frame-ancestors ‘self’ https://payments.provider.example.re.

Migrasi dari X-Frame-Options ke CSP frame-ancestors. Terapkan kedua header selama masa transisi. Setel frame-ancestors agar sesuai dengan kebijakan penyematan frame yang diinginkan. Pertahankan X-Frame-Options untuk browser tanpa dukungan CSP. Setelah trafik browser lawas turun di bawah ambang yang dapat diterima, hapus X-Frame-Options dan andalkan frame-ancestors saja. Uji migrasi tersebut dengan menyematkan halaman di dalam iframe dari origin yang diizinkan dan memverifikasi frame itu termuat di beberapa browser.