Iframe (Inline Frame)

Iframe je párový HTML tag <iframe>, který vytváří vnořený kontext prohlížení. Je to jeden z nejstarších a nejpoužívanějších způsobů, jak skládat webový obsah z více různých zdrojů. Hlavní výhodou je, že obsah uvnitř rámce je nezávislý na okolní stránce – má vlastní historii, styly a skripty.

Základní syntaxe a parametry

Pro vložení rámce se používá následující kód:

<iframe src="https://priklad.cz" width="600" height="400"></iframe>

src: Adresa (URL) stránky, která se má uvnitř rámu zobrazit.

width / height: Rozměry rámu v pixelech nebo procentech.

loading=„lazy“: Moderní atribut, který zajistí, že se obsah rámu načte až ve chvíli, kdy k němu uživatel dosroluje (šetří data).

Typické využití v praxi

Iframy jsou všudypřítomné, i když si jich uživatel často nevšimne:

Vkládání médií: YouTube videa, mapy z Google Maps nebo Mapy.cz jsou do webů vkládány téměř výhradně přes iframe.

Reklamy: Většina reklamních bannerů běží v rámech, aby kód reklamy neovlivňoval rychlost a stabilitu hlavní stránky.

Platební brány: Pro zvýšení bezpečnosti se platební formuláře často načítají v rámu přímo ze serveru banky.

Widgety sociálních sítí: Tlačítka „To se mi líbí“ nebo vložené příspěvky z X (Twitteru) a Instagramu.

Bezpečnost a omezení

Protože iframe umožňuje zobrazit cizí web, přináší s sebou značná bezpečnostní rizika:

1. Atribut Sandbox

Tento atribut umožňuje omezit schopnosti obsahu uvnitř rámu (např. zakázat spouštění skriptů, odesílání formulářů nebo otevírání vyskakovacích oken).

<iframe src="..." sandbox="allow-scripts"></iframe>

2. Same-Origin Policy (SOP)

Prohlížeče brání skriptům z hlavní stránky přistupovat k obsahu uvnitř rámu (a naopak), pokud oba nepocházejí ze stejné domény. To chrání citlivá data uživatelů.

3. Obrana proti zneužití

Jak bylo zmíněno u tématu Clickjacking, útočníci mohou zneužít iframe k překrytí legitimních stránek. Weby se brání pomocí hlaviček:

X-Frame-Options: Zakazuje vkládání webu do rámů.

Content Security Policy (frame-ancestors): Definuje, kdo smí tento web vkládat.

Výhody a nevýhody

Vlastnost	Výhoda	Nevýhoda
Izolace	Chyba v rámu neshodí celou stránku.	Složitější komunikace mezi rámem a rodičem.
Vkládání	Snadné vložení cizího obsahu (video, mapy).	Může zpomalit načítání stránky (více HTTP požadavků).
SEO	Obsah v rámu je pro vyhledávače často neviditelný.	Vyhledávače nemusí indexovat text vnořený přes iframe.
Responsivita	-	Iframy se špatně přizpůsobují různým velikostem displejů.

Související pojmy: HTML, Clickjacking, CSP, HTTP, Pixel, JavaScript, SEO.