Autor publikacji
Virtual Patriot - Administrator

iframe

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu iframe

Element iframe reprezentuje zagnieżdżony kontekst przeglądarki internetowej (okno, ramkę), do którego może zostać wczytany określony zasób internetowy.

Dodatkowe artykuły związane z elementem iframe

Informacje techniczne o elemencie iframe

kategoria ogólna
kontekst zewnętrzny

element HTML, który tworzy wewnętrzny kontekst wbudowany

Przykładowy Kod HTML

<aside>
  <h6>Statystyka</h6>
  <iframe src="dynamiczna-statystyka-01.html"></iframe>
</aside>

Kontekstem zewnętrznym przykładowego elementu "iframe" jest element "aside". Wspomniany element "aside" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst wbudowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "aside", jest prawidłowym kontekstem zewnętrznym dla elementu "iframe".

kontekst wewnętrzny

zawartość tekstowa

Przykładowy Kod HTML

<aside>
  <h6>Statystyka</h6>
  <iframe src="dynamiczna-statystyka-01.html"></iframe>
</aside>

Kontekstem wewnętrznym przykładowego elementu "iframe" jest wyłącznie pusty ciąg znaków. Wspomniany pusty ciąg znaków jest jednym z elementów, które należą do kategorii zawartość tekstowa, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli pusty ciąg znaków, jest prawidłowym kontekstem wewnętrznym dla elementu "iframe".

Przykładowy Kod HTML

<aside>
  <h6>Statystyka</h6>
  <iframe src="dynamiczna-statystyka-01.html">
    dane na temat sprzedaży
  </iframe>
</aside>

Kontekstem wewnętrznym przykładowego elementu "iframe" jest wyłącznie zawartość tekstowa, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli ciąg znaków "dane na temat sprzedaży", jest prawidłowym kontekstem wewnętrznym dla elementu "iframe".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<iframe> ... </iframe>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

inline-block

Przypuszczalnie domyślne reguły CSS elementu iframe

iframe {
  display:inline-block;
  width:300px;
  height:150px;
  border-width:2px;
  border-style:inset;
}

Interpretacja elementu iframe

Firefox

tak

Nie interpretuje atrybutu allowpaymentrequest.

Google Chrome

tak

Nie interpretuje atrybutu allowpaymentrequest.

Safari

tak

Nie interpretuje atrybutu allowpaymentrequest.

Opera

tak

Nie interpretuje atrybutu allowpaymentrequest.

Internet Explorer

tak

Interpretuje atrybut sandbox, lecz od wersji "10".

Interpretuje atrybut allowfullscreen, lecz od wersji "11".

Nie interpretuje atrybutu allowpaymentrequest, referrerpolicy oraz srcdoc.

Nie interpretuje wartości allow-presentation atrybutu sandbox.

Edge

tak

Nie interpretuje atrybutu allowpaymentrequest.

Opis atrybutów elementu iframe

Atrybut Lokalny

allowfullscreen

Przeznaczenie atrybutu allowfullscreen

Atrybut allowfullscreen wykorzystany wraz z elementem iframe pozwala nam określić czy zasoby internetowe, które zostały wczytane do zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez dany element iframe, mogą korzystać z mechanizmu przeglądarki internetowej odpowiedzialnego za tryb pełnoekranowy.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu allowfullscreen

allowfullscreen

Atrybut allowfullscreen jest atrybutem logicznym elementu iframe.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/podstrona-z-filmem-01.html" allowfullscreen></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: podstrona-z-filmem-01.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Film 01</title>
      </head>
      <body>

        <video src="https://webkod.pl/files/html/film-01.mp4" controls></video>

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Zasób internetowy "podstrona-z-filmem-01.html", który został wczytany do zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez przykładowy element "iframe" oraz wszystkie pozostałe zasoby internetowe należące do zasobu internetowego "podstrona-z-filmem-01.html", mogą korzystać z mechanizmu przeglądarki internetowej odpowiedzialnego za tryb pełnoekranowy, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "allowfullscreen".

Atrybut Lokalny

allowpaymentrequest

Przeznaczenie atrybutu allowpaymentrequest

Atrybut allowpaymentrequest wykorzystany wraz z elementem iframe pozwala nam określić czy zasoby internetowe, które zostały wczytane do zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez dany element iframe, mogą korzystać z mechanizmu przeglądarki internetowej odpowiedzialnego za żądanie zapłaty (tzw. Payment Request API).

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu allowpaymentrequest

