2016-03-08 6 views
0

Я знаю, что тег iframe может иметь доступ к родительскому элементу с тем же доменом + порты. Однако, если родительский и iframe имеет другой домен + порт?iframe может получить доступ к элементу родителей с разным происхождением (домен + порт)

т.е.

домен родителя является http://aaa.com:63342, и домен IFrame является http://aaa.com:9080. (Пожалуйста, обратите внимание, что они имеют разные порты)

Обе страницы имеют <meta http-equiv='X-Frame-Options' content='ALLOWAll'> в их заголовках.

  • first, parent frame call iframe with form submit. как ...
<!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> 

Это простой вариант ситуации, что я in. Однако, когда мне это нравится, в консоли браузера отображается ошибка. .

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 и родителем) возможно в первую очередь ... Возможно ли это?

Как это сделать?

Большое спасибо

ответ

0

Обход оригинальной рамы.

что-то вроде ...

оригинальной страница с 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> 

Затем страница (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> 

Что здесь происходит

  1. оригинальной страницу имеет IFRAME, который имеет другой домен
  2. второй страницу (фреймы в исходной странице) также имеет IFRAME, который имеет такое же происхождение с исходной страницей
  3. вторая страница отправит данные на свой iframe (третья страница) с помощью post/get. Я хочу, чтобы он мог получить доступ к другому элементу кадра через parent.document или iframe.contentDocument.document, но они будут заблокированы политикой SAMEORIGIN.
  4. На третьей странице вы можете получить доступ к функциям и элементам исходного кадра, так как они имеют одинаковое происхождение (домен + порты).

ВНИМАНИЕ

  1. кадры не могут общаться непосредственно
  2. только те страницы, имеет общий URL, можно установить вспомогательный домен через document.domain