Ingesloten inhoud is de beste manier om gebruikers op uw site te houden, terwijl u inhoud van andere pagina's of sites deelt. Dit kan zo klein zijn als een ingesloten Tweet, die wordt weergegeven in de stijl en indeling van Twitter. Het kan zo groot zijn als een geheel afzonderlijke site die is ingebed in uw eigen site, zoals een ingebedde Shopify-winkel waar bezoekers een aankoop kunnen doen zonder uw site te verlaten.
Het is nu meer dan ooit belangrijk dat onze sites veilig blijven wanneer we inhoud insluiten.
Er zijn verschillende manieren waarop ontwikkelaars inhoud op een website kunnen insluiten. De meest gebruikelijke techniek is het gebruik van een <iframe> , waarmee u met slechts een URL alle inhoud op uw site kunt insluiten. Het is al mogelijk om het sandbox attribuut toe te voegen om een iframe veiliger te maken.
Als alternatief kunt u een voorgesteld HTML-element gebruiken:
-
<fencedframe>wordt voorgesteld als een privacybeschermende manier om inhoud van derden in te sluiten. -
<portal>wordt voorgesteld voor meer naadloze pagina-overgangen.
Lees verder om te leren hoe u de beveiliging van uw ingesloten inhoud kunt verbeteren.
Insluiten met iframes
Iframes kunnen voor allerlei doeleinden worden gebruikt, zoals het toevoegen van kaarten of formulieren aan een contactpagina en het weergeven van advertenties.
<iframe src="https://example.com/maps"></iframe>
Elk iframe heeft zijn eigen browsecontext, met zijn eigen sessiegeschiedenis en document . De context waarin het iframe is ingesloten, wordt de bovenliggende browsercontext genoemd.
Inhoud van derden die in een iframe wordt weergegeven, kan communiceren met de bovenliggende site via postMessage() . Hierdoor kunnen ontwikkelaars willekeurige waarden tussen browsercontexten verzenden. De berichtontvanger kan de gebeurtenislistener onmessage gebruiken om de waarden te ontvangen.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
Extra beveiliging met het sandbox attribuut
Als schadelijke inhoud in een iframe wordt geïmplementeerd, is het mogelijk dat onbedoelde acties (zoals het uitvoeren van JavaScript of het indienen van formulieren) kunnen worden uitgevoerd. Om dit te voorkomen, beperkt het sandbox attribuut de uitvoerbare API's in het iframe en schakelt mogelijk schadelijke functies uit.
<iframe src="https://example.com" sandbox></iframe>
Sandbox kan ervoor zorgen dat bepaalde API's die belangrijk zijn voor uw ingesloten inhoud niet beschikbaar zijn. Om een uitgeschakelde API toe te staan, kunt u expliciet een argument toevoegen aan het sandbox-attribuut.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
Er zijn een aantal mogelijke waarden voor de sandbox specificatie , waaronder allow-forms , allow-same-origin , allow-popups en meer.
Machtigingenbeleid
Omdat er steeds krachtigere functies voor internet zijn ontwikkeld, is er een machtigingsbeleid opgesteld om de machtigingen voor al deze functies te beheren. Een machtigingsbeleid kan worden toegepast op een bovenliggende site en op iframe-inhoud. De machtigingen die aan een bovenliggende site zijn verleend, kunnen ook aan het iframe worden verleend met behulp van het allow attribuut.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Inbedden met omheinde frames
Een omheind frame ( <fencedframe> ) is een voorgesteld HTML-element voor ingesloten inhoud, vergelijkbaar met een iframe. In tegenstelling tot een iframe beperkt een afgeschermd frame de communicatie met de inbeddingscontext, zodat het frame toegang heeft tot cross-site gegevens zonder deze te delen met de inbeddingscontext. Op dezelfde manier kunnen gegevens uit de eerste hand op de bovenliggende pagina niet worden gedeeld met het omheinde frame.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames is een Privacy Sandbox-voorstel dat suggereert dat sites op het hoogste niveau gegevens moeten verdelen. Veel van de Privacy Sandbox-voorstellen zijn bedoeld om te voldoen aan cross-site gebruiksscenario's, zonder cookies van derden of andere trackingmechanismen. Voor bepaalde Privacy Sandbox API's is het mogelijk dat bepaalde documenten binnen een omheind kader moeten worden weergegeven .
Er wordt bijvoorbeeld een omheind frame gemaakt voor de winnaar van de FLEDGE API-advertentieveiling. De FLEDGE API biedt een ondoorzichtige bron , een locatie-onafhankelijk URN-schema, dat binnen een omheind frame kan worden weergegeven. Met ondoorzichtige bronnen kunnen sites inhoud op hun sites weergeven zonder de URL van de advertentiebron aan de site-eigenaar bekend te maken.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
Uiteindelijk zullen omheinde frames iframes niet vervangen. Je hoeft ze niet te gebruiken. Omheinde frames worden voorgesteld voor een meer besloten frame voor gebruik wanneer gegevens van verschillende partities op het hoogste niveau op dezelfde pagina moeten worden weergegeven.
Insluiten met portalen
Portal ( <portal> ) is een voorgesteld HTML-element met een onafhankelijke browsercontext, die de ervaring van de pagina-overgang zou kunnen verbeteren. Portalen bevatten inhoud zoals iframe, maar de gebruiker heeft geen toegang tot de code van de portal. Een portal is alleen-lezen en kan niet door gebruikers worden gebruikt.
Portalen bieden de lage complexiteit van een applicatie met meerdere pagina's, met de naadloze overgangen van een applicatie met één pagina. Deze overgangen kunnen worden geanimeerd, waardoor de inhoud in het browservenster snel wordt vervangen.
<portal src="https://example.com/"></portal>
De portalspecificatie bevindt zich nog in de beginfase van ontwikkeling.
Andere HTML-elementen die worden gebruikt voor insluitingen
Door de hele webgeschiedenis heen zijn er een aantal HTML-elementen voorgesteld en API's gemaakt om inhoud in te sluiten. Een tijdlang was het gebruikelijk om sites te maken met meerdere <frame> - en <frameset> -elementen. Sites met meerdere <frameset> -elementen gaven de URL van de bovenliggende pagina in de adresbalk weer, ongeacht de bron van de vele individuele frames. Dit maakte het moeilijk om links naar inhoud op de site te delen. Deze API's zijn inmiddels verouderd.
Er was ook een tijd waarin plug-intechnologieën, zoals het Java <applet> -element, werden gebruikt om andere gebruiksscenario's te dekken. Dit werd later vervangen door het <object> element. Beide elementen werden vaak gebruikt om Flash-plug-ins weer te geven, maar werden ook gebruikt om andere HTML-elementen weer te geven (vergelijkbaar met iframes). Andere elementen, zoals <canvas> , <audio> , <video> en <svg> , hebben zowel de <object> - als de <applet> -elementen overbodig gemaakt.
Hoewel <object> en <embed> officieel nog niet verouderd zijn, kun je ze het beste vermijden, vooral omdat ze vreemd gedrag vertonen. <applet> is in 2017 uit de HTML-specificatie verwijderd .
Conclusie
U kunt inhoud veilig op elke website insluiten met behulp van de bestaande iframe-specificatie. Er zijn meer HTML-elementen voorgesteld, waaronder <fencedframe> en <portal> voor verbeteringen op het gebied van beveiliging en stijl. We zullen de voortgang van het Fenced Frames-voorstel blijven delen naarmate het vordert.
Heldenafbeelding door Jackson So.