allowpaymentrequest

Atrybut allowpaymentrequest jest atrybutem logicznym elementu iframe.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/transakcja-pieniezna.php" allowpaymentrequest></iframe>

  </body>
</html>

Zasób internetowy "transakcja-pieniezna.php", który został wczytany do zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez przykładowy element "iframe" oraz wszystkie pozostałe zasoby internetowe należące do zasobu internetowego "transakcja-pieniezna.php", mogą korzystać z mechanizmu przeglądarki internetowej odpowiedzialnego za żądanie zapłaty, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "allowpaymentrequest".

Atrybut Lokalny

height

Przeznaczenie atrybutu height

Atrybut height wykorzystany wraz z elementem iframe pozwala nam określić wartość wysokości, jaką powinien posiadać dany element iframe.

Wartość domyślna

BRAK (w każdej sytuacji) lub 150 w niektórych przeglądarkach internetowych

Wartości atrybutu height

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/strona-01.html" height="300"></iframe>

  </body>
</html>

Rezultat

Wartość wysokości przykładowego elementu "iframe" wynosi "300" pikseli, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "height" wraz z wartością "300".

Atrybut Lokalny

name

Przeznaczenie atrybutu name

Atrybut name wykorzystany wraz z elementem iframe pozwala nam określić nazwę, jaką powinien posiadać zagnieżdżonego kontekst przeglądarki internetowej reprezentowany przez dany element iframe.

Wartość domyślna

