Pemeriksa iframe

Apa yang menentukan sama ada sesuatu halaman boleh disematkan?

Panduan pantas: penyediaan pengepala respons

Jika anda memiliki tapak web ini, kawal pembingkaian secara langsung melalui header respons.

Nota: X-Frame-Options telah digantikan oleh arahan CSP frame-ancestors. Apabila kedua-duanya wujud, arahan CSP akan mengatasi — sila utamakan frame-ancestors.

Bagaimanakah pelayan mengesan permintaan berasal dari iframe?

• Sec-Fetch-Dest: document — navigasi tahap atas, tidak berada di dalam mana-mana bingkai.
• Sec-Fetch-Dest: iframe — permintaan dimuatkan di dalam elemen <iframe>.
• Sec-Fetch-Dest: frame — dimuatkan di dalam elemen <frame> warisan (frameset).
• Sec-Fetch-Dest: embed / object — dimuatkan di dalam elemen <embed> atau <object>.

Contoh konfigurasi pelayan: sekatan penyematan iframe

Cuplikan kod di bawah menunjukkan cara mengkonfigurasi setiap pelayan atau kerangka kerja (framework) untuk menahan sepenuhnya penyisipan <iframe> (X-Frame-Options: DENY + CSP frame-ancestors 'none') — langkah paling ketat berbanding cadangan dalam panduan pantas 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 mahu membenarkan laman web anda sendiri, atau senarai benarkan (allow-list) yang pendek, untuk membingkai halaman tersebut sambil menghalang semua yang lain? Tukarkan DENY kepada SAMEORIGIN, dan 'none' kepada 'self' atau senarai sumber spesifik — konfigurasi selebihnya kekal sama.

Nota platform penting

Di luar garis panduan header umum, sesetengah platform terkenal mempunyai kelainan atau ciri tersendiri — perkara yang perlu diketahui sebelum anda membuat andaian "diblokir" atau "boleh disematkan" hanya berdasarkan header semata-mata.

Kesgunaan biasa

• Tentukan terlebih sama ada widget, papan pemuka, atau dokumen pihak ketiga boleh disematkan ke dalam produk anda sebelum bermula menulis kod integrasi.
• Sahkan bahawa laman web anda menghantar polisi `X-Frame-Options` atau `CSP frame-ancestors` seperti yang diinginkan.
• Nyahpepijat perlindungan klik-jacking: fahami mengapa halaman memaparkan about:blank atau mesej penolakan di dalam iframe.
• Lakukan tapisan pukal ke atas URL calon semasa pengumpulan kandungan atau integrasi portal, guna sejarah sesi untuk menyemak semula hasil.
• Sedia untuk semakan keselamatan atau ujian penembusan dengan mendokumentasikan dasar pembingkaian bagi kebergantungan luaran.

Soalan Lazim (FAQ)