HTML에서 문서 간 메시지를 주고받는 방법 – postMessage() 활용 가이드

HTML 문서 간 메시지 전달이란?

웹 개발에서 서로 다른 문서 사이에 데이터를 안전하게 전달해야 할 때가 많습니다. HTML에서는 새로운 iframe을 만들거나 새 창(window)을 열어 새로운 웹 브라우징 컨텍스트(browsing context)를 생성할 수 있으며, 이렇게 만든 컨텍스트 간에는 postMessage() 메서드를 사용해 데이터를 주고받을 수 있습니다.

postMessage()의 두 가지 인자

postMessage() 메서드는 두 개의 인자를 받습니다.

• message − 전송하려는 메시지(문자열 또는 객체)
• targetOrigin − 메시지를 수신할 대상의 출처(origin) 이름, 예: https://www.example.com

targetOrigin을 정확히 지정하면 지정된 도메인 외의 페이지로는 메시지가 전달되지 않으므로, 보안상 반드시 명확한 출처를 설정하는 것이 좋습니다.

iframe에서 버튼 클릭으로 메시지 보내기 예제

아래는 버튼을 클릭했을 때 iframe 쪽으로 메시지를 전송하는 간단한 예제입니다.

var iframe = document.querySelector('iframe');
var button = document.querySelector('button');

var clickHandler = function(){
    iframe.contentWindow.postMessage('보낼 메시지 내용', 'https://www.tutorialspoint.com');
}
button.addEventListener('click', clickHandler, false);

코드 설명

document.querySelector('iframe')으로 iframe 요소를 가져온 뒤, iframe.contentWindow를 통해 해당 iframe의 window 객체에 접근합니다. 버튼 클릭 이벤트가 발생하면 postMessage()가 실행되어 첫 번째 인자인 메시지가 두 번째 인자로 지정된 출처(https://www.tutorialspoint.com)로 전달됩니다.

메시지를 받는 쪽에서는 window.addEventListener('message', ...)를 사용해 수신된 데이터를 처리할 수 있습니다. 이처럼 postMessage()는 교차 출처(cross-origin) 환경에서도 안전하게 통신할 수 있도록 도와주는 표준 API입니다.