iframe-insluitingscontrole

Wat bepaalt of een pagina kan worden ingebed?

Snelle gids: configuratie van responsheaders

Als je eigenaar van de site bent, beheer de framing direct via antwoordheaders.

Opmerking: X-Frame-Options wordt vervangen door CSP frame-ancestors. Indien beide aanwezig zijn, heeft CSP voorrang — geef de voorkeur aan frame-ancestors.

Hoe detecteert de server dat een verzoek vanuit een iframe komt?

• Sec-Fetch-Dest: document — navigatie op toppagina-niveau, niet binnen een frame.
• Sec-Fetch-Dest: iframe — het verzoek wordt geladen binnen een <iframe>-element.
• Sec-Fetch-Dest: frame — geladen binnen een verouderd <frame>-element (frameset).
• Sec-Fetch-Dest: embed / object — geladen binnen een <embed>- of <object>-element.

Voorbeelden van serverconfiguratie: iframe-inbedden blokkeren

De onderstaande fragmenten laten zien hoe je elke server of framework configureert om iframe-insluiting volledig te blokkeren (X-Frame-Options: DENY + CSP frame-ancestors 'none') — de strengste variant uit de recepten uit de snelle gids hierboven.

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 });
  },
};

Wil je alleen je eigen site, of een korte whitelist, toestaan om de pagina te omvatten in plaats van iedereen te blokkeren? Vervang DENY door SAMEORIGIN, en 'none' door 'self' of een expliciete lijst van oorsprongen — de overige configuratie blijft onveranderd.

Bekende valkuilen per platform

Los van de algemene headerregels hanteren sommige bekende platforms eigen specifieke gedragingen. Het is goed om dit te weten voordat je puur op basis van headers beslist of iets 'geblokkeerd' of 'inbedbaar' is.

Veelvoorkomende toepassingen

• Bepaal eerst of widgets, dashboards of documenten van derden in jouw product ingebed kunnen worden voordat je code voor de integratie gaat schrijven.
• Verifieer of jouw eigen website correct de beoogde `X-Frame-Options`- of CSP `frame-ancestors`-policy verstuurt.
• Debug clickjacking-bescherming: begrijp waarom een pagina binnen een iframe over about:blank of een weigermelding wordt weergegeven.
• Controleer kandidaat-URLs batchsgewijs tijdens inhoudsamenvoeging of portaalintegratie, waarbij je de sessiegeschiedenis gebruikt om resultaten opnieuw te bekijken.
• Bereid je voor op beveiligingsreviews of penetration tests door het frameerbeleid van externe afhankelijkheden te documenteren.

Veelgestelde vragen