Iframe

Co je to iframe?

Iframe (inline frame) je HTML element, který umožňuje vložit jednu webovou stránku do jiné. Funguje jako "okno" uvnitř vaší stránky, kde se zobrazuje obsah z jiné URL adresy. Iframe je běžně používaný pro vkládání videí z YouTube, map z Google Maps, formulářů, platebních bran nebo jiných externích služeb přímo do vaší stránky.

Technicky vzato, iframe vytváří samostatný browsing kontext s vlastním DOM (Document Object Model) a JavaScriptem izolovaným od rodičovské stránky. To přináší jak výhody v podobě bezpečnosti, tak určitá omezení v komunikaci mezi stránkami.

Jak iframe funguje?

Základní syntaxe iframe je velmi jednoduchá. Atribut src určuje URL stránky, která se má zobrazit. Atributy width a height nastavují rozměry. Kromě toho můžete použít další atributy jako title (popis obsahu pro čtečky obrazovky), loading="lazy" (iframe se načte až když se dostane do viditelné oblasti), sandbox (omezuje možnosti vloženého obsahu) nebo allow (povoluje specifické funkce jako fullscreen či geolokaci).

Moderní praxe doporučuje vždy nastavovat title pro přístupnost a používat sandbox atribut pro zvýšení bezpečnosti, pokud nevkládáte důvěryhodný obsah. Iframe se chová jako samostatný dokument s vlastním životním cyklem načítání a vlastním kontextem vykreslování.

Když prohlížeč narazí na tag iframe, vytvoří nový browsing context (podobně jako otevření nové záložky, ale vložené do stránky). Tento kontext má vlastní historii navigace, vlastní objekty window a document, a je izolovaný od rodičovské stránky kvůli bezpečnosti.

Praktické využití iframe

• YouTube a video platformy

Nejčastější použití iframe je vkládání videí. YouTube poskytuje embed kód, který obsahuje iframe s optimalizovaným přehrávačem. Výhoda je, že nemusíte řešit vlastní video přehrávač, codecs, responzivitu nebo streamování - YouTube to zařídí za vás.

• Google Maps

Vložení interaktivní mapy na kontaktní stránku je jednoduché díky iframe. Mapa zůstává plně funkční s možností přiblížení, přepínání režimů a navigace, přičemž je plně integrovaná do vašeho designu.

• Formuláře a platební brány

Služby jako Google Forms, Typeform nebo platební brány (PayPal, Stripe) často využívají iframe pro vložení formuláře nebo platebního rozhraní do vašeho webu, přičemž uživatel zůstává na vaší doméně.

• Sociální sítě

Facebook, Instagram nebo Twitter nabízí embed kódy s iframe pro zobrazení příspěvků, timelines nebo like tlačítek přímo na webu.

Výhody a nevýhody iframe

Výhody iframe

• Jednoduchost implementace

Stačí zkopírovat embed kód z platformy jako YouTube nebo Google Maps a vložit ho do HTML vaší stránky. Nemusíte psát složitý kód ani nastavovat API.

• Bezpečnostní izolace

Iframe izoluje cizí kód od vašeho webu. Pokud by došlo k bezpečnostnímu problému ve vloženém obsahu, neohrozí to zbytek vaší stránky díky same-origin policy.

• Automatická aktuálnost

Obsah v iframe se aktualizuje automaticky u zdroje. Pokud například upravíte YouTube video nebo změníte pozici v Google mapě, změna se projeví ihned na všech stránkách, kde je iframe vložen.

• Nezávislé fungování

Pokud dojde k chybě nebo selhání uvnitř iframe, neovlivní to funkčnost zbytku stránky. Uživatel může používat web normálně, i když se iframe nenačte.

• Správa třetí stranou

Technické problémy, aktualizace, hostování a údržbu řeší poskytovatel služby (YouTube, Google, atd.). Vy se nemusíte starat o streamování videa nebo komplexní funkcionalitu map.

Nevýhody iframe

• Negativní SEO dopady

Obsah v iframe se nepřiřazuje vaší stránce pro vyhledávače. Google vidí iframe jako externí zdroj a nezapočítává text či klíčová slova uvnitř iframe do hodnocení vaší stránky. Pro důležitý obsah použijte raději přímé vložení do HTML.

• Zpomalení výkonu

Každý iframe znamená další HTTP požadavek, načítání zdrojů z jiné domény a zvýšení celkové doby načtení stránky. Více iframe na jedné stránce může výrazně zpomalit zobrazení, zejména na pomalém připojení.

• Problémy s responzivitou

Iframe s pevně nastavenými rozměry (width a height v pixelech) nefunguje dobře na mobilních zařízeních. Je potřeba použít CSS techniky pro responzivní iframe, což vyžaduje dodatečnou práci.

• Bariéry přístupnosti

Špatně implementovaný iframe bez atributu title je problém pro uživatele čteček obrazovky. Pokud iframe neobsahuje správné ARIA atributy a popisky, může být obsah nedostupný pro hendikepované návštěvníky.

