Html iframe可以访问具有不同来源（域和端口）的父元素_Html_Jsp_Iframe_Popup_X Frame Options

Html iframe可以访问具有不同来源（域和端口）的父元素

html jsp iframe

Html iframe可以访问具有不同来源（域和端口）的父元素,html,jsp,iframe,popup,x-frame-options,Html,Jsp,Iframe,Popup,X Frame Options,我知道iframe标记可以访问具有相同域+端口的父元素。但是，如果父级和iframe具有不同的域+端口，该怎么办 i、 e 父域是http://aaa.com:63342，iframe域是http://aaa.com:9080（请注意它们有不同的端口）这两个页面的标题中都有首先，父框架使用表单submit调用iframe。像 ParentWindows with aaa.com:63342 document.form.target='iframe'； document.form.ac

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

i、 e

父域是

http://aaa.com:63342

，iframe域是

http://aaa.com:9080

（请注意它们有不同的端口）

这两个页面的标题中都有

首先，父框架使用表单submit调用iframe。像


ParentWindows with aaa.com:63342
document.form.target='iframe'；
document.form.actionhttp://aaa.com:9080//inFrame.jsp';
document.form.submit（）；

然后一个服务器返回jsp，如下所示


iframe with aaa.com:9080
问候语：
var div=document.createElement（'div'）；
div.textContent='Echo Hello'；
父项.document.body.appendChild（div）；

这是我所处情况的简单版本。然而，当我这样做时，浏览器控制台显示错误，如

Uncaught SecurityError:阻止了具有原点的帧”http://localhost:9080“从访问具有原点的帧”http://localhost:63342". 协议、域和端口必须匹配。

现在，我怀疑这种方法（在iframe和父级之间调用不同的主机）在一开始是否可行。。。可能吗

我怎样才能使它工作

非常感谢

绕道原帧

类似于

带有

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>

这是第三帧

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>


访问本地主机上的顶部框架：63342
函数setgrandor（）{
var greetings=getParams（）['greetings']；
window.top.setGreetings（问候语）；
}
//解析参数
函数getParams（）{
var param=新数组（）；
var url=decodeURIComponent（location.href）；
url=解码组件（url）；
var参数；
params=url.substring（url.indexOf（“？”）+1，url.length）；
参数=参数拆分（&）；
变量大小=参数长度；
var键，值；
对于（变量i=0；i


这里发生了什么
原始页面具有具有不同域的iframe
第二个页面（原始页面中的iframe）也有一个与原始页面具有相同原点的iframe
第二个页面将使用post/get将数据发送到其iframe（第三个页面）。我希望它可以通过parent.document
或iframe.contentDocument.document
访问其他框架元素，但这些将被SAMEORIGIN
策略阻止
在第三页中，您可以访问原始框架的函数和元素，因为它们具有相同的来源（域+端口）
谨慎
帧不能直接通信
只有那些页面有公共url，可以通过document.domain
<!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>

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

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