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 :
Fenêtre iframe
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.
Philippe says:
Hello Cyril,
Je suis actuellement sur ce genre de problématique pour intégrer une application dans une autre sur des domaines différents.
12 mai 2011, 12:02Ce résultat me convenait parfaitement jusqu’à ce que j’essaye sur IE7 et là, marche pô 🙁
IE7 est un requirement client, donc pas possible d’utiliser autre chose.
Saurais-tu dire ce qui ne fonctionne pas dans ce cas ?
Merci pour ton aide.
Cyril says:
Salut Philippe,
Il semble que postMessage ne soit pas supporté par IE7, il va donc te falloir trouver une autre solution.
Je suis tombé sur un article et une autre page intéressants :
– http://softwareas.com/cross-domain-communication-with-iframes : un article qui explique différentes manière de faire de la communication cross-domain
– http://benalman.com/projects/jquery-postmessage-plugin/ : un plugin jQuery qui, a priori, utilise les techniques énoncées dans l’article ci-dessus pour faire la communication cross-domain.
Par ailleurs, si tes pages sont sur des domaines identiques (même si elles sont sur des domaines différents – cf document.domain), alors tu devrais pouvoir exécuter du javascript directement en appelant les fonctions.
Cyril
12 mai 2011, 14:07