iframe 可以访问不同来源（域+端口）的父元素答案

【问题标题】：iframe can access element of parents with different origin(domain + port)iframe 可以访问不同来源（域+端口）的父元素
【发布时间】：2016-03-08 06:25:38
【问题描述】：

我知道 iframe 标记可以访问具有相同域 + 端口的父元素。但是，如果 parent 和 iframe 具有不同的域 + 端口怎么办？

即

parent 的域是http://aaa.com:63342，iframe 的域是http://aaa.com:9080。（请注意它们有不同的端口）

两个页面的标题中都有<meta http-equiv='X-Frame-Options' content='ALLOWAll'>。

首先，父框架调用 iframe 并提交表单。喜欢...

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='X-Frame-Options' content='ALLOWAll'>
  <title>ParentWindows with aaa.com:63342</title>
</head>
<body>
  <form name='form' method='post' id='form' action=''>
      <input type='text' name='greetings' value='Hello from the otherside'>
  </form>
  <script>
      document.form.target = 'iframe';
      document.form.action = 'http://aaa.com:9080//inFrame.jsp';
      document.form.submit();
  </script>
</body>
<iframe src="" name='iframe'></iframe>
</html>

然后一个服务器在jsp中返回如下

 <% 
  response.setHeader("X-Frame-Options", "ALLOWAll"); 
  String greetings = request.getParameter("greetings");
%>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='X-Frame-Options' content='ALLOWAll'>
  <title>iframe with aaa.com:9080</title>
</head>
<body>
  <div>
      greetings message : <%= greetings %>
  </div>
</body>
<script>
  var div = document.createElement('div');
  div.textContent = 'Echo Hello';
  parent.document.body.appendChild(div);
</script>
</html>

这是我所处情况的简单版本。但是，当我这样做时，浏览器控制台会显示类似错误..

Uncaught SecurityError: Blocked a frame with origin "http://localhost:9080" from accessing a frame with origin "http://localhost:63342". Protocols, domains, and ports must match.

现在我首先怀疑这种方法（在 iframe 和父级之间调用不同的主机）是否可能......这可能吗？

我怎样才能使它工作？

非常感谢

【问题讨论】：

标签： html jsp iframe popup x-frame-options

【解决方案1】：

绕道到原始帧。

类似...

aaa.com:63342/original.html 的原始页面是

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='X-Frame-Options' content='ALLOWAll'>
  <title>ParentWindows with aaa.com:63342</title>
  <script>
    function setGreetings(greetings){
      document.getElementById('greetings').value = greetings;
    }
  </script>
</head>
<body>
  <form name='form' method='post' id='form' action=''>
      <input type='text' id='greetings' name='greetings' value='Hello from the otherside'>
  </form>
  <script>
      document.form.target = 'iframe';
      document.form.action = 'http://aaa.com:9080//inFrame.jsp';
      document.form.submit();
  </script>
</body>
<iframe src="" name='iframe'></iframe>
</html>

然后导入到原始页面（iframe 内部）的页面（jsp）看起来像......我可以打电话给aaa.com:9080/inFrame.jsp

<% 
  response.setHeader("X-Frame-Options", "ALLOWAll"); 
  String greetings = request.getParameter("greetings");
%>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='X-Frame-Options' content='ALLOWAll'>
  <title>iframe with aaa.com:9080</title>
</head>
<body>
  <div>
      greetings message : <%= greetings %>
  </div>
  <iframe id='iframe' src="http://localhost:63342/third.html?greetings=<%= greetings %>"></iframe>
</body>
</html>

这是第三帧aaa.com:63342/third.html，最后

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='X-Frame-Options' content='ALLOWALL'>
  <title>ACCESS TO TOP FRAME on localhost:63342</title>
</head>
<body>
<script>
    function setGrandfather(){
        var greetings = getParams()['greetings'];
        window.top.setGreetings(greetings);
    }

    //parsing parameters
    function getParams() {
      var param = new Array();
      var url = decodeURIComponent(location.href);
      url = decodeURIComponent(url);
      var params;
      params = url.substring( url.indexOf('?')+1, url.length );
      params = params.split("&");
      var size = params.length;
      var key, value;
      for(var i=0 ; i < size ; i++) {
          key = params[i].split("=")[0];
          value = params[i].split("=")[1];
          param[key] = value;
      }
      return param;
    }
</script>
</body>
</html>

这里发生了什么

原始页面具有不同域的 iframe
第二个页面（原始页面中的iframed）也有一个与原始页面同源的iframe
第二页将通过 post/get 将数据发送到其 iframe（第三页）。我希望它可以通过parent.document 或iframe.contentDocument.document 访问其他框架元素，但这些将被SAMEORIGIN 策略阻止。
在第三页中，您可以访问原始框架的功能和元素，因为它们具有相同的来源（域 + 端口）。

注意

框架不能直接通信
只有那些页面有共同的url，可以通过document.domain设置子域

【讨论】：