자바스크립트에서 window.opener.postMessage를 사용하면 보안을 유지하면서 팝업 창과 부모 창 간에 데이터를 안전하게 주고받을 수 있습니다. 이 기능은 특히 사용자 인터페이스를 분리하거나 외부 서비스와 연동할 때 유용하며, 개발자가 직접 구현한 예시를 통해 작동 방식을 명확히 이해할 수 있습니다.
window.opener.postMessage란 무엇인가?
window.opener.postMessage는 자바스크립트에서 새 창(팝업)과 기존 창(부모) 간에 데이터를 안전하게 전달하는 표준화된 방법입니다. 부모 창에서 `window.open()`으로 자식 창을 열고, 자식 창에서는 `window.opener.postMessage()`를 호출하여 부모 창으로 메시지를 보냅니다. 반대로 부모 창에서는 자식 창으로부터 메시지를 받기 위해 `window.addEventListener('message', ...)`를 사용합니다. 이 방식은 서로 다른 출처(origin)를 가진 창 간에도 보안을 유지하며 통신할 수 있도록 설계되었습니다. 예를 들어, 로그인 팝업에서 인증 결과를 부모 창으로 전달할 때 이 기능을 활용할 수 있습니다. 실제 개발 환경에서는 사용자 경험을 향상시키기 위해 이 기능을 적극적으로 사용합니다.
postMessage를 활용한 팝업창 데이터 통신 구현 방법
postMessage를 이용한 팝업 통신은 크게 부모 창과 자식 창에서의 구현으로 나뉩니다. 먼저, 부모 창에서는 `window.open()` 함수를 사용하여 자식 창을 엽니다. 이때 반환되는 창 객체를 통해 자식 창에 접근할 수 있습니다. 자식 창에서는 `window.onload` 이벤트 핸들러 내에서 `window.addEventListener('message', ...)`를 등록하여 부모로부터 오는 메시지를 수신 대기합니다. 수신된 메시지는 `event.data`로 접근할 수 있으며, `event.origin`을 통해 메시지를 보낸 창의 출처를 확인할 수 있어 보안을 강화할 수 있습니다. 예를 들어, 자식 창에서 '닫기' 명령을 받으면 `window.close()`를 호출하여 스스로를 닫도록 구현할 수 있습니다. 부모 창은 자식 창에서 `postMessage`로 보낸 데이터를 받아 필요한 처리를 수행합니다. 이 과정에서 `child.onload`와 같은 자식 창의 로드 완료 이벤트를 부모 창에서 직접 접근하려 하면 보안상의 이유로 `SecurityError`가 발생할 수 있으므로 주의해야 합니다.
postMessage 데이터 통신 구현 방법을 자세히 알아보세요.
