Hogyan történik az adatok cseréje az iframe és a fő oldal között?

Számos adatcsere módszer létezik:

1. PostMessage API:

   • Az alapvető és biztonságos módszer.
   • Lehetővé teszi üzenetek küldését különböző ablakok között (iframe/szülő, különböző domainekről).
   • Fontos megadni a várt origin értéket az XSS támadások megelőzése érdekében.

   // Küldés a szülő ablakból az iframe-be
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.postMessage('Üdv a szülőtől!', 'https://trusted-domain.com');
   
   // Fogadás az iframe-ben
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://parent-domain.com') {
           return; // Ellenőrizzük a küldőt
       }
       console.log('Üzenet érkezett az iframe-ben:', event.data);
   });
   
   // Küldés az iframe-ből a szülő ablakba
   window.parent.postMessage('Üdv az iframe-ből!', 'https://parent-domain.com');
   
   // Fogadás a szülő ablakban
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://iframe-domain.com') {
           return; // Ellenőrizzük a küldőt
       }
       console.log('Üzenet érkezett a szülőben:', event.data);
   });
   

2. A window objektumhoz való hozzáférés (csak Same-Origin esetén):

   • Ha az iframe és a szülő oldal ugyanazon a domainen van (Same-Origin Policy), közvetlenül hozzáférhetnek egymás window objektumaihoz.

   // A szülő ablakban
   const iframeEl = document.getElementById('my-iframe');
   const iframeWindow = iframeEl.contentWindow;
   iframeWindow.someVariable = 'Érték a szülőtől';
   iframeWindow.someFunction();
   
   // Az iframe-ben
   const parentWindow = window.parent;
   console.log(parentWindow.someVariable);
   parentWindow.someOtherFunction();
   

3. URL hash (#):

   • Egyszerű, de korlátozott módszer.
   • Kis adatok továbbítására alkalmas, a hash módosításával az iframe URL-jében.
   • A hash változása nem tölti újra az oldalt.
   • Figyelni kell a hash változását (pl. hashchange esemény segítségével).

   // A szülő oldalban, az iframe hash módosításához
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'data=valami_érték';
   
   // Az iframe-ben, a hash olvasásához
   window.addEventListener('hashchange', function() {
       const hash = window.location.hash;
       console.log('A hash megváltozott:', hash);
       // Adatok elemzése a hash-ből
   });
   

4. A location.href módosítása (kevésbé ajánlott):

   • Adatok továbbítása URL módosításával és újratöltéssel.
   • Nem alkalmas gyakori adatcsere esetén.

5. Megosztott tárolók (Same-Origin):

   • localStorage és sessionStorage.
   • Ha az iframe és a szülő ugyanazon a domainen van, ugyanazokat a tárolókat használhatják.

   // A szülő oldalban
   localStorage.setItem('sharedData', JSON.stringify({ value: 'Példa' }));
   
   // Az iframe-ben
   const data = JSON.parse(localStorage.getItem('sharedData'));
   console.log('Adatok a localStorage-ból:', data);
   

A módszer kiválasztása a biztonsági politikától (Same-Origin Policy) és az átadott adatok mennyiségétől/típusától függ. A PostMessage a leginkább rugalmas és biztonságos megoldás a kereszt domain közötti adatátvitelhez.