window.postMessage()

최정은·2022년 2월 3일

Web

목록 보기

5/7

새 창(팝업 창)에서 연 창에게 메시지를 보내는 것..!

Window 오브젝트 사이에서 안전하게 cross-origin 통신을 할 수 있게 한다.

예를 들어 페이지와 생성된 팝업 간의 통신, 페이지와 페이지 안의 iframe 사이의 통신에 사용할 수 있다.

나는 소셜 로그인을 할 때 회원의 이메일 정보와 그 외 회원가입시 필요한 params를 받으려 할 때 사용했다.

targetWindow.postMessage()를 통해서 다른 윈도우에 MessageEvent를 보낼 수 있다.

문법

targetWindow.postMessage(message, targetOrigin);

targetWindow

특정 메시지를 받을 window의 참조

window.open(새 창을 만들고 새 창을 참조할때)
window.opener(새 창을 만든 window를 참조 할 때)
HTMLIFrameElement.contentWindow (부모 window에서 임베디드된 iframe을 참조할 때)
Window.parent (임베디드 된 iframe에서 부모 window를 참조할 때)

message

다른 window에 보내질 데이터. 다양한 데이터 객체를 안전하게 전송할 수 있다.

// 아래와 같이 다양한 데이터 객체를 전송할 수 있다. 
targetWindow.postMessage({message: 'SIGNUP', params: {userName: '...', ...}},...)

targetOrigin

targetWindow의 origin을 지정한다.

문자열 “*”(별도로 지정하지 않음을 나타냄) 또는 URI.

targetWindow의 호스트 번호, 포트, 스키마가 targetOrigin의 정보와 다를 경우 이벤트를 보낼 수 없다.

비밀번호와 같은 중요한 정보를 전달할땐 반드시 “*”가 아닌 특정한 값을 설정하도록 한다. 특정한 대상을 지정하지 않으면 악의적인 사이트에 전송하는 데이터가 공개되어 버린다.

message 이벤트

아래를 실행하게 되면 otherWindow에서 전달된 메시지를 받을 수 있다.

const closePopup = (e) => {
    e.preventDefault();

    window.opener.postMessage({ sign: "팝업 창에서 보낸 메시지" }); //메시지 이벤트가 트리거 된다. 
    window.close();
  };
...

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event){
  if(event.origin !== "http://example.org:8080")
    return;

	console.log(event.message); // {sign: '팝업 창에서 보낸 메시지'}
}