拦截 iframe 消息嵌套 iframe，跨域答案

【问题标题】：Intercept iframe message nested iframe, cross domain拦截 iframe 消息嵌套 iframe，跨域
【发布时间】：2019-02-03 03:21:24
【问题描述】：

我有一个来自 domain1.com 的网页，我有一个 domain2.com 的 iframe，然后我在 domain3.com 的 domain2.com 内有另一个 iframe

我想在 domain2.com 中截取来自 domain3.com 的消息，如果 domain2.com 不在 domain1.com 内，则正确接收消息，但如果我在 domain1.com 内有 domain2.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 接收

【问题讨论】：

你在说什么消息？
postMessage 发送和 window.addEventListener("message",fn) 接收的 iframe 之间的消息
window.opener的内容是什么？你能演示一下你的代码吗？

标签： javascript iframe cross-domain

【解决方案1】：

我试图重建你的 iframe 地狱。希望这就是您正在寻找的。这应该涵盖您上面列出的场景。如果我误解了什么，请告诉我。

我还创建了一个Plunker

index.html（域1）

<!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>

【讨论】：

是的，这正是我的设置，但在您的示例中，域 2 正在接收域 3 的消息，而在我的域中，我不知道为什么 index.html 正在接收域 3 的消息。也许与CORS有关？我只控制 domain2.html，domain3.html 是一个 signaturit.com iframe（以防有人使用过该服务）。
域 3 向其父级发送消息，并且域 2 直接与域 3 对话。如果您查看 domain3，您会发现与其他 window.parent.postMessage 略有不同。这允许您与 domain2 或 domain1（以父级为准）交谈
如果这解决了您的问题，您能否将其标记为正确答案:)
它做了和没有，因为我无法控制 domain3.com 所以似乎没有办法接收 domain2.com 中的消息，因为它取决于 domain3 编码。