CSP frame-ancestors Membatasi Origin yang Dapat Menyematkan Halaman

Sebuah halaman web dapat tetap sensitif dari sisi keamanan walaupun penyerang tidak dapat membaca DOM-nya. Jika site lain dapat menaruh halaman tersebut di dalam frame transparan atau frame yang diposisikan secara cermat, penyerang dapat mengatur kontrol yang terlihat sehingga pengguna berinteraksi dengan aplikasi di dalam frame sambil mengira sedang berinteraksi dengan elemen lain. Kelas UI redressing ini umum dikaitkan dengan clickjacking.

Directive Content Security Policy frame-ancestors memberi respons yang dibingkai kendali atas boundary tersebut. Respons yang dilindungi menyatakan ancestor mana yang boleh memuatnya, alih-alih mengandalkan halaman penyemat untuk bertindak aman.

Respons yang dilindungi menetapkan boundary penyematan

Halaman yang tidak boleh muncul di dalam frame dapat mengirim:

Content-Security-Policy: frame-ancestors 'none'

Halaman yang hanya boleh dibingkai dokumen dari origin yang sama dapat memakai:

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

Layanan yang sengaja mendukung portal eksternal tertentu dapat mencantumkan origin tersebut:

Content-Security-Policy: frame-ancestors 'self' https://portal.example.net

Keputusan berada pada resource yang disematkan. JavaScript di parent tidak memberi izin untuk melewati policy, dan markup pada child tidak perlu bekerja sama lagi setelah browser menerima header respons.

Directive ini cocok untuk layar login, antarmuka administratif, pengaturan akun, alur pembayaran, dan halaman lain yang kontrolnya tidak semestinya muncul dalam konteks penyematan sembarang. Source list yang tepat tetap bergantung pada arsitektur produk; halaman yang memang disematkan oleh partner memerlukan policy berbeda dari konsol yang berdiri sendiri.

Setiap ancestor dalam rantai bertingkat ikut diperiksa

Framing dapat memiliki lebih dari satu tingkat. Dokumen top-level dapat memuat frame perantara, lalu frame tersebut menyematkan halaman yang dilindungi.

top.example
    |
    +-- middle.example
            |
            +-- protected.example

Bagi protected.example, mengizinkan hanya middle.example tidak cukup ketika ancestor top-level berada di luar set yang diizinkan. Browser mengevaluasi rantai ancestor terhadap directive. Ancestor yang tidak cocok membuat resource yang dilindungi diblokir dari konteks nested tersebut.

Sifat ini menutup celah pada desain yang hanya memeriksa parent langsung. Perantara yang sebenarnya diizinkan tidak dapat diam-diam menjadi jembatan framing bagi site top-level sembarang kecuali policy resource yang dilindungi juga mengizinkan susunan ancestor tersebut.

frame-ancestors dan frame-src mengendalikan arah yang berlawanan

Nama yang mirip dapat menyamarkan perbedaan penting.

frame-ancestors mengendalikan ancestor yang boleh menyematkan respons saat ini. Directive ini melindungi dokumen saat ini agar tidak ditempatkan dalam konteks framing yang tidak diinginkan.

frame-src mengendalikan resource frame yang boleh dimuat dokumen saat ini sebagai child. Directive ini membatasi framing keluar yang dimulai oleh dokumen saat ini.

Sebuah policy dapat memerlukan keduanya:

Content-Security-Policy:
  frame-ancestors 'self' https://portal.example.net;
  frame-src 'self' https://widgets.example.org

Directive pertama membatasi siapa yang boleh memuat halaman. Directive kedua membatasi apa yang boleh dimuat halaman di dalam frame. Memperketat salah satunya tidak menggantikan yang lain.

default-src tidak menjadi fallback

Banyak fetch directive CSP dapat mewarisi pembatasan dari default-src ketika directive khususnya tidak ada. frame-ancestors tidak memakai fallback tersebut.

Policy berikut tidak melarang site lain membingkai respons hanya karena default-src ketat:

Content-Security-Policy: default-src 'none'

Deployment yang hendak memblokir framing memerlukan frame-ancestors secara eksplisit:

Content-Security-Policy: default-src 'none'; frame-ancestors 'none'

Detail ini penting pada policy ringkas. Fetch policy yang ketat dan embedding policy yang ketat merupakan kontrol terpisah walaupun keduanya dikirim melalui header CSP yang sama.

Directive harus berada pada header respons HTTP

frame-ancestors bukan policy yang dapat dipasang secara andal melalui elemen CSP <meta>. Browser memerlukan keputusan penyematan sebagai bagian dari policy respons untuk resource yang dilindungi.

Hal ini juga memengaruhi kepemilikan konfigurasi infrastruktur. Jika aplikasi mengandalkan reverse proxy, CDN, middleware framework, atau web server untuk mengirim security header, respons akhir harus mempertahankan directive yang dimaksud. Perubahan pada template saja bukan deployment yang setara.

Setiap route juga layak ditinjau secara eksplisit. Header global dapat cocok untuk aplikasi mandiri, sedangkan produk dengan widget yang memang dapat disematkan mungkin memerlukan pengecualian sempit. Menghapus directive untuk seluruh host demi mendukung satu widget memperluas permukaan framing halaman lain yang tidak terkait.

X-Frame-Options memiliki model policy yang lebih sempit

X-Frame-Options hadir sebelum CSP dan umum dipakai sebagai:

X-Frame-Options: DENY

atau:

X-Frame-Options: SAMEORIGIN

Nilai tersebut mencakup dua kasus umum: tanpa framing atau framing same-origin. frame-ancestors dapat menyatakan daftar origin yang diizinkan dan mengevaluasi rantai ancestor sebagai bagian dari pemrosesan CSP.

Sistem yang masih mempertahankan X-Frame-Options untuk client lama sebaiknya menjaga maksudnya selaras dengan policy CSP, bukan memperlakukan dua header yang bertentangan sebagai lapisan access control terpisah. Desain policy saat ini sebaiknya berpusat pada frame-ancestors ketika set browser yang ditargetkan mendukungnya.

Bentuk ALLOW-FROM yang usang pada X-Frame-Options bukan pengganti portabel untuk allowlist CSP.

Kontrol framing bukan otorisasi

Memblokir framing yang tidak diizinkan menghilangkan satu jalur untuk mengelabui pengguna agar mengaktifkan kontrol. Mekanisme ini tidak menentukan apakah sebuah request memiliki otorisasi.

Endpoint yang mengubah state tetap memerlukan autentikasi, otorisasi, semantik metode HTTP yang tepat, dan pertahanan request forgery bila relevan. Sebuah halaman juga tetap dapat memiliki kelemahan injeksi DOM atau eksekusi script walaupun tidak ada site eksternal yang dapat membingkainya.

Boundary-nya jelas: frame-ancestors mengatur penyematan. Directive ini tidak melakukan sanitasi HTML, memvalidasi intent pengguna, mengamankan cookie, atau menggantikan pemeriksaan di server.

Presisi tersebut berguna saat review. Untuk setiap respons, pertanyaan yang relevan adalah apakah halaman boleh disematkan dan, jika boleh, susunan ancestor lengkap mana yang sah. Menyatakan jawaban itu pada response policy memberi browser aturan langsung untuk ditegakkan sebelum konteks framing yang tidak disetujui dapat menampilkan antarmuka yang dilindungi.