HTML5 크로스 도메인 iframe 문제, postMessage()로 해결하는 방법

크로스 도메인 iframe 통신의 한계

브라우저는 보안상의 이유로 동일 출처 정책(Same-Origin Policy)을 적용합니다. 따라서 서로 다른 도메인 간에는 iframe 내부의 DOM에 직접 접근하거나 데이터를 읽어올 수 없습니다. 이러한 제약 때문에 외부 도메인의 콘텐츠를 iframe으로 불러온 경우, 부모 페이지와 자식 프레임 사이에서 일반적인 JavaScript 접근 방식으로는 데이터를 주고받기 어렵습니다.

해결 방법: postMessage() 사용

서로 다른 도메인 간에 데이터를 안전하게 전송해야 한다면 HTML5에서 표준으로 제공하는 postMessage() 메서드를 사용하는 것이 가장 좋습니다. postMessage는 도메인이 달라도 메시지 형태로 데이터를 교환할 수 있게 해주며, targetOrigin 인자를 통해 특정 출처로만 데이터가 전달되도록 제한할 수 있어 보안성도 확보됩니다.

기본 동작 흐름은 다음과 같습니다.

• 부모 페이지에서 iframe의 contentWindow 객체에 대해 postMessage()를 호출하여 메시지를 보냅니다.
• iframe 쪽에서는 message 이벤트 리스너를 등록해 수신된 메시지를 처리합니다.
• 필요하면 iframe 역시 e.source.postMessage()를 통해 부모 창으로 응답 데이터를 되돌려 보낼 수 있습니다.

예제 코드

아래 코드 스니펫으로 크로스 도메인 iframe 문제를 직접 테스트해 볼 수 있습니다.

// 부모 페이지: iframe으로부터 전송된 데이터 수신
window.addEventListener('message', function(e) {
    alert('수신한 데이터: ' + e.data);
});

// 자식 iframe(다른 도메인): 요청을 받으면 자신의 HTML을 응답으로 전송
window.addEventListener('message', function(e) {
    e.source.postMessage(document.body.innerHTML, e.origin);
});

// 부모 페이지: iframe에 메시지를 보내 데이터 요청 트리거
document.getElementById('frame1').contentWindow.postMessage('', '*');

참고 사항

실무에서는 위 예제의 '*'(모든 출처 허용) 대신, 실제 통신 대상 도메인을 targetOrigin에 명시하는 것이 안전합니다. 또한 수신한 메시지는 반드시 e.origin 값을 검증한 후 처리해야 악의적인 페이지로부터의 데이터 유출이나 변조 공격을 예방할 수 있습니다.