Treści osadzone to najlepszy sposób na to, aby użytkownicy pozostawali w Twojej witrynie, a Ty jednocześnie udostępniałeś treści z innych stron lub witryn. Może to być coś tak małego jak wbudowany tweet, który wyświetla się w stylu i formacie Twittera. Może to być całkiem osobna witryna umieszczona w Twojej witrynie, np. wbudowany sklep Shopify, w którym użytkownicy mogą dokonać zakupu bez opuszczania Twojej witryny.
Obecnie, bardziej niż kiedykolwiek wcześniej, ważne jest, aby nasze witryny były bezpieczne podczas umieszczania treści.
Deweloperzy mogą umieszczać treści w witrynie na kilka sposobów. Najczęstszą metodą jest użycie <iframe>, która umożliwia umieszczanie dowolnych treści w witrynie za pomocą adresu URL. Aby zwiększyć bezpieczeństwo iframe, możesz już dodać atrybut sandbox.
Możesz też użyć proponowanego elementu HTML:
<fencedframe>jest proponowanym sposobem umieszczania treści osób trzecich, który zapewnia ochronę prywatności.<portal>jest zalecany, aby ułatwić przechodzenie między stronami.
Czytaj dalej, aby dowiedzieć się, jak zwiększyć bezpieczeństwo treści umieszczonych w ramach.
Umieszczenie za pomocą elementów iframe
Elementy iframe można stosować w różnych przypadkach, np. do dodawania map lub formularzy do strony kontaktowej oraz wyświetlania reklam.
<iframe src="https://example.com/maps"></iframe>
Każdy 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 ramce iframe mogą wchodzić w interakcję z witryną 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żywać detektora zdarzeń onmessagedo odbierania wartości.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
Wzmocnienie bezpieczeństwa dzięki atrybucie sandbox
Jeśli złośliwe treści są umieszczone w elementach iframe, mogą zostać wykonane nieoczekiwane działania (np. wykonanie kodu JavaScript lub przesłanie formularza).
Aby tego uniknąć, atrybut sandbox ogranicza interfejsy API w iframe, które można uruchomić, oraz 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. Aby zezwolić na wyłączony interfejs API, możesz dodać argument do atrybutu sandbox.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
Istnieje kilka możliwych wartości specyfikacji sandbox, w tym allow-forms, allow-same-origin, allow-popups i inne.
Zasady dotyczące uprawnień
W miarę pojawiania się coraz bardziej zaawansowanych funkcji internetowych powstają zasady uprawnień do zarządzania uprawnieniami dla wszystkich z nich. Zasady dotyczące uprawnień można zastosować do witryny nadrzędnej i treści w ramce iframe. Uprawnienia przyznane witrynie nadrzędnej można też przyznać elementowi iframe, używając atrybutu allow.
<iframe src="https://example.com" allow="fullscreen"></iframe>
umieszczanie w ramkach chronionych,
Chroniona ramka (<fencedframe>) to proponowany element HTML przeznaczony do umieszczonej treści, podobny do elementu iframe. W przeciwieństwie do elementu iframe, ogrodzenie ramki ogranicza komunikację z kontekstem, w którym jest umieszczona, aby umożliwić dostęp do danych między witrynami bez udostępniania ich kontekstowi. Podobnie dane własne na stronie rodzica nie mogą być udostępniane w ramach odizolowanego elementu.
<fencedframe src="https://3rd.party.example"></fencedframe>
Ogrodzone ramki to propozycja Piaskownicy prywatności, która sugeruje, że witryny najwyższego poziomu powinny dzielić dane. Wiele propozycji Piaskownicy prywatności ma na celu zaspokojenie potrzeb związanych z używaniem w wielu witrynach bez plików cookie innych firm ani innych mechanizmów śledzenia. Niektóre interfejsy API Piaskownicy prywatności mogą wymagać, aby wybrane dokumenty były renderowane w ramach wydzielonego elementu ramki.
Na przykład dla zwycięzcy aukcji reklamowej interfejsu FLEDGE API zostanie utworzony ograniczony element. Interfejs FLEDGE API udostępni nieprzezroczyste źródło, czyli schemat URN niezależny od lokalizacji, który może być renderowany w ramach wydzielonego obszaru. Nieprzezroczyste źródła pozwalają witrynom wyświetlać treści bez ujawniania adresu URL źródła reklam właścicielowi witryny.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
W ostatecznym rozrachunku ramki chronione nie zastąpią elementów iframe. Nie musisz ich używać. Ramki z ograniczeniami są zalecane, gdy na tej samej stronie trzeba wyświetlić dane z różnych partycji najwyższego poziomu.
Umieszczenie w portalach
Portal (<portal>) to proponowany element HTML z niezależnym kontekstem przeglądania, który może zwiększyć wygodę przechodzenia między stronami. Portale zawierają treści wbudowane, np. iframe, ale użytkownik nie może uzyskać dostępu do kodu portalu. Portal jest dostępny tylko do wyświetlania i użytkownicy nie mogą z niego korzystać.
Portale są mniej skomplikowane niż aplikacje wielostronicowe, a jednocześnie zapewniają płynne przejścia jak aplikacje jednostronicowe. Te przejścia mogą być animowane, co powoduje szybkie zastępowanie 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 na stronie
W historii Internetu pojawiło się wiele elementów HTML i interfejsów API stworzonych do umieszczania treści. Przez pewien czas tworzenie witryn z wieloma elementami <frame> i <frameset> było powszechne. Na stronach z kilkoma elementami <frameset> na pasku adresu wyświetlany był adres URL strony nadrzędnej, niezależnie od źródła wielu osobnych ramek. Utrudniało to udostępnianie linków do treści w witrynie. Te interfejsy API zostały wycofane.
W pewnym momencie korzystano też z technologii wtyczek, np. elementu <applet> Javy w innych przypadkach użycia. Zostało to później zastąpione elementem <object>. Oba te elementy były zwykle używane do wyświetlania wtyczek Flash, ale służyły też do wyświetlania innych elementów HTML (podobnie do elementów 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 mają dziwne zachowania.
W 2017 roku element <applet> został usunięty ze specyfikacji HTML.
Podsumowanie
Korzystając ze specyfikacji iframe, możesz bezpiecznie umieszczać treści w dowolnej witrynie. W celu poprawy bezpieczeństwa i stylu zaproponowano więcej elementów HTML, w tym <fencedframe> i <portal>. Będziemy informować o postępach w realizacji propozycji dotyczącej wydzielonych ramek.