web-dev-qa-db-fra.com

Comment utilisez-vous window.postMessage sur plusieurs domaines?

Il semble que l’intérêt de window.postMessage est d’autoriser la communication en toute sécurité entre fenêtres/cadres hébergés sur différents domaines, mais cela ne semble pas réellement permettre que dans Chrome.

Voici le scénario:

  1. Incorporer un <iframe> (avec un src sur le domaine B*) dans une page sur le domaine A
  2. <Iframe> finit par être principalement une balise <script>, à la fin de laquelle l'exécution ...
  3. J'appelle window.postMessage ( une_data , page_on_A )

Le <iframe> est très certainement dans le contexte du domaine B, et j'ai confirmé que le javascript incorporé dans ce <iframe> s'exécute correctement et appelle postMessage avec les valeurs correctes.

Je reçois ce message d'erreur dans Chrome:

Impossible d'envoyer un message à [~ # ~] a [~ # ~] . Le destinataire a l'origine [~ # ~] b [~ # ~] .

Voici le code qui enregistre un écouteur d'événements de message dans la page sur A:

window.addEventListener(
  "message",
  function (event) {
    // Do something
  },
  false);

J'ai également essayé d'appeler window.postMessage(some_data, '*'), mais tout ce qui fait est de supprimer l'erreur.

Est-ce que je manque juste le point ici, window.postMessage (...) n'est-il pas fait pour ça? Ou est-ce que je le fais horriblement mal?

* Type MIME text/html, qu'il doit rester.

javascripthtml5google-chromexss
80
Kevin Montrose

Voici un exemple qui fonctionne sur Chrome 5.0.375.125.

La page B (contenu iframe):

<html>
    <head></head>
    <body>
        <script>
            top.postMessage('hello', 'A');
        </script>
    </body>
</html>

Notez l'utilisation de top.postMessage ou parent.postMessage ne pas window.postMessage ici

La page A:

<html>
<head></head>
<body>
    <iframe src="B"></iframe>
    <script>
        window.addEventListener( "message",
          function (e) {
                if(e.Origin !== 'B'){ return; } 
                alert(e.data);
          },
          false);
    </script>
</body>
</html>

A et B doivent être quelque chose comme http://domain.com

EDIT:

De autre question , il semble que les domaines (A et B ici) doivent avoir un / pour que postMessage fonctionne correctement.

75
Mic

Vous devriez poster un message de frame en parent après avoir été chargé.

script de cadre:

$(document).ready(function() {
    window.parent.postMessage("I'm loaded", "*");
});

Et écoute-le en parent:

function listenMessage(msg) {
    alert(msg);
}

if (window.addEventListener) {
    window.addEventListener("message", listenMessage, false);
} else {
    window.attachEvent("onmessage", listenMessage);
}

Utilisez ce lien pour plus d'infos: http://en.wikipedia.org/wiki/Web_Messaging

21
Golyo

Vous essayez probablement d’envoyer vos données de mydomain.com à www.mondomain.com ou inversement, NOTEZ que vous avez manqué "www". http://mydomain.com et http://www.mydomain.com sont des domaines différents de javascript.

2
Getoriks