HTML iframe se používá k vložení dokumentu do dokumentu. Je to zkratka z anglického inline frame.

Syntaxe

<iframe> označuje vložený rámec. Používá se k vložení jiného dokumentu do našeho dokumentu.

<iframe src="url" title="popisek"> </iframe>

URL může být cokoliv, co je platné, title je doporučené, ale velmi užitečné pro slepecké čtečky. Další doporučené atributy jsou šířka height a výška width.

Příklad 1 — nastavení výšky a šířky
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
</head>
<body>

<h2>HTML vložený rámec</h2>
<p>Můžete použít šířku a výšku na omezení vloženého rámce iframe:</p>

<iframe src="div1.html" height="200" width="300" title="Příklad vloženého rámce"></iframe> (1)

</body>
</html>
1 height="200" nastaví výšku vloženého rámce na 200 bodů a width="300" nastaví šířku na 300 bodů.

html_iframe1.html

Příklad 2 — nastavení výšky a šířky jiným způsobem pomocí stylu
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
</head>
<body>

<h2>HTML vložený rámec</h2>
<p>Můžete použít šířku a výšku na omezení vloženého rámce iframe:</p>

<iframe src="div1.html" style="height:200px;width:300px" title="Příklad vloženého rámce"></iframe> (1)

</body>
</html>
1 style="height:200px;width:300px" dělá to samé, co v příkladě 1 height="200" a width="300".
Příklad 3 — odstranění okraje
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
</head>
<body>

<h2>HTML vložený rámec</h2>
<p>Můžete použít šířku a výšku na omezení vloženého rámce iframe:</p>

<iframe src="div1.html" style="height:200px;width:300px;border:none;" title="Příklad vloženého rámce"></iframe> (1)

</body>
</html>
1 border:none; ve stylu odstraňuje okraj rámce
Příklad 4 — nastavení červeného okraje
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
</head>
<body>

<h2>HTML vložený rámec</h2>
<p>Nastavení červeného okraje kolem iframe:</p>

<iframe src="div2.html" style="height:200px;width:300px;border:5px solid red;" title="Příklad vloženého rámce"></iframe> (1)

</body>
</html>
1 border:5px solid red; ve stylu nastavuje okraj rámce ma červený obdelník s čárou 5 bodů tlustou.

html_iframe4.html

iframe cílem pro odkaz

iframe může být cílem pro odkaz.

Atribut target v odkazu musí být stejný jako atribut jméno name v iframe.

Příklad 5 — iframe jako cíl pro odkaz
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
</head>
<body>

<h2>HTML vložený rámec</h2>
<p>iframe jako cíl pro odkaz:</p>

<iframe src="div2.html" name="iframe_a" style="height:600px;width:600px;border:5px solid red;" title="Příklad vloženého rámce"></iframe>
<p><a href="https://sspvc.lixis.cz/" target="iframe_a">sspvc.lixis.cz</a></p>

</body>
</html>

sspvc.lixis.cz

Bezpečnostní problém s <iframe>

Poznámka: iframe má i jednu nepěknou vlastnost.
Darebáci ho používají ke skrytí různých darebačin.
Co se stane, když nastavíme style="width:1;height:1;border:none;"?

https://sspvc.lixis.cz/

Příklad darebáckého vloženého rámce — šířka a výška 1px
<iframe src="div2.html" name="iframe_b" style="height:1px;width:1px;border:none;" title="Příklad darebáckého vloženého rámce"></iframe>
<p><a href="https://www.root.cz/" target="iframe_b"><b>https://sspvc.lixis.cz/</b></a></p>

Předchozí tučný odkaz se snažil po kliknutí načíst stránku https://www.root.cz/ a nikoliv https://sspvc.lixis.cz/ jak se snažil ukázat.

Jak to vypadá pokud nebude mít <iframe> šířku a výšku 1px, ale šířku 800px.
<iframe src="div3.html" name="iframe_c" style="height:600px;width:800px;border:none;" title="Příklad darebáckého vloženého rámce"></iframe>
<p><a href="https://www.root.cz/" target="iframe_c"><b>https://sspvc.lixis.cz</b></a></p>

Výsledek:

https://sspvc.lixis.cz/

Po kliknutí na podvodný odkaz <a href="https://www.root.cz/" target="iframe_c">sspvc.lixis.cz</a> zafunguje ochranný prvek prohlížeče a nastavení web serveru www.root.cz, který nedovolí načíst stránku do <iframe> z cizího webu.

Podrobnosti jsou https://support.mozilla.org/cs/kb/web-nepovoli-firefoxu-stranku-zobrazit-jako-vlozen?as=u&utm_source=inproduct

Je potřeba být opatrný při vkládání cizích dokumentů do své stránky, protože cizí weby toto mohou blokovat (a je to tak správně) pomocí bezpečnostního prvku protokolu HTTP X-Frame-Options. Podrobnosti https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

Tomuto se říká clickjacking a patří k jednomu z mnoha útoků záškodníků na Internetu.

Poučení

Při používání <iframe> vkládejte dokumenty jenom z vlastního webu. Web https://www.root.cz je solidní web a má nastavenu ochranu X-Frame-Options, jiné weby to nastaveny mít nemusí.

Všechny atributy iframe

V prvku <iframe> můžeme uvést následující atributy:

  • height - Udává výšku rámu v pixelech.

  • name - Udává jméno rámu. Pokud ve stránce, ve které je <iframe> vložený, uvedeme odkaz. Můžeme mu nastavit atribut target na jméno rámce a odkaz se poté otevře v daném <iframe>.

  • sandbox - Umožňuje zakázat některé akce na stránce v <iframe> z hlediska bezpečnosti. To se hodí zejména tehdy, když v <iframe> zobrazujeme cizí stránku. Pokud neuvedeme hodnotu atributu (sandbox=""), zapnou se všechna bezpečnostní opatření. Opatření můžeme upřesnit uvedením následujících hodnot (můžeme uvést více hodnot oddělených mezerou):

    • allow-same-origin - Povolí stejný původ vloženého a vkládaného dokumentu. (To znamená z jednoho webu).

    • allow-top-navigation - Povolí obsahu rámce, aby se navigoval na stránku, ve které je vložen.

    • allow-forms - Povolí odesílaní formulářů.

    • allow-scripts - Povolí spouštění skriptů.

  • seamless - Atribut je typu boolean. Pokud je uveden, je dokument v <iframe> zobrazen tak, jako by byl součástí hlavního dokumentu.

  • src - URL adresa zobrazovaného dokumentu.

  • srcdoc - Umožňuje přímo specifikovat vložený dokument, obsahuje tedy HTML kód.

  • width - Udává šířku rámu v pixelech.

Praktická ukázka