Element iframe — src i sandbox

Element <iframe> osadza inny dokument HTML na bieżącej stronie. Każdy iframe ma własny kontekst przeglądania, DOM i zakres JavaScriptu. Zawartość iframe nie może uzyskać dostępu do DOM strony nadrzędnej bez wyraźnego zezwolenia.

Ustaw atrybut src na adres URL, który ma zostać osadzony: <iframe src="https://example.com" width="800" height="600">. iframe tworzy nowy kontekst przeglądania. Atrybut title jest wymagany ze względów dostępności: title="Embedded map".

sandbox nakłada ograniczenia na zawartość iframe: domyślnie wyłącza skrypty, formularze, wyskakujące okna i wtyczki. Aby przywrócić określone możliwości, dodaj odpowiednie uprawnienia: sandbox="allow-scripts allow-same-origin".

allow-scripts włącza JavaScript. allow-same-origin pozwala traktować iframe jako pochodzący z tego samego źródła (jest wymagane do uzyskania dostępu do localStorage). allow-forms umożliwia wysyłanie formularzy. allow-popups zezwala na window.open(). Należy przyznawać wyłącznie niezbędne minimum uprawnień.

Iframe między różnymi źródłami nie może uzyskać dostępu do DOM strony nadrzędnej — parent.document powoduje błąd bezpieczeństwa. Komunikacja między ramkami z różnych źródeł odbywa się za pomocą postMessage: iframe.contentWindow.postMessage(data, origin).

Aby wysłać wiadomość ze strony nadrzędnej do iframe, użyj: iframe.contentWindow.postMessage({ type: "update", data: {} }, "https://embed.example.com"). W iframe nasłuchuj wiadomości: window.addEventListener("message", handler). Przed przetworzeniem wiadomości zawsze sprawdzaj event.origin.

loading="lazy" na elementach iframe opóźnia ich ładowanie do momentu, gdy iframe znajdzie się blisko obszaru widoku, skracając początkowe ładowanie strony. Jest to przydatne w przypadku map, osadzonych filmów i widżetów mediów społecznościowych znajdujących się poniżej widocznej części strony i niewymagających natychmiastowego wyświetlenia.

Każdy iframe ładuje osobny dokument HTML, arkusze CSS, kod JavaScript i zasoby — to znaczący koszt zasobów. Proszę unikać iframe w przypadku treści, które można osadzić jako fragment kodu. Proszę stosować lazy loading iframe znajdujących się poniżej załamania strony. Warto rozważyć wzorce fasady (wyświetlenie elementu zastępczego i załadowanie treści po kliknięciu).

Proszę kontrolować sposób przewijania iframe: scrolling="no" wyłącza paski przewijania (jest przestarzałe; zamiast tego proszę użyć CSS overflow: hidden na iframe). Nowoczesne podejście polega na ustawieniu wysokości iframe zgodnej z wysokością jego zawartości, dzięki czemu wewnętrzne paski przewijania nie są potrzebne.

Atrybut allow przyznaje iframe funkcje Permissions Policy: allow="camera; microphone; fullscreen". Umożliwia to iframe żądanie dostępu do kamery, mikrofonu i Fullscreen API, nawet jeśli origin nadrzędny nie korzysta z tych funkcji.

YouTube i Google Maps udostępniają kody osadzania iframe. Zawierają one atrybuty allow dla trybu pełnoekranowego i automatycznego odtwarzania. Zawsze proszę dodać title="Video title", aby zapewnić dostępność dla użytkowników czytników ekranu. Atrybut sandbox zwykle nie jest dodawany do kodów osadzania treści zewnętrznych — wskazówek dotyczących bezpieczeństwa należy szukać w ich dokumentacji.

Co domyślnie robi atrybut sandbox z iframe, gdy nie określono żadnych wartości?

iframe osadzają zewnętrzne dokumenty w izolowanych kontekstach przeglądania. Atrybut sandbox ogranicza możliwości iframe — proszę przyznawać wyłącznie minimalny zakres wymaganych uprawnień. postMessage umożliwia bezpieczną komunikację między różnymi originami. lazy loading odracza koszt ładowania iframe znajdujących się poniżej załamania strony. Atrybut allow przyznaje funkcje Permissions Policy zaufanym osadzanym treściom zewnętrznym.