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

Question

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

即

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

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

首先，parent 框架调用带有表单提交的 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>

然后服务器 returns 如下 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 和 parent 之间调用不同的主机）是否可行...可能吗？

我怎样才能让它起作用？

非常感谢

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

注意

帧不能直接通信
只有那些页面具有公共 url，可以通过 document.domain

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

iframe can access element of parents with different origin(domain + port)

html

iframe

jsp

popup

x-frame-options