Kontrola vkládání iframe

Co určuje, zda lze stránku vložit?

Rychlý průvodce: nastavení odpovědních hlaviček

Pokud vlastníte web, můžete možnost vkládání do rámců řídit přímo pomocí odpovědních hlaviček.

Poznámka: Hlavička `X-Frame-Options` je nahrazena direktivou CSP `frame-ancestors`. Při současném použití má vždy prioritu CSP — doporučujeme spoléhat primárně na `frame-ancestors`.

Jak server detekuje, že požadavek pochází z IFrame?

• `Sec-Fetch-Dest: document` — navigace nejvyšší úrovně (neprobíhá uvnitř žádného rámu).
• `Sec-Fetch-Dest: iframe` – požadavek byl načten uvnitř elementu `<iframe>`.
• `Sec-Fetch-Dest: frame` – načteno uvnitř historického elementu `<frame>` (frameset).
• `Sec-Fetch-Dest: embed / object` – načteno uvnitř elementů `<embed>` nebo `<object>`.

Příklady konfigurace serveru: blokování vnoření do IFrame

Následující ukázky kódu ukazují, jak nakonfigurovat daný server nebo framework tak, aby kompletně zablokoval vkládání do `<iframe>` (kombinace `X-Frame-Options: DENY` a `CSP frame-ancestors 'none'`). Jde o nejpřísnější řešení z rychlého průvodce výše.

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

Stačí povolit pouze vlastní web nebo krátký whitelist pro vkládání místo úplného blokování všech zdrojů? Nahraďte hodnotu `DENY` za `SAMEORIGIN` a `'none'` za `'self'` či explicitní seznam originů – zbývající část konfigurace zůstává beze změny.

Pozor na typické problémy platforem

Kromě obecných pravidel pro hlavičky mají některé známé platformy svá specifika – stojí za to je znát, než budete z pouhého pohledu na hlavičky usuzovat, že je obsah ‚blokován‘, nebo zda jej lze ‚vložit‘.

Běžné scénáře použití

• Rozhodněte se, zda můžete widget, dashboard nebo dokument třetí strany vložit do svého vlastního produktu ještě před tím, než začnete implementovat integraci.
• Ověřte, že váš vlastní web skutečně vysílá zamýšlenou politiku `X-Frame-Options` nebo `CSP frame-ancestors`.
• Ladění ochrany proti clickjacku: zjistěte, proč se stránka uvnitř iframe zobrazuje prázdně (`about:blank`) nebo s odmítající zprávou.
• Dávková kontrola kandidátských URL adres při agregaci obsahu nebo integraci portálu; výsledky můžete následně znovu zkontrolovat prostřednictvím historie relace.
• Příprava na bezpečnostní revize nebo penetrační testy pomocí zdokumentování politiky iframe (rámování) externích závislostí.

Často kladené otázky (FAQ)