wartość pusta (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu name

nazwa

Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas nazwy.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe name="ramka-1"></iframe>

    <p>
      <a href="https://webkod.pl/files/html/strona-01.html" target="ramka-1">wczytaj przykładową tabelę HTML do elementu iframe</a>
    </p>

    <p>
      <a href="https://webkod.pl/files/html/zwierze-01.png" target="ramka-1">wczytaj przykładowy obrazek do elementu iframe</a>
    </p>

  </body>
</html>

Rezultat

Nazwą, jaką posiada zagnieżdżony kontekst przeglądarki internetowej reprezentowany przez przykładowy element "iframe", jest nazwa "ramka-1", ponieważ do wspomnianego elementu "iframe" został dodany atrybut "name" wraz z wartością "ramka-1".

Atrybut Lokalny

referrerpolicy

Przeznaczenie atrybutu referrerpolicy

Atrybut referrerpolicy wykorzystany wraz z elementem iframe pozwala nam określić, jakie składniki adresu danego dokumentu HTML może posiadać informacja, która zostanie przekazana przez przeglądarkę internetową do serwera, na którym znajduje się zasób internetowy, jaki został wczytany do zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez dany element iframe.

Mowa tu o takich składnikach adresu danego dokumentu HTML jak:

  • typ protokołu (np. https)
  • nazwa serwera (np. www.webkod.pl)
  • numer portu (np. 8080)
  • ścieżka do pliku (np. pliki/obrazki/lew.png)
  • zapytanie (np. ?imie=jan&nazwisko=kowalski)

Docelowe przekazanie informacji o adresie danego dokumentu HTML odbywa się za pomocą nagłówka referer w momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego, którego adres określa wartość atrybutu src danego elementu iframe.

Wartość domyślna

no-referrer-when-downgrade (w każdej sytuacji) lub wartość atrybutu content elementu meta posiadającego atrybut name o wartości referrer, jeżeli taki element meta znajduje się w zawartości danego dokumentu HTML

Wartości atrybutu referrerpolicy

no-referrer

Wartość no-referrer oznacza, że informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl -
http://abc.pl/plik-strony http://abc.pl/inny-plik -
http://abc.pl/plik-strony?x=8 http://xyz.pl -
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl -
https://abc.pl/plik-strony https://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 https://xyz.pl -
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik -
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl -
http://abc.pl/plik-strony https://abc.pl/inny-plik -
http://abc.pl/plik-strony?x=8 https://xyz.pl -
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik -
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl -
https://abc.pl/plik-strony http://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 http://xyz.pl -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://inna-strona.pl/inny-plik" referrerpolicy="no-referrer"></iframe>

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego "inny-plik", którego adres określa atrybut "src" przykładowego elementu "iframe" znajdującego się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony", do serwera o nazwie "http://inna-strona.pl", na którym znajduje się zasób internetowy "inny-plik", nie zostanie przekazana żadna informacja o adresie "http://moja-strona.pl/plik-strony" dokumentu HTML, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "referrerpolicy" wraz z wartością "no-referrer".

no-referrer-when-downgrade

Wartość no-referrer-when-downgrade oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie.

W sytuacji gdy adres danego dokumentu HTML posiada bardziej bezpieczny typ protokołu (np. https), a adres zasobu internetowego, który został wczytany do zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez dany element iframe, posiada mniej bezpieczny typ protokołu (np. http), wtedy informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/plik-strony
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/plik-strony?x=8
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/plik-strony
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/plik-strony?x=8
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/plik-strony
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/plik-strony?x=8
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl -
https://abc.pl/plik-strony http://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 http://xyz.pl -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://inna-strona.pl/inny-plik" referrerpolicy="no-referrer-when-downgrade"></iframe>

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego "inny-plik", którego adres określa atrybut "src" przykładowego elementu "iframe" znajdującego się w zawartości dokumentu HTML, którego adresem jest adres "https://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://inna-strona.pl", na którym znajduje się zasób internetowy "inny-plik", nie zostanie przekazana żadna informacja o adresie "https://moja-strona.pl/plik-strony?x=8" dokumentu HTML, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "referrerpolicy" wraz z wartością "no-referrer-when-downgrade".

origin

Wartość origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać jedynie: typ protokołu, nazwę serwera oraz numer portu.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl https://abc.pl/
https://abc.pl/plik-strony http://abc.pl/inny-plik https://abc.pl/
https://abc.pl/plik-strony?x=8 http://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik https://abc.pl/

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://inna-strona.pl/inny-plik" referrerpolicy="origin"></iframe>

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego "inny-plik", którego adres określa atrybut "src" przykładowego elementu "iframe" znajdującego się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://inna-strona.pl", na którym znajduje się zasób internetowy "inny-plik", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/", ponieważ do wspomnianego elementu "iframe" został dodany atrybut "referrerpolicy" wraz z wartością "origin".

origin-when-cross-origin

Wartość origin-when-cross-origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie, lecz tylko wtedy gdy adres danego dokumentu HTML oraz adres zasobu internetowego, który został wczytany do zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez dany element iframe, będą posiadały ten sam typ protokołu, nazwę serwera oraz numer portu, w przeciwnym przypadku informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać jedynie: typ protokołu, nazwę serwera oraz numer portu.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl https://abc.pl/
https://abc.pl/plik-strony http://abc.pl/inny-plik https://abc.pl/
https://abc.pl/plik-strony?x=8 http://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik https://abc.pl/

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://moja-strona.pl/moj-plik" referrerpolicy="origin-when-cross-origin"></iframe>

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego "moj-plik", którego adres określa atrybut "src" przykładowego elementu "iframe" znajdującego się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "https://moja-strona.pl", na którym znajduje się zasób internetowy "moj-plik", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/", ponieważ do wspomnianego elementu "iframe" został dodany atrybut "referrerpolicy" wraz z wartością "origin-when-cross-origin".

same-origin

Wartość same-origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie.

W sytuacji gdy adres danego dokumentu HTML oraz adres zasobu internetowego, który został wczytany do zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez dany element iframe, nie będą posiadały tego samego typu protokołu, nazwy serwera oraz numeru portu, wtedy informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl -
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl -
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl -
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl -
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl -
http://abc.pl/plik-strony https://abc.pl/inny-plik -
http://abc.pl/plik-strony?x=8 https://xyz.pl -
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik -
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl -
https://abc.pl/plik-strony http://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 http://xyz.pl -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://moja-strona.pl/moj-plik" referrerpolicy="same-origin"></iframe>

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego "moj-plik", którego adres określa atrybut "src" przykładowego elementu "iframe" znajdującego się w zawartości dokumentu HTML, którego adresem jest adres "https://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "https://moja-strona.pl", na którym znajduje się zasób internetowy "moj-plik", zostanie przekazana informacja w postaci ciągu znaków "https://moja-strona.pl/plik-strony?x=8", ponieważ do wspomnianego elementu "iframe" został dodany atrybut "referrerpolicy" wraz z wartością "same-origin".

strict-origin

Wartość strict-origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać jedynie: typ protokołu, nazwę serwera oraz numer portu.

W sytuacji gdy adres danego dokumentu HTML posiada bezpieczny typ protokołu (np. https), a adres zasobu internetowego, który został wczytany do zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez dany element iframe, posiada mniej bezpieczny typ protokołu (np. http), wtedy informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl -
https://abc.pl/plik-strony http://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 http://xyz.pl -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://inna-strona.pl/inny-plik" referrerpolicy="strict-origin"></iframe>

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego "inny-plik", którego adres określa atrybut "src" przykładowego elementu "iframe" znajdującego się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://inna-strona.pl", na którym znajduje się zasób internetowy "inny-plik", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/", ponieważ do wspomnianego elementu "iframe" został dodany atrybut "referrerpolicy" wraz z wartością "strict-origin".

strict-origin-when-cross-origin

Wartość strict-origin-when-cross-origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie, lecz tylko wtedy gdy adres danego dokumentu HTML oraz adres zasobu internetowego, który został wczytany do zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez dany element iframe, będą posiadały ten sam typ protokołu, nazwę serwera oraz numer portu, w przeciwnym przypadku informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać jedynie: typ protokołu, nazwę serwera oraz numer portu.

W sytuacji gdy adres danego dokumentu HTML posiada bezpieczny typ protokołu (np. https), a adres zasobu internetowego, który został wczytany do zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez dany element iframe, posiada mniej bezpieczny typ protokołu (np. http), wtedy informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl -
https://abc.pl/plik-strony http://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 http://xyz.pl -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://moja-strona.pl/moj-plik" referrerpolicy="strict-origin-when-cross-origin"></iframe>

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego "moj-plik", którego adres określa atrybut "src" przykładowego elementu "iframe" znajdującego się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://moja-strona.pl", na którym znajduje się zasób internetowy "moj-plik", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/plik-strony?x=8", ponieważ do wspomnianego elementu "iframe" został dodany atrybut "referrerpolicy" wraz z wartością "strict-origin-when-cross-origin".

unsafe-url

Wartość unsafe-url oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/plik-strony
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/plik-strony?x=8
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/plik-strony
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/plik-strony?x=8
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/plik-strony
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/plik-strony?x=8
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl https://abc.pl/plik-strony
https://abc.pl/plik-strony http://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 http://xyz.pl https://abc.pl/plik-strony?x=8
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik https://abc.pl/plik-strony?x=8

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://inna-strona.pl/inny-plik" referrerpolicy="unsafe-url"></iframe>

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego "inny-plik", którego adres określa atrybut "src" przykładowego elementu "iframe" znajdującego się w zawartości dokumentu HTML, którego adresem jest adres "https://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://inna-strona.pl", na którym znajduje się zasób internetowy "inny-plik", zostanie przekazana informacja w postaci ciągu znaków "https://moja-strona.pl/plik-strony?x=8", ponieważ do wspomnianego elementu "iframe" został dodany atrybut "referrerpolicy" wraz z wartością "unsafe-url".

Wartość "unsafe-url" obniża bezpieczeństwo naszej strony internetowej w sytuacji gdy nasza strona internetowa korzysta z zabezpieczenia TLS.

Atrybut Lokalny

sandbox

Przeznaczenie atrybutu sandbox

Atrybut sandbox wykorzystany wraz z elementem iframe pozwala nam określić informację o tym, jakie dodatkowe zasady bezpieczeństwa powinien posiadać zagnieżdżony kontekst przeglądarki internetowej reprezentowany przez dany element iframe.

Domyślnie zagnieżdżony kontekst przeglądarki internetowej reprezentowany przez element "iframe" nie posiada żadnych dodatkowych zasad bezpieczeństwa.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

wartość pusta (gdy podaliśmy wyłącznie wartość nieprawidłową)

Wartości atrybutu sandbox

wartość pusta

Wartość pusta oznacza, że wszystkie możliwe dodatkowe zasady bezpieczeństwa zostaną włączone.

Mowa tu o takich zasadach bezpieczeństwa jak:

  • blokada możliwości zatwierdzenia formularza HTML
  • blokada możliwości korzystania z Pointer Lock API
  • blokada możliwości utworzenia nowego kontekstu przeglądarki internetowej
  • blokada możliwości korzystania z Presentation API
  • traktowanie zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez dany element iframe jako zagnieżdżonego kontekstu pochodzącego z innego źródła (z innej strony internetowej, niż dany dokument HTML)
  • blokada możliwości uruchamiania skryptów
  • blokada możliwości nawigacji do kontekstu najdalszego przodka zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez dany element iframe

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/iframe-sandbox-01.html" width="500" height="300" sandbox></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: iframe-sandbox-01.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut sandbox - wartość pusta/forma logiczna</title>
      </head>
      <body>

        <form action="https://webkod.pl/php/submit-result.php">
          <label>
            Podaj kolor:
            <input type="text" name="kolor">
          </label>

          <button type="submit">spróbuj zatwierdzić</button>
        </form>

        <hr>

        <a href="https://webkod.pl/files/html/zwierze-01.png" target="_blank">spróbuj zobaczyć zdjęcie lwa w nowym oknie przeglądarki internetowej</a>

        <hr>

        Możliwość uruchamiania skryptów jest: <b id="rezultat-1">wyłączona</b>
        <script>window.document.getElementById('rezultat-1').innerHTML = 'WŁĄCZONA';</script>

        <hr>

        Lista COOKIES jest: <b id="rezultat-2">niedostępna</b>
        <script>window.document.getElementById('rezultat-2').textContent = window.document.cookie + 'true' ? 'DOSTĘPNA' : '';</script>

        <hr>

        <a href="https://webkod.pl/files/html/zwierze-01.png" target="_top">spróbuj zobaczyć zdjęcie lwa w aktualnym oknie przeglądarki internetowej</a>

        <hr>

        <a href="https://webkod.pl/files/html/owoc-01.png" target="_parent">spróbuj zobaczyć zdjęcie czereśni w aktualnym oknie przeglądarki internetowej</a>

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Zagnieżdżony kontekst przeglądarki internetowej reprezentowany przez przykładowy element "iframe" posiada włączone wszystkie możliwe dodatkowe zasady bezpieczeństwa, ponieważ wartością atrybutu "sandbox" wspomnianego elementu "iframe" jest wartość pusta.

Gdy wartością atrybutu "sandbox" elementu "iframe" nie jest wartość pusta, wtedy zagnieżdżony kontekst przeglądarki internetowej reprezentowany przez dany element "iframe" posiada włączone wszystkie możliwe dodatkowe zasady bezpieczeństwa, lecz nie tę zasadę bezpieczeństwa, którą wyłącza podana przez nas wartość atrybut "snadbox".

allow-forms

Wartość allow-forms oznacza, że blokada dotycząca możliwości zatwierdzenia formularza HTML zostanie wyłączona.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/iframe-sandbox-01.html" width="500" height="300" sandbox="allow-forms"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: iframe-sandbox-01.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut sandbox - wartość allow-forms</title>
      </head>
      <body>

        <form action="https://webkod.pl/php/submit-result.php">
          <label>
            Podaj kolor:
            <input type="text" name="kolor">
          </label>

          <button type="submit">spróbuj zatwierdzić</button>
        </form>

        <hr>

        <a href="https://webkod.pl/files/html/zwierze-01.png" target="_blank">spróbuj zobaczyć zdjęcie lwa w nowym oknie przeglądarki internetowej</a>

        <hr>

        Możliwość uruchamiania skryptów jest: <b id="rezultat-1">wyłączona</b>
        <script>window.document.getElementById('rezultat-1').innerHTML = 'WŁĄCZONA';</script>

        <hr>

        Lista COOKIES jest: <b id="rezultat-2">niedostępna</b>
        <script>window.document.getElementById('rezultat-2').textContent = window.document.cookie + 'true' ? 'DOSTĘPNA' : '';</script>

        <hr>

        <a href="https://webkod.pl/files/html/zwierze-01.png" target="_top">spróbuj zobaczyć zdjęcie lwa w aktualnym oknie przeglądarki internetowej</a>

        <hr>

        <a href="https://webkod.pl/files/html/owoc-01.png" target="_parent">spróbuj zobaczyć zdjęcie czereśni w aktualnym oknie przeglądarki internetowej</a>

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Zagnieżdżony kontekst przeglądarki internetowej reprezentowany przez przykładowy element "iframe" posiada włączone wszystkie możliwe dodatkowe zasady bezpieczeństwa, lecz blokada dotycząca możliwości zatwierdzenia formularza HTML została wyłączona, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "sandbox" wraz z wartością "allow-forms".

allow-pointer-lock

Wartość allow-pointer-lock oznacza, że blokada dotycząca możliwości korzystania z Pointer Lock API zostanie wyłączona.

allow-popups

Wartość allow-popups oznacza, że blokada dotycząca możliwości utworzenia nowego kontekstu przeglądarki internetowej zostanie wyłączona.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/iframe-sandbox-01.html" width="500" height="300" sandbox="allow-popups"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: iframe-sandbox-01.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut sandbox - wartość allow-popups</title>
      </head>
      <body>

        <form action="https://webkod.pl/php/submit-result.php">
          <label>
            Podaj kolor:
            <input type="text" name="kolor">
          </label>

          <button type="submit">spróbuj zatwierdzić</button>
        </form>

        <hr>

        <a href="https://webkod.pl/files/html/zwierze-01.png" target="_blank">spróbuj zobaczyć zdjęcie lwa w nowym oknie przeglądarki internetowej</a>

        <hr>

        Możliwość uruchamiania skryptów jest: <b id="rezultat-1">wyłączona</b>
        <script>window.document.getElementById('rezultat-1').innerHTML = 'WŁĄCZONA';</script>

        <hr>

        Lista COOKIES jest: <b id="rezultat-2">niedostępna</b>
        <script>window.document.getElementById('rezultat-2').textContent = window.document.cookie + 'true' ? 'DOSTĘPNA' : '';</script>

        <hr>

        <a href="https://webkod.pl/files/html/zwierze-01.png" target="_top">spróbuj zobaczyć zdjęcie lwa w aktualnym oknie przeglądarki internetowej</a>

        <hr>

        <a href="https://webkod.pl/files/html/owoc-01.png" target="_parent">spróbuj zobaczyć zdjęcie czereśni w aktualnym oknie przeglądarki internetowej</a>

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Zagnieżdżony kontekst przeglądarki internetowej reprezentowany przez przykładowy element "iframe" posiada włączone wszystkie możliwe dodatkowe zasady bezpieczeństwa, lecz blokada dotycząca możliwości utworzenia nowego kontekstu przeglądarki internetowej została wyłączona, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "sandbox" wraz z wartością "allow-popups".

allow-presentation

Wartość allow-presentation oznacza, że blokada dotycząca możliwości korzystania z Presentation API zostanie wyłączona.

allow-same-origin

Wartość allow-same-origin oznacza, że zostanie wyłączone traktowanie zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez dany element iframe jako zagnieżdżonego kontekstu pochodzącego z innego źródła (z innej strony internetowej, niż dany dokument HTML).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/iframe-sandbox-01.html" width="500" height="300" sandbox="allow-same-origin"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: iframe-sandbox-01.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut sandbox - wartość allow-same-origin</title>
      </head>
      <body>

        <form action="https://webkod.pl/php/submit-result.php">
          <label>
            Podaj kolor:
            <input type="text" name="kolor">
          </label>

          <button type="submit">spróbuj zatwierdzić</button>
        </form>

        <hr>

        <a href="https://webkod.pl/files/html/zwierze-01.png" target="_blank">spróbuj zobaczyć zdjęcie lwa w nowym oknie przeglądarki internetowej</a>

        <hr>

        Możliwość uruchamiania skryptów jest: <b id="rezultat-1">wyłączona</b>
        <script>window.document.getElementById('rezultat-1').innerHTML = 'WŁĄCZONA';</script>

        <hr>

        Lista COOKIES jest: <b id="rezultat-2">niedostępna</b>
        <script>window.document.getElementById('rezultat-2').textContent = window.document.cookie + 'true' ? 'DOSTĘPNA' : '';</script>

        <hr>

        <a href="https://webkod.pl/files/html/zwierze-01.png" target="_top">spróbuj zobaczyć zdjęcie lwa w aktualnym oknie przeglądarki internetowej</a>

        <hr>

        <a href="https://webkod.pl/files/html/owoc-01.png" target="_parent">spróbuj zobaczyć zdjęcie czereśni w aktualnym oknie przeglądarki internetowej</a>

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Zagnieżdżony kontekst przeglądarki internetowej reprezentowany przez przykładowy element "iframe" posiada włączone wszystkie możliwe dodatkowe zasady bezpieczeństwa, lecz traktowanie zagnieżdżonego kontekstu jako pochodzącego z innego źródła zostało wyłączone, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "sandbox" wraz z wartością "allow-same-origin".

allow-scripts

Wartość allow-scripts oznacza, że blokada dotycząca możliwości uruchamiania skryptów zostanie wyłączona.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/iframe-sandbox-01.html" width="500" height="300" sandbox="allow-scripts"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: iframe-sandbox-01.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut sandbox - wartość allow-scripts</title>
      </head>
      <body>

        <form action="https://webkod.pl/php/submit-result.php">
          <label>
            Podaj kolor:
            <input type="text" name="kolor">
          </label>

          <button type="submit">spróbuj zatwierdzić</button>
        </form>

        <hr>

        <a href="https://webkod.pl/files/html/zwierze-01.png" target="_blank">spróbuj zobaczyć zdjęcie lwa w nowym oknie przeglądarki internetowej</a>

        <hr>

        Możliwość uruchamiania skryptów jest: <b id="rezultat-1">wyłączona</b>
        <script>window.document.getElementById('rezultat-1').innerHTML = 'WŁĄCZONA';</script>

        <hr>

        Lista COOKIES jest: <b id="rezultat-2">niedostępna</b>
        <script>window.document.getElementById('rezultat-2').textContent = window.document.cookie + 'true' ? 'DOSTĘPNA' : '';</script>

        <hr>

        <a href="https://webkod.pl/files/html/zwierze-01.png" target="_top">spróbuj zobaczyć zdjęcie lwa w aktualnym oknie przeglądarki internetowej</a>

        <hr>

        <a href="https://webkod.pl/files/html/owoc-01.png" target="_parent">spróbuj zobaczyć zdjęcie czereśni w aktualnym oknie przeglądarki internetowej</a>

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Zagnieżdżony kontekst przeglądarki internetowej reprezentowany przez przykładowy element "iframe" posiada włączone wszystkie możliwe dodatkowe zasady bezpieczeństwa, lecz blokada dotycząca możliwości uruchamiania skryptów została wyłączona, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "sandbox" wraz z wartością "allow-scripts".

allow-top-navigation

Wartość allow-top-navigation oznacza, że blokada dotycząca możliwości nawigacji do kontekstu najdalszego przodka zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez dany element iframe zostanie wyłączona.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/iframe-sandbox-01.html" width="500" height="300" sandbox="allow-top-navigation"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: iframe-sandbox-01.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut sandbox - wartość allow-top-navigation</title>
      </head>
      <body>

        <form action="https://webkod.pl/php/submit-result.php">
          <label>
            Podaj kolor:
            <input type="text" name="kolor">
          </label>

          <button type="submit">spróbuj zatwierdzić</button>
        </form>

        <hr>

        <a href="https://webkod.pl/files/html/zwierze-01.png" target="_blank">spróbuj zobaczyć zdjęcie lwa w nowym oknie przeglądarki internetowej</a>

        <hr>

        Możliwość uruchamiania skryptów jest: <b id="rezultat-1">wyłączona</b>
        <script>window.document.getElementById('rezultat-1').innerHTML = 'WŁĄCZONA';</script>

        <hr>

        Lista COOKIES jest: <b id="rezultat-2">niedostępna</b>
        <script>window.document.getElementById('rezultat-2').textContent = window.document.cookie + 'true' ? 'DOSTĘPNA' : '';</script>

        <hr>

        <a href="https://webkod.pl/files/html/zwierze-01.png" target="_top">spróbuj zobaczyć zdjęcie lwa w aktualnym oknie przeglądarki internetowej</a>

        <hr>

        <a href="https://webkod.pl/files/html/owoc-01.png" target="_parent">spróbuj zobaczyć zdjęcie czereśni w aktualnym oknie przeglądarki internetowej</a>

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Zagnieżdżony kontekst przeglądarki internetowej reprezentowany przez przykładowy element "iframe" posiada włączone wszystkie możliwe dodatkowe zasady bezpieczeństwa, lecz blokada dotycząca możliwości nawigacji do kontekstu najdalszego przodka zagnieżdżonego kontekstu została wyłączona, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "sandbox" wraz z wartością "allow-top-navigation".

kombinacja wartości

Możemy podać kilka wartości, oddzielonych od siebie przynajmniej jednym znakiem spacji, dzięki czemu zagnieżdżony kontekst przeglądarki internetowej reprezentowany przez dany element iframe będzie mógł posiadać kilka wyłączonych zasad bezpieczeństwa jednocześnie.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/iframe-sandbox-01.html" width="500" height="300" sandbox="allow-same-origin allow-scripts"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: iframe-sandbox-01.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut sandbox - kombinacja wartości: allow-same-origin allow-scripts</title>
      </head>
      <body>

        <form action="https://webkod.pl/php/submit-result.php">
          <label>
            Podaj kolor:
            <input type="text" name="kolor">
          </label>

          <button type="submit">spróbuj zatwierdzić</button>
        </form>

        <hr>

        <a href="https://webkod.pl/files/html/zwierze-01.png" target="_blank">spróbuj zobaczyć zdjęcie lwa w nowym oknie przeglądarki internetowej</a>

        <hr>

        Możliwość uruchamiania skryptów jest: <b id="rezultat-1">wyłączona</b>
        <script>window.document.getElementById('rezultat-1').innerHTML = 'WŁĄCZONA';</script>

        <hr>

        Lista COOKIES jest: <b id="rezultat-2">niedostępna</b>
        <script>window.document.getElementById('rezultat-2').textContent = window.document.cookie + 'true' ? 'DOSTĘPNA' : '';</script>

        <hr>

        <a href="https://webkod.pl/files/html/zwierze-01.png" target="_top">spróbuj zobaczyć zdjęcie lwa w aktualnym oknie przeglądarki internetowej</a>

        <hr>

        <a href="https://webkod.pl/files/html/owoc-01.png" target="_parent">spróbuj zobaczyć zdjęcie czereśni w aktualnym oknie przeglądarki internetowej</a>

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Zagnieżdżony kontekst przeglądarki internetowej reprezentowany przez przykładowy element "iframe" posiada włączone wszystkie możliwe dodatkowe zasady bezpieczeństwa, lecz traktowanie zagnieżdżonego kontekstu jako pochodzącego z innego źródła zostało wyłączone, dodatkowo blokada dotycząca możliwości uruchamiania skryptów również została wyłączona, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "sandbox" wraz z następującą kombinacją wartości: "allow-same-origin allow-scripts".

Atrybut Lokalny

src

Przeznaczenie atrybutu src

Atrybut src wykorzystany wraz z elementem iframe pozwala nam określić adres zasobu internetowego, który chcemy, aby został wczytany do zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez dany element iframe.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu src

URL

Należy podać niepusty ciąg znaków w formie adresu URL.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/strona-01.html"></iframe>

  </body>
</html>

Rezultat

Zasobem internetowym, który został wczytany do zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez przykładowy element "iframe", jest zasób internetowy "strona-01.html" znajdujący się pod adresem "https://webkod.pl/files/html/strona-01.html", ponieważ do wspomnianego elementu "iframe" został dodany atrybut "src" wraz z wartością "https://webkod.pl/files/html/strona-01.html".

Atrybut Lokalny

srcdoc

Przeznaczenie atrybutu srcdoc

Atrybut srcdoc wykorzystany wraz z elementem iframe pozwala nam określić kod HTML, który chcemy, aby został wczytany do zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez dany element iframe.

Atrybut "srcdoc" ma pierwszeństwo przed atrybutem src elementu "iframe".

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu srcdoc

kod HTML

Należy podać ciąg znaków w formie kodu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe srcdoc="<b>Przykładowy kod HTML wczytany do elementu iframe.</b>"></iframe>

  </body>
</html>

Rezultat

Kodem HTML, który został wczytany do zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez przykładowy element "iframe", jest kod HTML "<b>Przykładowy kod HTML wczytany do elementu iframe.</b>", ponieważ do wspomnianego elementu "iframe" został dodany atrybut "srcdoc" wraz z wartością "<b>Przykładowy kod HTML wczytany do elementu iframe.</b>".

Atrybut Lokalny

width

Przeznaczenie atrybutu width

Atrybut width wykorzystany wraz z elementem iframe pozwala nam określić wartość szerokości, jaką powinien posiadać dany element iframe.

Wartość domyślna

BRAK (w każdej sytuacji) lub 300 w niektórych przeglądarkach internetowych

Wartości atrybutu width

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/strona-01.html" width="400"></iframe>

  </body>
</html>

Rezultat

Wartość szerokości przykładowego elementu "iframe" wynosi "400" pikseli, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "width" wraz z wartością "400".