Window.postMessage() - Web API | MDN
MDN Web Docs
브라우저에서 동일한 도메인(같은 출처) 간에는 localStorage 및 sessionStorage를 통해 데이터 통신이 가능합니다. 그렇다면 서로 다른 도메인(CORS) 간의 통신은 불가능한걸까요?
이러한 상황에서는 window.poseMessage() 메소드를 활용하면 교차 출처 문서(CORS) 즉 window 객체 간의 데이터를 안전하게 주고 받을 수 있습니다. 예시로, 페이지와 그 페이지에 의해 생성된 팝업 혹은 iframe 간의 통신이 가능합니다.
window.postMessage()는 다른 window 객체에 메시지를 보내는 기능을 제공합니다. 예를 들어, 팝업 창이 해당 팝업을 생성한 원래 페이지에 메시지를 보낼 수 있습니다. 이를 통해 Window 객체 사이에서 교차 출처 통신이 가능해집니다.
인터페이스는 다음과 같습니다.
메시지 전송
window.postMessage('Hello from domainA!', 'http://domainB.com');
수신
window.addEventListener('message', (event) => {
if (event.origin !== 'http://domainA.com') {return; }
console.log(event.data); // 'Hello from domainA!' });
메시지를 수신측은 'message' 이벤트 핸들러를 통해 수신된 메시지를 처리합니다. 이 이벤트 핸들러는 이벤트 리스너에서 콜백함수로 'event' 객체를 받으며 'event.origin'을 통해 메시지가 어느 출처에서 왔는지 확인합니다. 이를 통해 안전하게 데이터를 받을 수 있습니다.
어떤 윈도우가 메시지를 보낼지 모르기 때문에 항상 메시지의 origin을 확인하여야 합니다. 만약 출처를 알 수 없는 데이터가 보내지고 이 데이터를 받는다면 사이트 보안에 위협이 되기 때문입니다.
https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 1월 19일 오전 2:44
혹
... 더 보기L
... 더 보기오
... 더 보기제가 한국에서 직장 생활을 시작하고 가장 먼저 배운 것은 아이러니하게도 야근이었습니다. 신입이었던 제게 야근은 선택의 문제가 아니었거든요. 선배들에게 야근은 너무나 당연한 루틴이었고, 저녁 5시가 되면 "퇴근 안 해?"가 아니라 "저녁 뭐 먹을까?"라는 질문을 던졌습니다. 누가 정해놓은 것처럼 부장님이 퇴근해야 과장님이, 과장님이 퇴근해야 대리님이, 대리님이 퇴근해야 비로서 저 같은 신입도 퇴근 생각을 할 수 있었습니다.
... 더 보기