window.postMessage 이벤트

회사 프로젝트에서 브라우저에서 조회한 API를 팝업 window에서 사용할 수 있도록 하고 싶은데, 팝업 window에서 해당 API를 조회하지 않고 데이터를 쓰는 방법을 찾다가 발견한게 postMessage 이벤트였다.

window.postMessage

부모 window <-> iframe 또는 서로 다른 브라우저 창 처럼 서로 다른 window 컨텍스트간에 message를 주고받는 event이다.

사용법

message를 보내는쪽

targetWindow.postMessage(message, targetOrigin);

message를 받는쪽

  window.addEventListener("message", (event) => {
    // event.data: 전달받은 데이터
    // event.origin: 보낸 쪽 오리진
    // event.source: 보낸 쪽 window 참조
  });

cross-origin 간 postMessage도 가능해서 event.origin이 내가 원하는 origin인지 검증하는게 중요하다.