window.postMessage
window.postMessage
window.postMessage() 메소드는 Window 오브젝트 사이에서 안전하게 cross-origin 통신을 할 수 있게된다.
- targetWindow: 메세지를 전달 받을 window
- window.open() : 새 창을 만들고 새창을 참조 할 때
- window.opener() : 새 창을 만든 window를 참조 할 때
- HTMLIFrameElement.contentWindow: 부모 window에서 임베디드된
iframe을 참조 할 때 - window.parent : 임베디드된
iframe에서 parent window를 참조 할 때
- data: 다른 window에 전달할 메시지 데이터 (다양한 데이터 객체 전달 가능)
- targetOrigin: 메세지를 수신 받는 도메인, 특정 도메인이 아닌 경우
로 지정한다.
이벤트 디스패치
message 이벤트를 통해 다른 window로 부터 전달된 메시지를 받을 수 있다.message 이벤트에 전달한 함수의 event 변수에서 다음 값들을 가져올 수 있다.
- data: 다른 window로 부터 전달 받은 데이터
- origin: postMessage가 호출 될 때 메시지를 보내는 윈도우의
origin
- source: 메시지를 보낸 window에 대한 참조, 해당 참조로 다시 메시지를 보낼 수 있다
보안 관련
다른 사이트로 부터 메시지를 받는다면,
origin 과 source 를 이용해 보내는 쪽의 신원을 확인하는것이 좋다임의의 어떤 window도 다른 window로 메시지를 보낼 수 있으며, 알 수 없는 발신자가 악의적으로 메시지를 전달 할 경우가 있기 때문에 항상 발신자의 신원과 수신된 메시지에 대해서 확인이 필요하다.
postMessage 메서드를 사용할 때도 마찬가지로 주의할 점은 다른 window로 데이터를 보낼 때 항상 정확한 target origin을 지정해야된다. 누군가 악의적으로 postMessage를 사용하여 데이터를 가로챌 수 있기 때문이다.
사용시 주의사항
- 항상
origin혹은source를 통해 메시지 송신자의 식별 정보를 체크 해야한다.
- postMessage는 보류 중인 모든 실행 컨텍스트가 완료된 후에만 messageEvent가 발송하도록 한다.
- chrome extension에서 메시지를 보내는 겨웅
source는 항상null로 설정된다.
- 송신하는 window가
javascript:혹은data:URL인 경우,origin속성은 해당 스크립트를 로드한 페이지다.
- 송신하는 window에서
document.domain을 변경해도 이벤트의origin값은 변경되지 않는다.