• Bezpečnostní rizika

Vložení nedůvěryhodného obsahu pomocí iframe může být nebezpečné. Bez správného nastavení atributu sandbox může iframe spouštět skripty, odesílat formuláře nebo provádět další potenciálně škodlivé akce.

SEO dopady iframe

Google a další vyhledávače neindexují obsah uvnitř iframe jako součást vaší stránky. To znamená, že pokud vložíte důležitý textový obsah přes iframe, nepomůže vám v rankingu. Pokud potřebujete pomoct s SEO optimalizací vašeho webu, raději vkládejte obsah přímo do HTML.

Z pohledu SEO je lepší vyhýbat se iframe pro hlavní obsah stránky, používat iframe jen pro doplňkový obsah (videa, mapy), zajistit, že stránka má dostatek vlastního indexovatelného obsahu a používat lazy loading pro iframe, aby nezpomaloval načítání stránky.

Bezpečnost iframe

Hlavní bezpečnostní riziko iframe je clickjacking – útok, kdy útočník překryje transparentním iframe vaši stránku a přiměje uživatele kliknout na něco, co nevidí. Proto většina důležitých webů (banky, sociální sítě) zakazuje vložení do iframe pomocí HTTP hlavičky X-Frame-Options nebo Content-Security-Policy.

Dalším rizikem je cross-site scripting (XSS) přes iframe. Pokud vložíte iframe z nedůvěryhodného zdroje, může obsahovat škodlivý JavaScript, který se pokusí o phishing, krádež cookies nebo jiné útoky. Iframe z jiné domény nemůže přímo přistupovat k vaší stránce kvůli same-origin policy, ale stále může sledovat chování uživatele nebo zobrazovat klamavý obsah.

Pro ochranu vašeho webu používejte sandbox atribut k omezení možností iframe, specifikujte allow atribut pouze s nutnými oprávněními, vkládejte jen obsah z důvěryhodných zdrojů a používejte HTTPS v src atributu. Nikdy nevkládejte iframe ze stránek, které neznáte nebo které nemají HTTPS certifikát.

Pokud provozujete web a chcete zabránit vložení vašich stránek do iframe na cizích webech, nastavte HTTP hlavičku X-Frame-Options: DENY nebo použijte Content-Security-Policy: frame-ancestors 'none'. To ochrání vaše uživatele před clickjackingem.

Responzivní iframe – Jak na to

Jedním z největších problémů iframe je responzivita na mobilních zařízeních. Iframe s pevně nastavenými rozměry (například width="560" height="315") se na mobilním telefonu zobrazí buď zkrácený, nebo přetéká přes okraj obrazovky.

Řešením je technika obalení iframe do kontejneru s relativními rozměry. Používá se CSS vlastnost padding-bottom, která zachovává poměr stran (aspect ratio) iframe bez ohledu na šířku obrazovky. Pro standardní video 16:9 použijete padding-bottom: 56.25% (výpočet: 9/16 × 100).

Tento přístup zajistí, že iframe se přizpůsobí všem velikostem obrazovek – od malých mobilních telefonů po velké monitory – a přitom zachová správný poměr stran bez deformace obsahu. Moderní řešení také využívá CSS vlastnost aspect-ratio, která je jednodušší a podporovaná ve většině současných prohlížečů.

Atributy iframe pro výkon a bezpečnost

Moderní HTML nabízí několik důležitých atributů, které zlepšují výkon a bezpečnost iframe. Atribut loading="lazy" způsobí, že se iframe načte až když se uživatel přiblíží k části stránky, kde je iframe umístěn. To výrazně zrychluje počáteční načtení stránky, protože prohlížeč nemusí hned stahovat externí obsah.

Atribut sandbox je bezpečnostní funkce, která omezuje možnosti obsahu uvnitř iframe. Můžete zakázat spouštění skriptů, odesílání formulářů, otevírání popup oken nebo navigaci v rodičovské stránce. Sandbox přijímá seznam povolených akcí – například sandbox="allow-scripts allow-same-origin" povolí JavaScript a přístup k localStorage, ale zakáže formuláře.

Atribut allow řídí přístup k pokročilým funkcím prohlížeče jako geolokace, kamera, mikrofon, fullscreen režim nebo autoplay videa. Například allow="fullscreen" umožní YouTube videu přejít do režimu celé obrazovky.

Atribut title je důležitý pro přístupnost. Čtečky obrazovky ho používají k oznámení, co iframe obsahuje. Správný title by měl být popisný – například "Mapa k naší pobočce" nebo "YouTube video: Návod na instalaci".

Alternativy k iframe

V mnoha případech existují lepší moderní řešení než iframe. Object/Embed tagy pro vkládání PDF, SVG nebo multimédií. Web Components – moderní způsob vkládání opakovaně použitelných komponent s lepší kontrolou. AJAX načítání – dynamické načtení obsahu přes JavaScript bez iframe, lepší pro SEO. Server-side includes – načtení a vložení obsahu přímo na serveru. API integration – přímé využití API služby místo iframe embed.

Související pojmy