Hoe vindt de gegevensuitwisseling plaats tussen iframe en de hoofdpagina?

Er zijn verschillende manieren om gegevens uit te wisselen:

1. PostMessage API:

   • De belangrijkste en veilige manier.
   • Hiermee kunnen berichten worden verzonden tussen vensters (iframe/oudervenster, verschillende vensters/tabs) van verschillende domeinen.
   • Het is belangrijk om de verwachte origin op te geven om XSS-aanvallen te voorkomen.

   // Verzenden vanuit het oudervenster naar iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.postMessage('Hallo van de ouder!', 'https://trusted-domain.com');
   
   // Ontvangen in iframe
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://parent-domain.com') {
           return; // Controleer de verzender
       }
       console.log('Ontvangen bericht in iframe:', event.data);
   });
   
   // Verzenden vanuit iframe naar ouder
   window.parent.postMessage('Hallo van iframe!', 'https://parent-domain.com');
   
   // Ontvangen in ouder
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://iframe-domain.com') {
           return; // Controleer de verzender
       }
       console.log('Ontvangen bericht in ouder:', event.data);
   });
   

2. Toegang tot het window-object (alleen voor Same-Origin):

   • Als iframe en hoofdpagina op hetzelfde domein staan (Same-Origin Policy), kunnen ze direct toegang krijgen tot elkaars window-objecten.

   // In het oudervenster
   const iframeEl = document.getElementById('my-iframe');
   const iframeWindow = iframeEl.contentWindow;
   iframeWindow.someVariable = 'Waarde van de ouder';
   iframeWindow.someFunction();
   
   // In iframe
   const parentWindow = window.parent;
   console.log(parentWindow.someVariable);
   parentWindow.someOtherFunction();
   

3. URL-hash (#):

   • Eenvoudige, maar beperkte methode.
   • Kleine gegevens kunnen worden verzonden door de hash in de URL van iframe te wijzigen.
   • Hash-wijzigingen laden de pagina niet opnieuw.
   • Het is nodig om hash-wijzigingen te volgen (bijvoorbeeld via het hashchange-evenement).

   // In het oudervenster, om de hash van iframe te wijzigen
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'data=some_value';
   
   // In iframe, om de hash te lezen
   window.addEventListener('hashchange', function() {
       const hash = window.location.hash;
       console.log('Hash is gewijzigd:', hash);
       // Gegevens parseren uit hash
   });
   

4. Wijzigen van location.href (minder aanbevolen):

   • Gegevens verzenden door de URL van iframe te wijzigen en opnieuw te laden.
   • Niet geschikt voor frequente uitwisseling.

5. Gedeelde opslag (Same-Origin):

   • localStorage en sessionStorage.
   • Als iframe en hoofdpagina op hetzelfde domein staan, kunnen ze dezelfde opslag gebruiken.

   // In het oudervenster
   localStorage.setItem('sharedData', JSON.stringify({ value: 'Voorbeeld' }));
   
   // In iframe
   const data = JSON.parse(localStorage.getItem('sharedData'));
   console.log('Gegevens uit localStorage:', data);
   

De keuze van methode hangt af van het beveiligingsbeleid (Same-Origin Policy) en het volume/type gegevens dat wordt uitgewisseld. PostMessage is de meest flexibele en veilige oplossing voor cross-domein uitwisseling.