타 도메인 iframe 제어

타 도메인간 iframe 제어

오늘 페이지 수정을 하던 도중 타 도메인의 게시판을 들고올 일이 생겼습니다.

곧장 iframe 태그를 생각하며.. 순조롭게 진행될거라 생각하던 찰나 생각지도 못한 문제에 봉착했습니다 ㅠ.ㅠ

A 도메인에서 B 도메인을 호출하여 제가 원하는 부분을 불러오는것 까진 문제가 없었습니다.

그러나.. 불러오기만 하는건 의미가 없죠. 스크롤링을 없애고 자동 리사이징이 되게 하는것이 제 목적이었습니다.

그리하여 A 도메인에서 B 도메인쪽 내부 DOM 객체에 contentWindow 자바스크립트를 사용하여 접근하려 하는데..

(테스트용이라 코드가 난잡한 것은 이해 부탁드립니다.)

위와 같은 에러에 직면했습니다. -_-

구글링 해 본 결과, iframe을 통해 부모 -> 자식이나 자식 -> 부모 간 객체 접근이 가능하려면 서로 같은 도메인상에 있어야 한다고 하네요.

보안상 도메인이 다를 경우 위와 같이 액세스가 거부되는 현상을 보게 됩니다.

즉, 위와 같은 현상이 나타납니다.

그리고, 이를 해결하기 위한 방법으로는 아래와 같은 방법이 있습니다. ( 대신 B쪽 내에 소스를 수정할 수 있어야 합니다.)

즉, A와 B의 도메인은 다르므로 서로간 접근이 불가능하지만

B 도메인 내부에 A 도메인을 iframe으로 호출하고

"B 도메인 내의 A 도메인"에서 "최상위 A 도메인" 내부의 객체에 접근한다면 서로 같은 도메인이므로 접근이 가능하다는 점이죠!

결과적으로 보면 중간에 B 도메인이 걸쳐져있긴 하지만, 데이터를 주고받는 도메인은 같은곳이 되니까요. ㅎㅎ

그렇다면 "B 도메인 내의 A 도메인" 에서 "최상위 A 도메인" 으로 B 도메인의 DOM 객체 값을 전달해주는 방법은 무엇일까요?

바로 파라미터를 이용하는 방법입니다.

거두절미하고, 코드로 보여드리겠습니다.

먼저 최상위 A도메인 내 a.htm 소스입니다.

<iframe src="http://B도메인/b.htm" height="400" id="topFrame" frameborder="0" scrolling="no"></iframe>
<script>
function iframeResize(height) {
    document.getElementById('topFrame').height = height;
}
</script>

그리고 호출된 B도메인 내 b.htm 은 아래와 같이 선언합니다.

<!-- 가져오고 싶었던 부분 -->
<div id="board">
내용
내용
내용
..
..
</div>

<!-- 값 전달을 위한 부분 -->
<iframe id="middleFrame" height=0 width=0 frameborder=0 scrolling=no></iframe>

<script>
document.getElementById("middleFrame").src = 
                "http://A도메인/a-1.jsp?height="+document.getElementById("board").scrollHeight; 
</script>

여기서 다시 호출하는 iframe쪽으로 B도메인 내의 값을 파라미터로 넘겨주는 것이 핵심입니다.

그리고 마지막 a-1.jsp 내에서는 아래와 같이 선언합니다.

<% String height = request.getParameter("height");%>

<script type="text/javascript">
parent.parent.iframeResize(<%=height%>);
</script>

parent.parent 객체 는 결국에 최상단 A도메인의 a.htm이 되겠죠 !!

그리고 parent.parent 객체 내의 함수를 호출하는 쪽도 A도메인이 되구요. ㅎㅎ

그러므로 결국에 보안상 접근이 불가능한 문제는 해결되게 됩니다.

오늘 좋은 기술을 하나 터득해서 좋네요.

다른분들께도 도움이 되길 바랍니다. ^^

감사합니다.

이미지 출처 : http://yaku.tistory.com/366