Comment l'échange de données entre iframe et la page principale se déroule-t-il?

Il existe plusieurs méthodes pour échanger des données:

1. API PostMessage:

   • La méthode principale et sécurisée.
   • Permet d’envoyer des messages entre fenêtres (iframe/fenêtre parente, différentes fenêtres/onglets) de domaines différents.
   • Il est important de spécifier l’origin attendu pour prévenir les attaques XSS.

   // Envoi depuis la fenêtre parente vers l’iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.postMessage('Bonjour du parent!', 'https://trusted-domain.com');
   
   // Réception dans l’iframe
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://parent-domain.com') {
           return; // Vérifier l’expéditeur
       }
       console.log('Message reçu dans l’iframe:', event.data);
   });
   
   // Envoi depuis l’iframe vers la fenêtre parente
   window.parent.postMessage('Bonjour de l’iframe!', 'https://parent-domain.com');
   
   // Réception dans la fenêtre parente
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://iframe-domain.com') {
           return; // Vérifier l’expéditeur
       }
       console.log('Message reçu dans le parent:', event.data);
   });
   

2. Accès à l’objet window (uniquement pour Same-Origin):

   • Si l’iframe et la page parente sont sur le même domaine (Politique de même origine), ils peuvent accéder directement aux objets window de l’autre.

   // Dans la fenêtre parente
   const iframeEl = document.getElementById('my-iframe');
   const iframeWindow = iframeEl.contentWindow;
   iframeWindow.someVariable = 'Valeur du parent';
   iframeWindow.someFunction();
   
   // Dans l’iframe
   const parentWindow = window.parent;
   console.log(parentWindow.someVariable);
   parentWindow.someOtherFunction();
   

3. Hash URL (#):

   • Méthode simple mais limitée.
   • Permet de transmettre de petites données en modifiant le hash dans l’URL de l’iframe.
   • Les changements de hash ne rechargent pas la page.
   • Nécessite de détecter les changements de hash (par exemple, via l’événement hashchange).

   // Dans la fenêtre parente, pour changer le hash de l’iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'data=some_value';
   
   // Dans l’iframe, pour lire le hash
   window.addEventListener('hashchange', function() {
       const hash = window.location.hash;
       console.log('Le hash a changé:', hash);
       // Analyse des données du hash
   });
   

4. Changer location.href (moins recommandé):

   • Transmettre des données en modifiant l’URL de l’iframe et en la rechargeant.
   • Peu adapté pour des échanges fréquents.

5. Stockages partagés (Same-Origin):

   • localStorage et sessionStorage.
   • Si l’iframe et la page parente sont sur le même domaine, ils peuvent utiliser les mêmes stockages.

   // Dans la fenêtre parente
   localStorage.setItem('sharedData', JSON.stringify({ value: 'Exemple' }));
   
   // Dans l’iframe
   const data = JSON.parse(localStorage.getItem('sharedData'));
   console.log('Données depuis localStorage:', data);
   

Le choix de la méthode dépend de la politique de sécurité (Politique de même origine) et du volume/type de données transmises. PostMessage est la solution la plus flexible et sécurisée pour les échanges inter-domaines.