postMessage를 이용한 크로스도메인간 iframe 리사이징

기본

회사에서 외주를 주고 있는 사이트가 변경돼서, <iframe>으로 해당 사이트를 임베드 해야하는 이슈가 있었습니다. <iframe> 해서 추가하는 거야 일도 아닌데 포함시킬려는 페이지의 사이즈에 맞게 사이즈를 조절해 줘야 하더군요.

바꾸기 전에는 같은 도메인이었기 때문에 iframe 안에서 부모쪽의 함수를 호출하면 되는 부분이었는데 도메인이 아예 달라져서 이렇게 호출하려고 하면 크로스도메인 관련 오류가 떨어집니다.

이 문제를 해결하기 위해 몇 가지 트릭이 존재하는데 그 중에서 제가 찾은 가장 모던한 방법은 window.postMessage를 사용하는 겁니다.

일반적으로 서로 다른 페이지의 스크립트가 통신하기 위해선 프로토콜, 포트, 호스트(도메인)가 같아야만 가능한데 window.postMessage는 이런 제약들을 우회할 수 있다고 합니다. 그러면 보안이 문제가 될 수도 있는데 이게 다른 페이지의 메소드를 호출하는건 아니고 한쪽에선 메시지를 보내고 다른쪽에서 그 메시지를 처리하는 일종의 이벤트 이고 받는 쪽도 origin을 지정할 수 있기 때문에 보안에 큰 문제는 없어 보입니다. (단, jQuery postMessage 플러그인을 사용할 경우 window.postMessage를 지원하지 않는 브라우저에서는 origin이 무시됩니다.)

문제는 IE 8+ 부터 지원한다는 건데 다행히 jQuery postMessage 플러그인을 사용하면 IE6도 커버가 됩니다. 코드도 간단합니다. ajax 요청과 크게 다르지 않네요. window.postMessage를 지원하지 않는 경우엔 window.location에 해시(#)를 붙여 메시지를 보내고 window.location.hash 값을 모니터링하는 식으로 처리합니다. 기발하네요.

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중