Pemeriksa iframe

Apa yang menentukan apakah sebuah halaman dapat disematkan?

Panduan cepat: penyiapan header respons

Jika Anda pemilik situs, kendalikan pengaturan penyematan secara langsung melalui header respons.

Catatan: X-Frame-Options telah digantikan oleh CSP frame-ancestors. Jika keduanya ada, aturan CSP yang berlaku — disarankan menggunakan frame-ancestors.

Bagaimana server mendeteksi bahwa permintaan berasal dari iframe?

• Sec-Fetch-Dest: document — navigasi tingkat atas, tidak berada di dalam bingkai apa pun.
• Sec-Fetch-Dest: iframe — permintaan dimuat di dalam elemen <iframe>.
• Sec-Fetch-Dest: frame — dimuat di dalam <frame> (kerangka kerja lama).
• Sec-Fetch-Dest: embed/object — dimuat di dalam elemen <embed> atau <object>.

Contoh konfigurasi server: blokir semat iframe

Cuplikan kode di bawah ini menunjukkan cara mengonfigurasi server atau framework agar memblokir penyematan iframe sepenuhnya (X-Frame-Options: DENY + CSP frame-ancestors 'none') — pilihan paling ketat dari panduan cepat di atas.

server {
    location / {
        add_header X-Frame-Options "DENY" always;
        add_header Content-Security-Policy "frame-ancestors 'none'" always;
    }
}

<IfModule mod_headers.c>
    Header always set X-Frame-Options "DENY"
    Header always set Content-Security-Policy "frame-ancestors 'none'"
</IfModule>

app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('Content-Security-Policy', "frame-ancestors 'none'");
  next();
});

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Content-Security-Policy', value: "frame-ancestors 'none'" },
        ],
      },
    ];
  },
};

class SetFrameOptions
{
    public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);
        $response->headers->set('X-Frame-Options', 'DENY');
        $response->headers->set('Content-Security-Policy', "frame-ancestors 'none'");

        return $response;
    }
}

export default {
  async fetch(request) {
    const response = await fetch(request);
    const headers = new Headers(response.headers);
    headers.set('X-Frame-Options', 'DENY');
    headers.set('Content-Security-Policy', "frame-ancestors 'none'");
    return new Response(response.body, { status: response.status, headers });
  },
};

Hanya perlu mengizinkan situs Anda sendiri, atau daftar putih pendek, untuk menyematkan halaman alih-alih memblokir semuanya? Ganti DENY dengan SAMEORIGIN, dan 'none' dengan 'self' atau daftar sumber secara eksplisit — sisa konfigurasi tetap sama.

Hal-hal yang perlu diwaspadai dari berbagai platform

Selain aturan header umum, beberapa platform populer memiliki karakteristik unik masing-masing—informasi ini penting diketahui sebelum Anda menyimpulkan status "terblokir" atau "dapat disematkan" hanya berdasarkan header.

Skenario penggunaan umum

• Tentukan terlebih dahulu apakah widget pihak ketiga, dasbor, atau dokumen tertentu dapat disematkan ke dalam produk Anda sebelum mulai menulis kode integrasi.
• Verifikasi bahwa situs Anda benar-benar mengirimkan kebijakan X-Frame-Options atau CSP frame-ancestors sesuai dengan yang Anda tetapkan.
• Debug konfigurasi proteksi clickjacking: pahami mengapa halaman menampilkan about:blank atau pesan penolakan saat ditampilkan di dalam iframe.
• Lakukan penyaringan batch pada kandidat URL selama agregasi konten atau integrasi portal, dengan memanfaatkan riwayat sesi untuk meninjau ulang hasil.
• Persiapkan diri untuk tinjauan keamanan atau uji penetrasi dengan mendokumentasikan kebijakan framing pada dependensi eksternal.

Pertanyaan Umum (FAQ)