개요

앱에서 웹뷰를 띄우기 위해서 어떤 방법이 있는지 찾아보다가 window.postMessage()를 사용한다는 블로그 글을 보았다.
postMessage메서드를 웹에서 사용하여 데이터를 앱으로 보내고 앱은 넘어온 데이터로 웹에게 전달하는 방법이다.

window.postMEssage()메서드는 교차 출처일 때 사용할 수 있는데, 프로토콜, 포트번호, 호스트가 같아야 동일 출처이고 다르다면 교차 출처이다.

해당 url https://www.test.com/dir/index.htm 과 보기의 url이 같은 출처인지 확인하면 다음과 같다.

https://www.test.com/dir2/page.html o (경로만 다름)
https://www.test.com/dir/join.html o (경로만 다름)
http://www.test.com/dir2/page.html x (프로토콜이 다름)
https://www.test.com:81/dir/index.html x(포트가 다름, https의 기본포트는 443)

교차 출처(cross origin)는 window, location 객체에 대해서 접근(읽기/쓰기)이 매우 제한되는데 window.postMessage()를 사용하면 안전하게 통신을 주고 받을 수 있다.

targetWindow.PostMessage()

//문법
targetWindow.postMessage(message, targetOrigin, [transfer])

targetWindow

• postMessage를 전달받을 다른 window이다.

message

• 보낼 데이터

targetOrigin

• targetwindow의 origin(Origin이란 targetWindow의 스키마, 호스트 이름, 포트인데 문자열 혹은 url형태이다)

이 메서드는 postMessage를 통해 message를 전송하고 받는 쪽에서는 넘어온 message를 event로 받아 처리한다. 받는 event에서도 해당 윈도우의 출처가 맞는지 확인한다.

예제

http://example.com:8080:에서 http://example.com 출처를 가진 팝업을 띄워보기

http://example.com:8080:

//http://example.com:8080:
const popup = window.open(`출처가 http://example.com인 팝업창`)

popup.postMessage("hi there", "http://example.com")
//http://example.com으로 "hi there" 라는 데이터를 전송


//팝업(http://example.com)에서 넘어온 데이터 
window.addEventListener("message",(event)=>{
//////   "http://example.com"에서 온 데이터가 아니라면 return
/////     event.soure는 팝업
/////     event.data는 "hi there"의 응답인 "hi good afternoon"
   if(event.origin !== "http://example.com")
   return;
},false)

http://example.com

///http://example.com

window.addEventListener("message",(event)=>{
   if(event.origin!== "http://example.com:8080")
   return;
   ////   event.source는 window.opnenr 
   ////   event.data는 "hi there"
   ///    아래 코드는 받은 메세지의 출처가(event.origin) "http://example.com:8080"가 맞다고 가정하고 응답을 보내는 코드. 답장을 보낸다고 생각하면 됨 
   ///    targetOrigin으로 event.origin
   event.source.postMessage("hi good afternoon",event.origin);
})

해당 event파라미터에는 data, 보낸 쪽의 origin, 보낸 쪽의 window객체의 참조인 source로 구성되어 있다.

이와 같은 방법으로 다른 출처이지만 웹에서 앱뷰를 띄울 수 있는 것이다.

이 전까지는 단순히 앱의 URL만 불러오는 줄 알고 있었다. 하지만 다른 출처이며 이와 같은 방법으로 웹에서 앱뷰를 띄울 수 있었다!

Reference

https://ui.toast.com/posts/ko_20220831
https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy
https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Origin