Umieszczone treści to najlepszy sposób na zatrzymanie użytkowników w witrynie, a jednocześnie udostępnienie treści z innych stron lub witryn. Może to być po prostu osadzony tweet, który jest wyświetlany zgodnie ze stylem i formatem Twittera. Może to być zupełnie oddzielna witryna umieszczona we własnej witrynie, np. umieszczony w witrynie sklep Shopify, gdzie użytkownicy mogą dokonać zakupu bez opuszczania witryny.
Obecnie szczególnie ważne jest to, by umieszczanie treści na stronach było bezpieczne.
Programiści mogą umieszczać treści na stronie na kilka sposobów. Najczęstszą metodą jest użycie elementu <iframe>, który umożliwia umieszczanie w witrynie dowolnych treści za pomocą samego adresu URL. Można już dodać atrybut sandbox, by zwiększyć bezpieczeństwo elementu iframe.
Możesz też użyć proponowanego elementu HTML:
<fencedframe>to sposób umieszczania treści osób trzecich, który zapewnia ochronę prywatności użytkowników.- Aby zapewnić płynniejsze przenoszenie stron, proponujemy użycie
<portal>.
Czytaj dalej, aby dowiedzieć się, jak zwiększyć bezpieczeństwo umieszczonych treści.
Umieszczanie z elementami iframe
Elementów iframe można używać w różnych celach, takich jak dodawanie map lub formularzy na stronie z danymi kontaktowymi oraz wyświetlanie 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, który zawiera element iframe, jest nazywany parent kontekstem przeglądania.
Treści osób trzecich wyświetlane w elemencie iframe mogą wchodzić w interakcje z witryną nadrzędną za pomocą funkcji postMessage(). Umożliwia to programistom przesyłanie dowolnych wartości
między kontekstami przeglądania. Adresat wiadomości może otrzymać te wartości za pomocą detektora zdarzeń onmessage.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
Dodano zabezpieczenie za pomocą atrybutu sandbox
Jeśli w elemencie iframe umieszczono złośliwą treść, mogą wystąpić niezamierzone działania (takie jak wykonanie kodu JavaScript czy przesłanie formularza).
Aby tego uniknąć, atrybut sandbox ogranicza interfejsy API wykonywalne w elemencie iframe i wyłącza potencjalnie szkodliwe funkcje.
<iframe src="https://example.com" sandbox></iframe>
W trybie piaskownicy niektóre interfejsy API mogą być istotne dla umieszczonych treści. Aby zezwolić na wyłączony interfejs API, możesz bezpośrednio dodać argument do atrybutu piaskownicy.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
Specyfikacja sandbox może mieć kilka wartości, m.in. allow-forms, allow-same-origin, allow-popups i inne.
Zasady dotyczące uprawnień
W miarę opracowywania coraz bardziej zaawansowanych funkcji w internecie powstały zasady dotyczące uprawnień do zarządzania uprawnieniami dla wszystkich tych usług. Zasady uprawnień można stosować do witryny nadrzędnej oraz do zawartości elementu 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 z ogrodzonymi ramkami
Ramka chroniona (<fencedframe>) to proponowany element HTML na potrzeby umieszczonej treści, podobny do elementu iframe. W przeciwieństwie do elementu iframe chroniona ramka ogranicza komunikację z kontekstem umieszczania, aby umożliwić jej dostęp do danych z różnych witryn bez ich udostępniania w kontekście umieszczania. Analogicznie danych własnych na stronie nadrzędnej nie można udostępniać ramce chronionej.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames to propozycja Piaskownicy prywatności, która sugeruje, że witryny najwyższego poziomu powinny partycjonować dane. Wiele ofert w Piaskownicy prywatności ma zaspokajać potrzeby użytkowników w różnych witrynach bez stosowania plików cookie innych firm ani innych mechanizmów śledzenia. Niektóre interfejsy API Piaskownicy prywatności mogą wymagać wybranych dokumentów do renderowania w objętej ramce.
Na przykład zostanie utworzona ramka chroniona dla zwycięzcy aukcji reklam interfejsu FLEDGE API. Interfejs FLEDGE API udostępnia nieprzejrzyste źródło, niezależny od lokalizacji schemat URN, który może się renderować w obrębie ogrodzonej ramki. Źródła nieprzezroczyste umożliwiają witrynom wyświetlanie treści w witrynach bez ujawniania właścicielowi witryny adresu URL źródła reklam.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
Ramki ogrodzone nie zastąpią jednak elementów iframe. Nie musisz ich używać. Ramki ogrodzone są proponowane, aby ramka była bardziej prywatna, co pozwala na ich użycie, gdy dane z różnych partycji najwyższego poziomu muszą być wyświetlane na tej samej stronie.
Umieść z portalami
Portal (<portal>) to proponowany element HTML z niezależnym kontekstem przeglądania, który może usprawnić przenoszenie strony. Portale umieszczane są w nich treści, takie jak elementy iframe, ale użytkownik
nie ma dostępu do kodu portalu. Portal jest tylko do wyświetlania, a użytkownicy nie mogą w nim korzystać.
Portale są proste w obsłudze wielostronicowej aplikacji i umożliwiają płynne przejście do niej. Przejścia te mogą być animowane, aby szybko zastępować zawartość okna przeglądarki.
<portal src="https://example.com/"></portal>
Specyfikacja portalu jest wciąż na wczesnym etapie rozwoju.
Inne elementy HTML używane do umieszczania
W historii internetu zaproponowano wiele elementów HTML i utworzono interfejsy API służące do umieszczania treści. Przez jakiś czas można było tworzyć witryny z wieloma elementami <frame> i <frameset>. Witryny z kilkoma elementami <frameset> wyświetlają w pasku adresu URL strony nadrzędnej niezależnie od źródła poszczególnych ramek. Utrudniało to udostępnianie linków do treści w witrynie. Te interfejsy API zostały wycofane.
Chodziło też o stosowanie technologii wtyczek, takich jak element <applet> w języku Java, aby obsługiwać inne zastosowania. Później zastąpiono go elementem <object>. Oba te elementy były powszechnie używane do wyświetlania wtyczek Flash, ale były też używane do wyświetlania innych elementów HTML (podobnych do elementów iframe).
Inne elementy, takie jak <canvas>, <audio>, <video> i <svg>, wyrenderowały zarówno elementy <object>, jak i <applet>.
Metody <object> i <embed> nie zostały jeszcze oficjalnie wycofane, ale najlepiej ich unikać, zwłaszcza że niektóre działają w nietypowy sposób.
<applet> został usunięty ze specyfikacji HTML w 2017 r.
Podsumowanie
Możesz bezpiecznie umieszczać treści na dowolnej stronie internetowej, korzystając z istniejącej specyfikacji elementu iframe. Zaproponowaliśmy więcej elementów HTML, w tym <fencedframe> i <portal>, aby zwiększyć bezpieczeństwo i styl. W miarę postępów będziemy na bieżąco informować o postępach w rozwijaniu propozycji „Fenced Frames”.
Baner powitalny: Jackson So.