일반적으로 스크립트는 동일 근원 정책에 의해, 프로토콜, 도메인, 포트 중 어느 하나라도 다른 경우엔 다른 윈도우와 통신할 수 없습니다. 하지만, window.postMessage()를 사용하면 안전하게 서로 다른 도메인을 가진 다른 윈도우와 통신할 수 있게 됩니다. 간단한 예제코드는 아래와 같습니다. [CODE:js] otherWindow.postMessage(message, targetOrigin); [/CODE] otherWindow:window.open() 의 응답으로 얻은 윈도우 객체iframe 의 contentWindow 프로퍼티로 가져온 윈도우 객체window.frames 프로퍼티에서 가져온 윈도우 객체 message:전달할 데이터 (JSON도 가능하다) targetOrigin:메시지를 받을 타겟 오리진. 프로토콜, 도메인, 포트를 URL 형태로 전달한다. "*" 문자열로 모든 윈도우로 전달할 수도 있지만, 악성 스크립트에서 해당 이벤트를 받을 수 있으므로 가능한 명시하는 것이 좋습니다. 예를 들어, 아래 코드는 example 이라는 아이디를 가진 iframe 으로 데이터를 보내는 예제입니다. [CODE:js] iframe id="example" src="https://other-domain.com/receive.html" /iframe script type="text/javascript" var iframeWindow = document.getElementById("example").contentWindow; iframeWindow.postMessage("hello world!","https://other-domain.com"); /script [/CODE] 받는 측에서는 윈도우의 message 이벤트를 통해 데이터를 받을 수 있습니다. 위의 예제코드상으로 https://other-domain.com/receive.html 파일에 작성되어야 하는 내용입니다. [CODE:js] script type="text/javascript" window.addEventListener("message", function (e) { if (e.origin === "https://domain.com") { // 위의 예제 코드가 작성된 곳의 도메인주소 console.log(e.data); // "hello world!" 가 출력된다. e.source.postMessage("hi", "https://domain.com"); // e 객체를 활용하여, 메시지를 보낸 곳으로 다시 메시지를 보낼 수 있다. } }); /script [/CODE] window.postMessage()를 사용할 때 몇 가지 주의할 점이 있습니다. 1. 메시지를 받는 윈도우에서 에러가 발생해도, 메시지를 보낸 윈도우에서는 알 수 없다.2. 보내는 윈도우에서 "document.domain"의 속성을 변경해도, 이벤트의 "origin" 값은 변경되지 않는다.3. 메시지를 보내는 윈도우가 "javascript:"나 "data:" URL일 경우엔, 이벤트의 "origin" 속성을 해당 스크립트를 로드한 페이지이다.4. 크롬 익스텐션에서 메시지를 보내는 경우, "source"는 항상 null로 설정된다. 좀 더 자세한 내용은 아래 링크를 참고하면 되며, https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage postMessage 브라우져별 지원여부는 아래 링크를 참고하시면 됩니다.https://caniuse.com/#search=postMessage
- HTML
- 자바스크립트