I contenuti incorporati sono il modo migliore per mantenere gli utenti sul tuo sito, condividendo al contempo contenuti di altre pagine o altri siti. Può essere un elemento piccolo come un tweet incorporato, visualizzato nello stile e nel formato di Twitter. Può essere grande come un sito completamente separato incorporato nel tuo, ad esempio un negozio Shopify incorporato in cui i visitatori possono effettuare un acquisto senza uscire dal tuo sito.
Ora più che mai è importante che i nostri siti rimangano sicuri quando incorporiamo contenuti.
Esistono diversi modi in cui gli sviluppatori possono incorporare contenuti in un sito web. La tecnica più comune è utilizzare un <iframe>, che consente di incorporare qualsiasi contenuto nel tuo sito con un solo URL. È già possibile aggiungere l'attributo sandbox per rendere un iframe più sicuro.
In alternativa, puoi utilizzare un elemento HTML proposto:
<fencedframe>viene proposto come un modo per incorporare contenuti di terze parti nel rispetto della privacy.<portal>è proposto per transizioni di pagina più fluide.
Continua a leggere per scoprire come migliorare la sicurezza dei contenuti incorporati.
Incorporare con iframe
Gli iframe possono essere utilizzati per tutti i tipi di casi d'uso, ad esempio l'aggiunta di mappe o moduli a una pagina di contatto e la visualizzazione di annunci.
<iframe src="https://example.com/maps"></iframe>
Ogni iframe ha il proprio contesto di navigazione, con la propria cronologia della sessione e il proprio documento. Il contesto che incorpora l'iframe è chiamato contesto di navigazione principale.
I contenuti di terze parti visualizzati in un iframe possono interagire con il sito principale tramite postMessage(). In questo modo, gli sviluppatori possono inviare valori arbitrari tra i diversi contesti di navigazione. Il destinatario del messaggio può utilizzare il listener di eventi onmessage
per ricevere i valori.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
Maggiore sicurezza con l'attributo sandbox
Se i contenuti dannosi vengono implementati in un iframe, è possibile che vengano eseguite azioni non intenzionali (ad esempio l'esecuzione di JavaScript o l'invio di moduli).
Per evitare questo problema, l'attributo sandbox limita le API eseguibili nell'iframe e disattiva le funzionalità potenzialmente dannose.
<iframe src="https://example.com" sandbox></iframe>
La sandbox potrebbe rendere non disponibili alcune API importanti per i contenuti incorporati. Per consentire un'API disattivata, puoi aggiungere esplicitamente un argomento all'attributo sandbox.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
Esistono diversi valori possibili per la
specifica sandbox, tra cui allow-forms, allow-same-origin, allow-popups e altri.
Norme relative alle autorizzazioni
Man mano che venivano sviluppate funzionalità sempre più potenti per il web, sono stati creati criteri di autorizzazione per gestire le autorizzazioni per tutte. Un criterio di autorizzazione può essere applicato a un sito principale e ai contenuti iframe. Le autorizzazioni concesse
a un sito principale possono essere concesse anche all'iframe utilizzando l'attributo allow.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Eseguire l'embed con frame delimitati
Un frame delimitato (<fencedframe>) è un elemento HTML proposto per i contenuti incorporati, simile a un iframe. A differenza di un iframe, un frame delimitato limita la comunicazione con il relativo contesto di incorporamento per consentire al frame di accedere ai dati cross-site senza condividerli con il contesto di incorporamento. Analogamente, i dati proprietari nella pagina del proprietario non possono essere condivisi con il frame delimitato.
<fencedframe src="https://3rd.party.example"></fencedframe>
I frame delimitati sono una proposta di Privacy Sandbox che suggerisce che i siti di primo livello debbano partizionare i dati. Molte delle proposte di Privacy Sandbox hanno lo scopo di soddisfare i casi d'uso cross-site, senza cookie di terze parti o altri meccanismi di monitoraggio. Alcune API Privacy Sandbox potrebbero richiedere di eseguire il rendering di documenti selezionati all'interno di un frame delimitato.
Ad esempio, verrà creato un frame delimitato per il vincitore dell'asta di annunci dell'API FLEDGE. L'API FLEDGE fornirà un'origine opaca, schemmi URN indipendenti dalla posizione, che possono essere visualizzati in un frame delimitato. Le origini opache consentono ai siti di mostrare contenuti sui propri siti senza rivelare l'URL dell'origine annuncio al proprietario del sito.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
Alla fine, i frame delimitati non sostituiranno gli iframe. Non dovrai utilizzarli. I frame delimitati sono proposti per un frame più privato da utilizzare quando è necessario visualizzare i dati di diverse partizioni di primo livello nella stessa pagina.
Incorporare con i portali
Portale (<portal>) è un elemento HTML proposto con un contesto di navigazione indipendente, che potrebbe migliorare l'esperienza di transizione tra le pagine. I portali incorporano contenuti come iframe, ma l'utente non può accedere al codice del portale. Un portale è di sola visualizzazione e non può essere utilizzato dagli utenti.
I portali offrono la bassa complessità di un'applicazione a più pagine con le transizioni senza interruzioni di un'applicazione a pagina singola. Queste transizioni possono essere animate, sostituendo rapidamente i contenuti nella finestra del browser.
<portal src="https://example.com/"></portal>
La specifica del portale è ancora nelle prime fasi di sviluppo.
Altri elementi HTML utilizzati per le incorporazioni
Nel corso della storia del web, sono stati proposti diversi elementi HTML e sono state create API per incorporare contenuti. Per un po' di tempo, era comune creare siti con più elementi <frame> e un elemento <frameset>. I siti con diversi elementi <frameset> mostravano l'URL della pagina principale nella barra degli indirizzi, indipendentemente dalla sorgente dei singoli frame. Ciò ha reso difficile condividere i link ai contenuti all'interno del sito. Queste API sono state ritirate.
C'è stato anche un periodo in cui le tecnologie dei plug-in, come l'elemento Java <applet>, venivano utilizzate per coprire altri casi d'uso. Successivamente è stato sostituito dall'elemento
<object>. Entrambi questi elementi erano comunemente utilizzati per visualizzare i plug-in Flash, ma anche per visualizzare altri elementi HTML (simili agli iframe).
Altri elementi, come <canvas>, <audio>, <video> e <svg>, hanno reso obsoleti sia gli elementi <object> che <applet>.
Anche se <object> e <embed> non sono ancora ufficialmente ritirati, è meglio evitarli, soprattutto perché presentano alcuni comportamenti strani.
<applet> è stato rimosso dalla specifica HTML nel 2017.
Conclusione
Puoi incorporare contenuti in modo sicuro in qualsiasi sito web utilizzando la specifica iframe esistente. Per migliorare la sicurezza e lo stile sono stati proposti altri elementi HTML, tra cui <fencedframe> e <portal>. Continueremo a condividere i progressi della proposta relativa ai frame delimitati man mano che si sviluppa.