웹뷰에서 교차 출처 통신 구현하기: postMessage

브라우저에서 동일한 도메인(같은 출처) 간에는 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