Il peut être parfois nécessaire d’utiliser une iframe, pour accéder par exemple à des cookies sur un autre site, se logguer, etc. Le problème est que si vous utilisez une iframe sur un domaine différent, le navigateur va vous renvoyer une erreur.
iframe et sécurité
Lorsque les domaine ou port diffèrent entre les deux frames, le navigateur va refuser la communication. En effet, imaginez que vous puissiez afficher une iframe cachée dans votre page, pour ensuite y récupérer des informations sensibles.
Exemple : dans mon site example.org, je mets une iframe vers mabanque.com et je récupère les informations bancaires de l’utilisateur de mon site (si celui-ci est déjà loggué sur le site de la banque).
La solution
Pour autoriser la communication entre les frames, il faut utiliser le protocole de communication entre les fenêtres.
Cette communication se fait par évènement : une fenêtre envoie à l’autre un objet1, qui le reçoit en ajoutant un handler sur l’évènement « message ».
Exemple
Dans notre exemple, l’iframe enverra un message à la fenêtre principale.
Fenêtre principale :
-
// On rajoute un handler d’évènement
-
function onMessage(e)
-
{
-
// Vous pouvez vérifier l’origine de la fenêtre avec e.origin
-
document.getElementById(‘div-test’).innerHTML = "Réception du message " + JSON.stringify(e.data);
-
}
-
window.addEventListener("message", onMessage, true);
Fenêtre iframe
-
var dstWindow = window.parent;
-
// Vous pouvez choisir le domaine vers lequel vous acceptez d’envoyer un message (ici, tous les domaines)
-
dstWindow.postMessage([1,2,3], ‘*’);
1 : en fonction du navigateur, vous ne pourrez passer que des chaînes de caractères (Firefox 3.6 par exemple – Chrome supportant les objets). Pour pallier ce défaut, vous pouvez utiliser JSON.stringify et JSON.parse pour passer des objets comme des chaines ou des variables. Pour tout ce qui est DOM, ce n’est pas possible de faire passer les handler d’évènement définis dans la fenêtre source.
Leave a Reply