I contenuti incorporati sono il modo migliore per far rimanere gli utenti sul sito e allo stesso tempo condividere contenuti di altre pagine o siti. Può trattarsi di un tweet incorporato, che viene visualizzato nello stile e nel formato di Twitter. Può essere grande come un sito totalmente separato e 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.
Gli sviluppatori possono incorporare contenuti in un sito web in diversi modi. La tecnica più comune è l'utilizzo di una <iframe>, che ti consente di incorporare qualsiasi contenuto nel tuo sito usando solo un URL. È già possibile aggiungere l'attributo sandbox per rendere più sicuro un iframe.
In alternativa, puoi utilizzare un elemento HTML proposto:
<fencedframe>viene proposto come metodo per incorporare contenuti di terze parti che tutela la privacy.- Viene proposto
<portal>per transizioni di pagina più fluide.
Continua a leggere per scoprire come migliorare la sicurezza dei tuoi contenuti incorporati.
Incorpora con iframe
Gli iframe possono essere usati per tutti i tipi di casi d'uso, ad esempio per 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 una propria cronologia delle sessioni e un proprio documento. Il contesto che incorpora l'iframe viene definito contesto di navigazione parent.
I contenuti di terze parti visualizzati in un iframe possono interagire con il sito principale tramite postMessage(). Ciò consente agli sviluppatori di inviare valori arbitrari
tra i contesti di navigazione. Il destinatario dei messaggi 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 in un iframe viene eseguito il deployment di contenuti dannosi, è possibile che vengano eseguite azioni indesiderate (come l'esecuzione di JavaScript o l'invio di un modulo).
Per evitare che ciò accada, l'attributo sandbox limita le API eseguibili nell'iframe e disabilita 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 disabilitata, puoi aggiungere esplicitamente un argomento all'attributo sandbox.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
È disponibile una serie di possibili valori per la specifica sandbox, tra cui allow-forms, allow-same-origin, allow-popups e altri.
Norme relative alle autorizzazioni
Con lo sviluppo di funzionalità sempre più potenti per il web, sono stati creati criteri di autorizzazione per gestire le autorizzazioni per tutti gli utenti. È possibile applicare un criterio di autorizzazione
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>
Incorpora con frame protetti
Un frame recintato (<fencedframe>) è un
elemento HTML proposto per i contenuti incorporati, simile a un iframe. A differenza di un iframe, un frame recintato limita la comunicazione con il relativo contesto di incorporamento per consentire al frame di accedere ai dati tra siti senza condividerli con il contesto di incorporamento. Analogamente, i dati proprietari nella pagina principale non possono essere condivisi con il frame isolato.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames è una proposta di Privacy Sandbox che suggerisce ai siti di primo livello di partizionare i dati. Molte delle proposte Privacy Sandbox mirano a soddisfare casi d'uso tra siti, senza cookie di terze parti o altri meccanismi di monitoraggio. Alcune API Privacy Sandbox potrebbero richiedere alcuni documenti per il rendering all'interno di un frame recintato.
Ad esempio, verrà creato un frame recintato per il vincitore dell'asta dell'annuncio dell'API FLEDGE. L'API FLEDGE fornisce un'origine opaca, uno schema URN indipendente dalla località, che può essere visualizzato all'interno di un frame isolato. Le origini opache consentono ai siti di mostrare contenuti sui loro siti senza rivelare l'URL dell'origine annuncio al proprietario del sito.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
In definitiva, i frame protetti non sostituiranno gli iframe. senza doverli utilizzare. I frame protetti sono proposti per un frame più privato da utilizzare quando i dati di partizioni di primo livello diverse devono essere visualizzati sulla stessa pagina.
Incorporamento con portali
Portale (<portal>) è un elemento HTML proposto con un contesto di navigazione indipendente, che potrebbe migliorare l'esperienza di transizione delle 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ò interagire con gli utenti.
I portali offrono la bassa complessità di un'applicazione su più pagine con le transizioni fluide 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 gli incorporamenti
Nel corso della cronologia web sono stati proposti diversi elementi HTML e
API create per incorporare contenuti. Per un po' di tempo è stato praticato creare siti con
più elementi <frame>
e <frameset>. I siti con diversi elementi <frameset> mostravano l'URL della pagina principale nella barra degli indirizzi, indipendentemente dall'origine dei numerosi frame singoli. Di conseguenza era difficile condividere link ai contenuti all'interno del sito. Queste API sono state ritirate.
In passato, le tecnologie plug-in, come l'elemento <applet> Java, venivano utilizzate per coprire altri casi d'uso. Questo elemento è stato successivamente sostituito dall'elemento <object>. Entrambi questi elementi venivano comunemente utilizzati per visualizzare i plug-in Flash, ma sono stati utilizzati anche per visualizzare altri elementi HTML (simili agli iframe).
Altri elementi, come <canvas>, <audio>, <video> e <svg>, hanno reso obsoleti entrambi gli elementi <object> e <applet>.
Anche se <object> e <embed> non sono ancora stati deprecati ufficialmente, è meglio
evitarli, soprattutto perché hanno alcuni comportamenti strani.
<applet> è stato rimosso dalla specifica HTML nel 2017.
Conclusione
Puoi incorporare in modo sicuro i contenuti su qualsiasi sito web utilizzando la specifica iframe esistente. Sono stati proposti ulteriori elementi HTML, tra cui <fencedframe> e <portal>, per migliorare la sicurezza e lo stile. Continueremo a condividere i progressi relativi alla proposta di Fenced Frames man mano che progredisce.
Immagine hero di Jackson So.