Come avviene lo scambio di dati tra iframe e la…

Esistono diversi modi per scambiare dati:

API PostMessage:

Metodo principale e sicuro.
Permette di inviare messaggi tra finestre (iframe/finestra genitore, finestre/tabs diversi) di domini diversi.
È importante specificare l’origin atteso per prevenire attacchi XSS.

// Invia dal genitore all’iframe
const iframeEl = document.getElementById('my-iframe');
iframeEl.contentWindow.postMessage('Ciao dal genitore!', 'https://trusted-domain.com');

// Ricezione nell’iframe
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://parent-domain.com') {
        return; // Verifica il mittente
    }
    console.log('Messaggio ricevuto nell’iframe:', event.data);
});

// Invia dall’iframe al genitore
window.parent.postMessage('Ciao dall’iframe!', 'https://parent-domain.com');

// Ricezione nel genitore
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://iframe-domain.com') {
        return; // Verifica il mittente
    }
    console.log('Messaggio ricevuto nel genitore:', event.data);
});

Accesso all’oggetto window (solo Same-Origin):

Se iframe e pagina principale sono nello stesso dominio (Politica di Same-Origin), possono accedere direttamente agli oggetti window dell’altro.

// Nel genitore
const iframeEl = document.getElementById('my-iframe');
const iframeWindow = iframeEl.contentWindow;
iframeWindow.someVariable = 'Valore dal genitore';
iframeWindow.someFunction();

// Nell’iframe
const parentWindow = window.parent;
console.log(parentWindow.someVariable);
parentWindow.someOtherFunction();

Hash URL (#):

Metodo semplice ma limitato.
Può trasmettere piccoli dati modificando il hash nell’URL dell’iframe.
Le modifiche all’hash non ricaricano la pagina.
Richiede di monitorare le modifiche dell’hash (ad esempio, tramite evento hashchange).

// Nel genitore, per cambiare l’hash dell’iframe
const iframeEl = document.getElementById('my-iframe');
iframeEl.contentWindow.location.hash = 'data=some_value';

// Nell’iframe, per leggere l’hash
window.addEventListener('hashchange', function() {
    const hash = window.location.hash;
    console.log('Hash cambiato:', hash);
    // Parsing dei dati dall’hash
});

Modificare location.href (meno preferibile):
- Trasmettere dati modificando l’URL dell’iframe e ricaricandolo.
- Non adatto per scambi frequenti.

Storage condiviso (Same-Origin):

localStorage e sessionStorage.
Se iframe e pagina principale sono nello stesso dominio, possono usare gli stessi storage.

// Nel genitore
localStorage.setItem('sharedData', JSON.stringify({ value: 'Esempio' }));

// Nell’iframe
const data = JSON.parse(localStorage.getItem('sharedData'));
console.log('Dati da localStorage:', data);

La scelta del metodo dipende dalla politica di sicurezza (Same-Origin Policy) e dal volume/tipo di dati trasmessi. PostMessage è la soluzione più flessibile e sicura per lo scambio tra domini diversi.

Come avviene lo scambio di dati tra iframe e la pagina principale?