postmessage 사용법

iframe 사용 시 cross-domain 문제가 생기는 것에 관련하여 이를 해결할 수 있는 방법을 적어봅니다. 

[참고] https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

스크립트는 일반적으로 자신이 포함된 문서와 출처가 동일한 문서나 창의 프로퍼티만 읽을 수 있습니다. 이를 '동일 근원 정책'에 의해 제한된다라고들 하는데 '프로토콜, 도메인, 포트 중 어느 하나라도 다른 경우엔 다른 윈도우와 통신할 수 없다' 라고 정리하면 됩니다.

이를 해결할 수 있는 방식이 postMessage 입니다. 이를 통해 안전하게 origin 이 다른 윈도우와 통신을 할 수 있습니다. 아래와 같은 방식으로 메세지를 주고 받을 수 있습니다. 

[수신부]

$(document).ready(function(){
    window.addEventListener("message",receivePostMsg);
});

function receivePostMsg(event)
{
    if(event.origin == 'URL'){
        console.log(event.data);
        console.log(event.data.paramKey);
    }   
}

iframe에서 보낸 값을 처리하기 위해 부모가 되는 페이지에 수신부를 작성합니다.

window.addEventListener() 함수로 데이터를 받으며 event 값으로 전송된 data를 확인할 수 있습니다.

보안상의 이유가 있기에 꼭 origin을 체크해주도록 합니다.

[발신부]

var param = {};
window.parent.postMessage(param, '*');

iframe 호출 페이지에 메세지를 전송하는 방법입니다. postMessage 부분의 인자값에 대해 설명하자면 

1. param 부분은 보낼 데이터들이며 key value 형식을 취합니다.

2. '*' 부분은 targetOrigin 을 가리키며 보안상의 이유가 생기기에 보낼 곳의 url을 적거나 

   '*'로 처리한 후 부모 페이지에서 체크하는 방법이 있습니다.