Treści umieszczane w witrynie to najlepszy sposób na to, aby użytkownicy pozostawali w niej, a jednocześnie mogli korzystać z 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ż teraz dodać atrybut sandbox.
Możesz też użyć proponowanego elementu HTML:
<fencedframe>to sposób na umieszczanie treści innych firm, który chroni prywatność.<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, własną historię sesji i własny dokument. 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 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 w elementach iframe znajdują się złośliwe treści, mogą one powodować nieoczekiwane działania (np. wykonanie kodu JavaScript lub przesłanie formularza).
Aby tego uniknąć, atrybut sandbox ogranicza interfejsy API w 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. Aby zezwolić na wyłączone API, możesz wyraźnie dodać argument do atrybutu sandbox.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
Istnieje wiele możliwych wartości specyfikacji sandbox, w tym allow-forms, allow-same-origin, allow-popups i inne.
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 zastosować do witryny nadrzędnej i treści w ramce iframe. Uprawnienia przyznane witrynie nadrzędnej można też przyznać do ramki iframe, używając atrybutu allow.
<iframe src="https://example.com" allow="fullscreen"></iframe>
umieszczanie w ramkach chronionych,
Ramka ograniczona (<fencedframe>) to proponowany element HTML do umieszczania treści, podobny do ramki 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 z różnych witryn bez udostępniania ich kontekstowi, w którym jest umieszczona. 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 obszaru.
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 ogrodzonej ramki. Źródła nieprzejrzyste umożliwiają wyświetlanie treści w witrynach bez ujawniania właścicielowi witryny adresu URL źródła reklamy.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
Ostatecznie odizolowane ramki nie zastąpią tagó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 poprawić działanie przełączania stron. 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 odczytu i użytkownicy nie mogą wchodzić z nim w interakcję.
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 treści
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 ramek. Utrudniało to udostępnianie linków do treści w witrynie. Te interfejsy API zostały wycofane.
Był też czas, gdy technologie wtyczek, takie jak element Java <applet>, były używane do obsługi innych zastosowań. 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 (podobnych do 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
Za pomocą istniejącej specyfikacji iframe możesz bezpiecznie umieszczać treści w dowolnej witrynie. Wprowadziliśmy też propozycje dotyczące kolejnych elementów HTML, w tym <fencedframe> i <portal>, aby poprawić bezpieczeństwo i styl. Będziemy informować o postępach w realizacji propozycji dotyczącej wydzielonych ramek.