HTML5 웹 메시징이란?
웹 메시징(Web Messaging)은 서로 분리된 브라우징 컨텍스트(browsing context) 사이에서 DOM에 직접 접근하지 않고도 데이터를 공유할 수 있게 해주는 HTML5의 통신 방식입니다.
서로 다른 도메인, 프로토콜 또는 포트를 사용하는 문서들은 동일 출처 정책(Same-Origin Policy)에 의해 직접적인 통신이 차단됩니다. 웹 메시징은 이러한 교차 도메인(cross-domain) 통신 문제를 안전하게 우회하여 해결해 줍니다.
웹 메시징이 필요한 상황
예를 들어, 자신의 페이지에서 iframe으로 삽입된 광고 컨테이너(ad container)에 데이터를 전송하거나, 그 반대로 광고 컨테이너에서 페이지로 데이터를 보내야 하는 상황을 생각해 볼 수 있습니다.
이때 일반적인 방식으로 상대편 DOM에 접근하려 하면 브라우저는 보안 예외(security exception)를 발생시켜 요청을 차단합니다. 하지만 웹 메시징을 활용하면 message 이벤트 형태로 데이터를 안전하게 주고받을 수 있습니다.
대표적인 API로는 window.postMessage()가 있습니다. 송신 측에서 postMessage()로 메시지를 전달하고, 수신 측에서는 message 이벤트 리스너를 등록해 데이터를 받는 구조로 동작합니다.
메시지 이벤트가 발생하는 통신 기술
메시지 이벤트는 다음 네 가지 통신 방식에서 발생합니다.
- 크로스 문서 메시징(Cross-document Messaging): 서로 다른 창(window)이나 iframe 간에 메시지를 주고받는 방식입니다.
- 채널 메시징(Channel Messaging): MessageChannel을 통해 두 브라우징 컨텍스트 간에 독립적인 양방향 통신 채널을 여는 방식입니다.
- 서버 전송 이벤트(Server-Sent Events): 서버에서 클라이언트로 단방향으로 이벤트를 지속적으로 푸시하는 방식입니다.
- 웹 소켓(Web Sockets): 클라이언트와 서버 간 양방향 실시간 통신을 가능하게 하는 프로토콜입니다.