I contenuti incorporati sono il modo migliore per mantenere gli utenti sul tuo sito e condividere contenuti di altre pagine o siti. Potrebbe trattarsi di un Tweet incorporato, che viene visualizzato nello stile e nel formato di Twitter. Potrebbe trattarsi di un sito completamente separato incorporato nel tuo, ad esempio un negozio Shopify incorporato in cui i visitatori possono effettuare un acquisto senza abbandonare il 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 consiste nell'utilizzare un <iframe>, che consente di incorporare qualsiasi contenuto nel tuo sito con un semplice URL. È
già possibile aggiungere l'attributo sandbox per rendere più sicuro un iframe.
In alternativa, puoi utilizzare un elemento HTML proposto:
<fencedframe>è proposto come un modo che tutela la privacy per incorporare contenuti di terze parti.<portal>è proposto per transizioni di pagina più fluide.
Continua a leggere per scoprire come migliorare la sicurezza dei tuoi contenuti incorporati.
Incorporare con gli iframe
Gli iframe possono essere utilizzati per tutti i tipi di casi d'uso, ad esempio per aggiungere mappe o moduli a una pagina di contatto e per visualizzare gli 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 è denominato contesto di navigazione principale.
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
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 vengono implementati contenuti dannosi 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 tuoi 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.
Criteri relativi alle autorizzazioni
Con lo sviluppo di funzionalità sempre più potenti per il web, sono state create le norme relative alle autorizzazioni per gestirle tutte. Una policy sulle autorizzazioni
può essere applicata 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>
Incorporamento con frame isolati
Un fenced frame (<fencedframe>) è un
elemento HTML proposto per i contenuti incorporati, simile a un iframe. A differenza di
un iframe, un fenced frame limita la comunicazione con il contesto di incorporamento per
consentire al frame di accedere ai dati cross-site senza condividerli con il contesto di incorporamento. Allo stesso modo, i dati proprietari nella pagina del genitore non possono essere condivisi con
il frame isolato.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames è una proposta di Privacy Sandbox che suggerisce che i siti di primo livello devono partizionare i dati. Molte delle proposte di Privacy Sandbox mirano a soddisfare i casi d'uso cross-site, senza cookie di terze parti o altri meccanismi di monitoraggio. Alcune API Privacy Sandbox potrebbero richiedere il rendering di determinati documenti all'interno di un frame recintato.
Ad esempio, verrà creato un frame isolato per l'annuncio vincitore dell'asta dell'API FLEDGE. L'API FLEDGE fornirà una sorgente opaca, uno schema URN indipendente dalla posizione, che può essere visualizzato all'interno di un frame isolato. Le origini opache consentono ai siti di mostrare contenuti sui propri siti senza rivelare l'URL dell'origine dell'annuncio al proprietario del sito.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
In definitiva, i frame recintati non sostituiranno gli iframe. Non dovrai utilizzarli. I fenced frame sono proposti per un frame più privato da utilizzare quando i dati di diverse partizioni di primo livello devono essere visualizzati nella stessa pagina.
Incorporare con i portali
Portal (<portal>) è un elemento HTML proposto con un contesto di navigazione indipendente, che potrebbe migliorare l'esperienza di transizione della pagina. 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 multipagina 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 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 dall'origine dei numerosi singoli
frame. In questo modo era difficile condividere i link ai contenuti all'interno del sito. Queste API sono state ritirate.
In passato, le tecnologie dei plug-in, come l'elemento Java <applet>, venivano utilizzate per coprire altri casi d'uso. che è stato sostituito in un secondo momento
dall'elemento <object>. Entrambi questi elementi venivano comunemente utilizzati per visualizzare i plug-in Flash, ma venivano utilizzati anche per visualizzare altri elementi HTML (simili agli iframe).
Altri elementi, come <canvas>, <audio>, <video> e <svg>, hanno reso obsoleti gli elementi <object> e <applet>.
Sebbene <object> e <embed> non siano ancora ufficialmente ritirati, è meglio
evitarli, soprattutto perché hanno alcuni comportamenti strani.
<applet> è stato rimosso dalla specifica HTML nel 2017.
Conclusione
Puoi incorporare in modo sicuro i contenuti in qualsiasi sito web utilizzando la specifica iframe
esistente. Sono stati proposti altri elementi HTML, tra cui <fencedframe> e <portal>, per migliorare la sicurezza e lo stile. Continueremo a condividere i progressi
relativi alla proposta Fenced Frames man mano
che vengono compiuti.