跨域postMessage，识别iFrame答案

【问题标题】：Cross domain postMessage, identify iFrame跨域postMessage，识别iFrame
【发布时间】：2014-07-01 00:27:35
【问题描述】：

我使用postMessage 将事件从 iframe 发送到它的父文档。我可以控制双方，但内容来自两个不同的域。

我的简单问题是，我无法在其父回调方法中识别 iFrame。实现如下所示：

在 iFrame 中：

parent.postMessage(JSON.stringify({action: "closeView" }),'*');

在父窗口中：

window.addEventListener('message',function(event) {
if(event.origin !== 'https://example.com')
    return;

    // Parse message back to json
    var messageObject = JSON.parse(event.data);
    var source = event.source;
    /* this is returning: Window -URL- */
    console.log( source );
    /* This will throw Permission denied, although this code is inside of "parent" */
    console.log(source.parentNode);
},false);

我想识别 iframe 的某个父元素，它（逻辑上）在父文档内部。

当我尝试在所述对象上使用event.source.parentNode 或一些 jQuery 时，Firefox 说，我不能这样做来防止 XSS，错误：Error: Permission denied to access property 'parentNode'

如何获取触发 postMessage 事件监听器的 iFrame 的父元素？

【问题讨论】：

标签： javascript html cross-domain xss

【解决方案1】：

您可以为此使用窗口名称，因为它们从 iframe 标记传递到 iframe 上下文。

父文档：

<iframe name=fr2 src="data:text/html,%3Chtml%3E%0A%20%3Cscript%3E%20parent.postMessage%28%7Bname%3A%20window.name%7D%2C%20%22*%22%29%3B%3C/script%3E%0A%3C/html%3E"></iframe>
<iframe name=fr3 src="data:text/html,%3Chtml%3E%0A%20%3Cscript%3E%20parent.postMessage%28%7Bname%3A%20name%7D%2C%20%22*%22%29%3B%3C/script%3E%0A%3C/html%3E"></iframe>

<script>onmessage = function(e){ // use real event handlers in production
       alert("from frame: " + e.data.name);
 };</script>

iframe 文档：

<html>
 <script> parent.postMessage({name: name}, "*");</script>
</html>

警报“fr2”，然后是“fr3”。然后，您可以使用属性 CSS 选择器轻松地使用 name 属性在父 DOM 中查找 iframe。

window.name+iframe 概念的说明性演示：http://pagedemos.com/namingframes/

这种极其简单的方法也不受来自相同网址 iframe 的问题的影响。

【讨论】：

你说得对，非常感谢。只需在<iframe> 中获取window.name 即可返回预期的名称。就像我在去年的回答中所说的那样，我试图在eventListener 中获取id 或name，但这仍然不起作用。无论如何，最好只使用name 属性并像您一样使用postMessage 发送它。这显然比依赖 url 更好。当@Călin Darie 的赏金到期时，我会检查这个作为答案。也许这个用户也想添加。再次感谢。
这是一种非常直接的方法。您甚至可以使用唯一键在服务器上自动生成名称 - 这样您甚至不必担心跨窗口/标签污染。

【解决方案2】：

据我了解，这可以尝试这里假设你的主窗口的 url 是 www.abc.com\home.php

  <body>
         <iframe src="www.abc.com\getOtherDomainContent.php?otherUrl=www.xyz.com"/>
    </body>

此文件中的getOtherDomainContent.php需要编写ajax调用来获取跨url内容并将该内容推送到当前iframe窗口（getOtherDomainContent.php）的正文部分。

getOtherDomainContent.php 代码：

    <html>
         <head>
//import jqry lib or other you use.
          <script>
              $(document).ready({
               //getcontent of xyz.com
                var otherUrlContent=getAjaxHtml("www.xyz.com");
                 $("body").html(otherUrlContent);
                  // further  code after content pushed.
                  //you can easily access "parent.document" and else using parent which will give you all thing you want to do with your main window
                });
          </script>
         </head>
    </html>

【讨论】：

感谢您的努力，但这个答案并没有真正解决实际问题。为什么我首先要通过 ajax 加载远程内容？我可以设置<iframe src="http://www.example.com"> 来获取要显示的内容。要回答这个问题，必须使用postMessage。问题不是要显示一个页面，而是要监听来自<iframe> 的事件并识别在父文档中触发事件的<iframe>。干杯。
一点补充：我明白你想用 ajax 方法去哪里。但即使这应该可行（我想CORS 有很多麻烦），只要您在<iframe> 内导航，<iframe> 的内容就会被覆盖。

【解决方案3】：

就像在这个帖子中看到的那样：postMessage Source IFrame 可以像这样比较每个 iframe contentWindow 和 event.source：

/*each(iframe...){ */
frames[i].contentWindow === event.source

但我不太喜欢这个。我现在的解决方案如下所示：

在 iFrame 中：

parent.postMessage(JSON.stringify({action: "closeView", viewUrl: document.URL}),'*');

更新： docuent.URL 可能会成为问题，当您使用带有位置 (#anchor) 的查询或链接时，因为您当前的 url 将与 iframe 源中的一个不同。所以不要使用document.URL，最好使用[location.protocol, '//', location.host, location.pathname].join('') (Is there any method to get the URL without query string?)

在父文档中：

window.addEventListener('message',function(event) {

    if(event.origin !== 'https://example.com')
        return;

    // Parse message back to json
    var messageObject = JSON.parse(event.data);
    // Get event triggering iFrame
    var triggerFrame = $('iframe[src="'+messageObject.viewUrl+'"]');

 },false);

每个事件都必须将当前 iFrame URL 发送到父文档。我们现在可以使用给定的 URL 扫描文档以查找 iFrame 并使用它。

如果你们中的一些人知道更好的方法，请发布您的答案。

【讨论】：