Ingesloten content is de beste manier om gebruikers op je site te houden en tegelijkertijd content van andere pagina's of sites te delen. Dit kan zo klein zijn als een ingesloten tweet, die wordt weergegeven in de stijl en opmaak van Twitter. Het kan ook zo groot zijn als een volledig aparte site die is ingesloten in je eigen site, zoals een ingesloten Shopify-winkel waar bezoekers een aankoop kunnen doen zonder je site te verlaten.
Het is nu belangrijker dan ooit dat onze sites veilig blijven wanneer we content insluiten.
Er zijn verschillende manieren waarop ontwikkelaars content op een website kunnen insluiten. De meest gebruikte techniek is het gebruik van een <iframe> , waarmee je elke content met alleen een URL op je 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 manier om de privacy te beschermen en inhoud van derden in te sluiten. -
<portal>wordt voorgesteld voor naadloze pagina-overgangen.
Lees verder en ontdek hoe u de beveiliging van uw ingesloten inhoud kunt verbeteren.
Insluiten met iframes
Iframes kunnen voor allerlei doeleinden worden gebruikt, bijvoorbeeld voor het toevoegen van kaarten of formulieren aan een contactpagina en voor 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 ingebed, wordt de bovenliggende browsecontext genoemd.
Content van derden die in een iframe wordt weergegeven, kan via postMessage() met de bovenliggende site communiceren. Dit stelt ontwikkelaars in staat om willekeurige waarden tussen browsercontexten te verzenden. De ontvanger van het bericht kan de eventlistener 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 -kenmerk
Als er schadelijke content in een iframe wordt geïmplementeerd, is het mogelijk dat onbedoelde acties (zoals het uitvoeren van JavaScript of het indienen van een formulier) worden uitgevoerd. Om dit te voorkomen, beperkt het sandbox -kenmerk de uitvoerbare API's in het iframe en schakelt het mogelijk schadelijke functies uit.
<iframe src="https://example.com" sandbox></iframe>
Sandbox kan bepaalde API's die belangrijk zijn voor uw ingesloten content onbeschikbaar maken. 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.
Machtigingsbeleid
Naarmate er steeds krachtigere functies voor het web werden ontwikkeld, werden er machtigingsbeleidsregels opgesteld om de machtigingen voor al deze functies te beheren. Een machtigingsbeleid kan worden toegepast op een bovenliggende site en op iframe-content. De machtigingen die aan een bovenliggende site worden verleend, kunnen ook aan de iframe worden verleend met behulp van het allow -kenmerk.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Inbedden met omheinde frames
Een fenced frame ( <fencedframe> ) is een voorgesteld HTML-element voor ingebedde content, vergelijkbaar met een iframe. In tegenstelling tot een iframe beperkt een fenced frame de communicatie met de inbeddingscontext, zodat het frame toegang heeft tot cross-site data zonder deze te delen met de inbeddingscontext. Evenzo kunnen first-party data op de bovenliggende pagina niet worden gedeeld met het fenced frame.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames is een Privacy Sandbox-voorstel dat suggereert dat top-level sites data zouden moeten partitioneren. Veel van de Privacy Sandbox-voorstellen zijn gericht op cross-site use cases, zonder cookies van derden of andere trackingmechanismen. Bepaalde Privacy Sandbox API's vereisen mogelijk dat bepaalde documenten binnen een fenced frame worden weergegeven .
Er wordt bijvoorbeeld een omheind frame gemaakt voor de winnaar van de advertentieveiling via de FLEDGE API. De FLEDGE API biedt een ondoorzichtige bron , een locatieonafhankelijk URN-schema, dat binnen een omheind frame kan worden weergegeven. Ondoorzichtige bronnen stellen sites in staat content op hun sites weer te geven zonder de URL van de advertentiebron aan de site-eigenaar te onthullen.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
Uiteindelijk zullen fenced frames iframes niet vervangen. Je hoeft ze niet te gebruiken. Fenced frames worden voorgesteld als een meer privé frame, voor gebruik wanneer gegevens van verschillende toplevelpartities op dezelfde pagina moeten worden weergegeven.
Insluiten met portals
Portal ( <portal> ) is een voorgesteld HTML-element met een onafhankelijke browsecontext, wat de overgang naar een nieuwe pagina zou kunnen verbeteren. Portals integreren content zoals iframes, 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 en de naadloze overgangen van een applicatie met één pagina. Deze overgangen kunnen worden geanimeerd, waardoor de inhoud van het browservenster snel wordt vervangen.
<portal src="https://example.com/"></portal>
De portaalspecificatie bevindt zich nog in een vroeg stadium van ontwikkeling.
Andere HTML-elementen die voor embeds worden gebruikt
Door de geschiedenis van het web heen zijn er een aantal HTML-elementen voorgesteld en API's ontwikkeld om content in te sluiten. Het was een tijdlang gebruikelijk om sites te maken met meerdere <frame> en <frameset> -elementen. Sites met meerdere <frameset> -elementen gaven de URL van de bovenliggende pagina weer in de adresbalk, ongeacht de bron van de vele afzonderlijke frames. Dit maakte het moeilijk om links naar content binnen de site te delen. Deze API's zijn inmiddels verouderd.
Er was ook een tijd waarin plugintechnologieën, zoals het Java <applet> -element, werden gebruikt voor andere use cases. Dit werd later vervangen door het <object> -element. Beide elementen werden vaak gebruikt om Flash-plugins 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, is het beter om ze te vermijden, vooral omdat ze vreemd gedrag vertonen. <applet> is in 2017 uit de HTML-specificatie verwijderd .
Conclusie
U kunt content veilig insluiten op elke website 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.
Ingesloten content is de beste manier om gebruikers op je site te houden en tegelijkertijd content van andere pagina's of sites te delen. Dit kan zo klein zijn als een ingesloten tweet, die wordt weergegeven in de stijl en opmaak van Twitter. Het kan ook zo groot zijn als een volledig aparte site die is ingesloten in je eigen site, zoals een ingesloten Shopify-winkel waar bezoekers een aankoop kunnen doen zonder je site te verlaten.
Het is nu belangrijker dan ooit dat onze sites veilig blijven wanneer we content insluiten.
Er zijn verschillende manieren waarop ontwikkelaars content op een website kunnen insluiten. De meest gebruikte techniek is het gebruik van een <iframe> , waarmee je elke content met alleen een URL op je 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 manier om de privacy te beschermen en inhoud van derden in te sluiten. -
<portal>wordt voorgesteld voor naadloze pagina-overgangen.
Lees verder en ontdek hoe u de beveiliging van uw ingesloten inhoud kunt verbeteren.
Insluiten met iframes
Iframes kunnen voor allerlei doeleinden worden gebruikt, bijvoorbeeld voor het toevoegen van kaarten of formulieren aan een contactpagina en voor 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 ingebed, wordt de bovenliggende browsecontext genoemd.
Content van derden die in een iframe wordt weergegeven, kan via postMessage() met de bovenliggende site communiceren. Dit stelt ontwikkelaars in staat om willekeurige waarden tussen browsercontexten te verzenden. De ontvanger van het bericht kan de eventlistener 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 -kenmerk
Als er schadelijke content in een iframe wordt geïmplementeerd, is het mogelijk dat onbedoelde acties (zoals het uitvoeren van JavaScript of het indienen van een formulier) worden uitgevoerd. Om dit te voorkomen, beperkt het sandbox -kenmerk de uitvoerbare API's in het iframe en schakelt het mogelijk schadelijke functies uit.
<iframe src="https://example.com" sandbox></iframe>
Sandbox kan bepaalde API's die belangrijk zijn voor uw ingesloten content onbeschikbaar maken. 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.
Machtigingsbeleid
Naarmate er steeds krachtigere functies voor het web werden ontwikkeld, werden er machtigingsbeleidsregels opgesteld om de machtigingen voor al deze functies te beheren. Een machtigingsbeleid kan worden toegepast op een bovenliggende site en op iframe-content. De machtigingen die aan een bovenliggende site worden verleend, kunnen ook aan de iframe worden verleend met behulp van het allow -kenmerk.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Inbedden met omheinde frames
Een fenced frame ( <fencedframe> ) is een voorgesteld HTML-element voor ingebedde content, vergelijkbaar met een iframe. In tegenstelling tot een iframe beperkt een fenced frame de communicatie met de inbeddingscontext, zodat het frame toegang heeft tot cross-site data zonder deze te delen met de inbeddingscontext. Evenzo kunnen first-party data op de bovenliggende pagina niet worden gedeeld met het fenced frame.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames is een Privacy Sandbox-voorstel dat suggereert dat top-level sites data zouden moeten partitioneren. Veel van de Privacy Sandbox-voorstellen zijn gericht op cross-site use cases, zonder cookies van derden of andere trackingmechanismen. Bepaalde Privacy Sandbox API's vereisen mogelijk dat bepaalde documenten binnen een fenced frame worden weergegeven .
Er wordt bijvoorbeeld een omheind frame gemaakt voor de winnaar van de advertentieveiling via de FLEDGE API. De FLEDGE API biedt een ondoorzichtige bron , een locatieonafhankelijk URN-schema, dat binnen een omheind frame kan worden weergegeven. Ondoorzichtige bronnen stellen sites in staat content op hun sites weer te geven zonder de URL van de advertentiebron aan de site-eigenaar te onthullen.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
Uiteindelijk zullen fenced frames iframes niet vervangen. Je hoeft ze niet te gebruiken. Fenced frames worden voorgesteld als een meer privé frame, voor gebruik wanneer gegevens van verschillende toplevelpartities op dezelfde pagina moeten worden weergegeven.
Insluiten met portals
Portal ( <portal> ) is een voorgesteld HTML-element met een onafhankelijke browsecontext, wat de overgang naar een nieuwe pagina zou kunnen verbeteren. Portals integreren content zoals iframes, 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 en de naadloze overgangen van een applicatie met één pagina. Deze overgangen kunnen worden geanimeerd, waardoor de inhoud van het browservenster snel wordt vervangen.
<portal src="https://example.com/"></portal>
De portaalspecificatie bevindt zich nog in een vroeg stadium van ontwikkeling.
Andere HTML-elementen die voor embeds worden gebruikt
Door de geschiedenis van het web heen zijn er een aantal HTML-elementen voorgesteld en API's ontwikkeld om content in te sluiten. Het was een tijdlang gebruikelijk om sites te maken met meerdere <frame> en <frameset> -elementen. Sites met meerdere <frameset> -elementen gaven de URL van de bovenliggende pagina weer in de adresbalk, ongeacht de bron van de vele afzonderlijke frames. Dit maakte het moeilijk om links naar content binnen de site te delen. Deze API's zijn inmiddels verouderd.
Er was ook een tijd waarin plugintechnologieën, zoals het Java <applet> -element, werden gebruikt voor andere use cases. Dit werd later vervangen door het <object> -element. Beide elementen werden vaak gebruikt om Flash-plugins 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, is het beter om ze te vermijden, vooral omdat ze vreemd gedrag vertonen. <applet> is in 2017 uit de HTML-specificatie verwijderd .
Conclusie
U kunt content veilig insluiten op elke website 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.