Перехватить сообщение iframe, вложенное iframe, кросс-домен - PullRequest
Новая
       12

Перехватить сообщение iframe, вложенное iframe, кросс-домен

0 голосов
/ 28 августа 2018

У меня есть веб-страница от domain1.com, там у меня есть iframe для domain2.com, а затем у меня есть еще один iframe внутри domain2.com для domain3.com

Я хочу перехватить сообщения от domain3.com в domain2.com. Если domain2.com не находится внутри domain1.com, то сообщения принимаются правильно, но если у меня domain2.com внутри domain1.com, то сообщения от domain3.com получен domain1.com вместо domain2.com. Есть ли способ поймать эти сообщения внутри domain2.com?

Структура такая:

domain1.com имеет внутри iframe src = "domain2.com" domain2.com имеет внутри iframe src = "domain3.com"

Когда я получаю доступ к domain2.com напрямую, он перехватывает сообщения domain3.com, когда я обращаюсь к domain1.com, тогда сообщения, отправленные с domain3.com, принимаются domain1.com вместо domain2.com

1 Ответ

0 голосов
/ 06 сентября 2018

Я пытался воссоздать твой ад iframe. Надеюсь, это то, что вы ищете. Это должно охватывать сценарии, которые вы перечислили выше. Пожалуйста, дайте мне знать, если я что-то не так понял.

Я также создал Плункер

index.html (domain1) 

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  domain 1

  <form id="form">
    <input type="text" placeholder="Enter message" name="message">
    <input type="submit" value="Click to send">
  </form>

  <iframe src="domain2.html" id="iframe" style="display:block;height:120px"></iframe>

  <script>
    window.addEventListener('message', function(event){
      const [message, domain] = event.data.split('|');
      alert(`domain1: Received ${message} from ${domain}`);
    });

    form.onsubmit = function() {
      iframe.contentWindow.postMessage(`${this.message.value}|domain1`, '*');
      return false;
    };
  </script>

</body>
</html>

domain2.html 

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  domain 2

  <form id="form">
    <input type="text" placeholder="Enter message" name="message">
    <input type="submit" value="Click to send">
  </form>

  <iframe src="domain3.html" id="iframe" style="display:block;height:60px"></iframe>

  <script>
    window.addEventListener('message', function(event){
      const [message, domain] = event.data.split('|');
      alert(`domain2: Received ${message} from ${domain}`);
    });


    form.onsubmit = function() {
      iframe.contentWindow.postMessage(`${this.message.value}|domain2`, '*');
      return false;
    };
  </script>

</body>
</html>

domain3.html 

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>

  domain 3

  <form id="form">
    <input type="text" placeholder="Enter message" name="message">
    <input type="submit" value="Click to send">
  </form>

  <script>
  window.addEventListener('message', function(event){
      const [message, domain] = event.data.split('|');
      alert(`domain3: Received ${message} from ${domain}`);
    });

    form.onsubmit = function() {
      window.parent.postMessage(`${this.message.value}|domain3`, '*');
      return false;
    };
  </script>

</body>
</html>
...