Osadzone treści to najlepszy sposób na utrzymanie użytkowników w witrynie przy jednoczesnym udostępnianiu treści z innych stron lub witryn. Może to być np. osadzony tweet, który wyświetla się w stylu i formacie Twittera. Może to być np. zupełnie oddzielna witryna osadzona w Twojej witrynie, np. osadzony sklep Shopify, w którym odwiedzający mogą dokonać zakupu bez opuszczania Twojej witryny.
Zapewnienie bezpieczeństwa naszych witryn podczas umieszczania w nich treści jest teraz ważniejsze niż kiedykolwiek.
Deweloperzy mogą umieszczać treści w witrynie na kilka sposobów. Najpopularniejszą techniką jest użycie <iframe>, które umożliwia umieszczenie w witrynie dowolnych treści za pomocą adresu URL. Możesz już dodać atrybut sandbox, aby zwiększyć bezpieczeństwo elementu iframe.
Możesz też użyć proponowanego elementu HTML:
<fencedframe>to proponowany sposób osadzania treści innych firm, który pozwala chronić prywatność.<portal>jest proponowany w celu zapewnienia płynniejszych przejść między stronami.
Czytaj dalej, aby dowiedzieć się, jak zwiększyć bezpieczeństwo osadzonych treści.
Umieszczanie za pomocą elementów iframe
Elementów iframe można używać w różnych przypadkach, np. do dodawania map lub formularzy na stronie kontaktowej oraz do wyświetlania reklam.
<iframe src="https://example.com/maps"></iframe>
Każdy element iframe ma własny kontekst przeglądania z własną historią sesji i dokumentem. Kontekst, w którym jest osadzony element iframe, jest nazywany nadrzędnym kontekstem przeglądania.
Treści innych firm wyświetlane w elemencie iframe mogą wchodzić w interakcje ze stroną nadrzędną za pomocą postMessage(). Umożliwia to deweloperom wysyłanie dowolnych wartości między kontekstami przeglądania. Odbiorca wiadomości może użyć detektora zdarzeń onmessage, aby otrzymać wartości.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
Zwiększone bezpieczeństwo dzięki atrybutowi sandbox
Jeśli w elemencie iframe zostaną wdrożone złośliwe treści, mogą zostać wykonane niezamierzone działania (np. wykonanie kodu JavaScript lub przesłanie formularza).
Aby tego uniknąć, sandboxatrybut ogranicza interfejsy API wykonywalne w ramce iframe i wyłącza potencjalnie szkodliwe funkcje.
<iframe src="https://example.com" sandbox></iframe>
Piaskownica może uniemożliwić dostęp do niektórych interfejsów API, które są ważne dla Twoich treści osadzonych. Aby zezwolić na wyłączony interfejs API, możesz jawnie dodać argument do atrybutu sandbox.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
Specyfikacja sandbox może przyjmować wiele wartości, m.in. allow-forms, allow-same-origin, allow-popups.
Zasady dotyczące uprawnień
Wraz z rozwojem coraz bardziej zaawansowanych funkcji internetowych powstały zasady dotyczące uprawnień, które umożliwiają zarządzanie uprawnieniami do wszystkich tych funkcji. Zasady dotyczące uprawnień
można stosować w przypadku witryny nadrzędnej i treści w ramce iframe. Uprawnienia przyznane witrynie nadrzędnej można też przyznać elementowi iframe za pomocą atrybutu allow.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Umieszczanie za pomocą ramek chronionych
Ogrodzona ramka (<fencedframe>) to proponowany element HTML do umieszczania treści, podobny do elementu iframe. W przeciwieństwie do elementu iframe ograniczony element iframe ogranicza komunikację z kontekstem osadzania, aby umożliwić mu dostęp do danych z różnych witryn bez udostępniania ich kontekstowi osadzania. Podobnie dane własne na stronie nadrzędnej nie mogą być udostępniane w ramce ograniczonej.
<fencedframe src="https://3rd.party.example"></fencedframe>
Ogrodzone ramki to propozycja w ramach Piaskownicy prywatności, która sugeruje, że witryny najwyższego poziomu powinny dzielić dane. Wiele propozycji dotyczących Piaskownicy prywatności ma na celu zaspokojenie potrzeb związanych z używaniem danych z wielu witryn bez plików cookie innych firm i innych mechanizmów śledzenia. Niektóre interfejsy API Piaskownicy prywatności mogą wymagać renderowania wybranych dokumentów w ramce ograniczonej.
Na przykład w przypadku zwycięzcy aukcji reklamowej FLEDGE API zostanie utworzona ramka ograniczona. Interfejs FLEDGE API będzie udostępniać nieprzezroczyste źródło, schemat URN niezależny od lokalizacji, który można renderować w ramce ograniczonej. Nieprzejrzyste źródła umożliwiają witrynom wyświetlanie treści bez ujawniania właścicielowi witryny adresu URL źródła reklamy.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
Ostatecznie ramki ograniczone nie zastąpią elementów iframe. Nie musisz ich używać. Ogrodzone ramki są proponowane jako bardziej prywatne ramki do użycia, gdy na tej samej stronie trzeba wyświetlić dane z różnych partycji najwyższego poziomu.
Umieszczanie w portalach
Portal (<portal>) to proponowany element HTML z niezależnym kontekstem przeglądania, który może poprawić wrażenia związane z przechodzeniem między stronami. Portale osadzają treści, takie jak elementy iframe, ale użytkownik nie ma dostępu do kodu portalu. Portal jest dostępny tylko do wyświetlania i użytkownicy nie mogą wchodzić z nim w interakcję.
Portale oferują niską złożoność aplikacji wielostronicowej z płynnymi przejściami aplikacji jednostronicowej. Przejścia te mogą być animowane i szybko zastępować treści w oknie przeglądarki.
<portal src="https://example.com/"></portal>
Specyfikacja portalu jest nadal na wczesnym etapie rozwoju.
Inne elementy HTML używane do umieszczania
W historii internetu zaproponowano wiele elementów HTML i utworzono interfejsy API do umieszczania treści. Przez pewien czas powszechne było tworzenie witryn z wieloma elementami <frame> i elementami <frameset>. W przypadku witryn z kilkoma elementami <frameset> na pasku adresu wyświetlał się adres URL strony nadrzędnej, niezależnie od źródła wielu poszczególnych ramek. Utrudniało to udostępnianie linków do treści w witrynie. Te interfejsy API zostały już wycofane.
Był też czas, kiedy technologie wtyczek, takie jak element Java <applet>, były używane w innych przypadkach. Został on później zastąpiony elementem <object>. Oba te elementy były często używane do wyświetlania wtyczek Flash, ale służyły też do wyświetlania innych elementów HTML (podobnie jak ramki iframe).
Inne elementy, takie jak <canvas>, <audio>, <video> i <svg>, sprawiły, że elementy <object> i <applet> stały się nieaktualne.
Chociaż elementy <object> i <embed> nie zostały jeszcze oficjalnie wycofane, lepiej ich unikać, zwłaszcza że wykazują pewne dziwne zachowania.
Element <applet> został usunięty ze specyfikacji HTML w 2017 roku.
Podsumowanie
Możesz bezpiecznie umieszczać treści w dowolnej witrynie, korzystając z istniejącej specyfikacji iframe. Zaproponowano więcej elementów HTML, w tym <fencedframe> i <portal>, aby zwiększyć bezpieczeństwo i poprawić styl. Będziemy Cię informować o postępach w propozycji Fenced Frames.