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

브라우저에서 동일한 도메인(같은 출처) 간에는 localStoragesessionStorage를 통해 데이터 통신이 가능합니다. 그렇다면 서로 다른 도메인(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



Window.postMessage() - Web API | MDN

MDN Web Docs

Window.postMessage() - Web API | MDN

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2024년 1월 19일 오전 2:44

 • 

저장 16조회 2,631

댓글 0

    함께 읽은 게시물


    LINE 의 오픈챗 서버는 어떻게 급증하는 트래픽을 다룰까?

    L

    ... 더 보기

     • 

    댓글 2 • 저장 213 • 조회 6,826


    대량의 트래픽이 몰려올 때 나는 어떻게 해야하나? - (feat. Cac

    🌱 0. 들어가며

    ... 더 보기



    야근의 관성

    제가 한국에서 직장 생활을 시작하고 가장 먼저 배운 것은 아이러니하게도 야근이었습니다. 신입이었던 제게 야근은 선택의 문제가 아니었거든요. 선배들에게 야근은 너무나 당연한 루틴이었고, 저녁 5시가 되면 "퇴근 안 해?"가 아니라 "저녁 뭐 먹을까?"라는 질문을 던졌습니다. 누가 정해놓은 것처럼 부장님이 퇴근해야 과장님이, 과장님이 퇴근해야 대리님이, 대리님이 퇴근해야 비로서 저 같은 신입도 퇴근 생각을 할 수 있었습니다.

    ... 더 보기

     • 

    저장 15 • 조회 4,004