JavaScript
.postMessage () 및 MessageEvent

통사론

• windowObject.postMessage(message, targetOrigin, [transfer]);
• window.addEventListener("message", receiveMessage);

매개 변수

시작하기

.postMessage () 란 무엇이며 언제, 왜 사용해야합니까?

.postMessage() 메소드는 원본 교차 스크립트간에 안전하게 통신 할 수있는 방법입니다.

일반적으로 두 개의 서로 다른 페이지는 JavaScript가 다른 iframes (예 : iframes )에 포함되거나 다른 window.open() 가 다른 window.open() 예 : window.open() ))에서 열리는 경우에도 동일한 출처를 사용하는 경우 JavaScript를 사용하여 직접 통신 할 수 있습니다. window.open() ). .postMessage() 사용하면 .postMessage() 제한을 .postMessage() 수 있습니다.

두 페이지의 JavaScript 코드에 액세스 할 수있는 경우에만 .postMessage() 사용할 수 있습니다. 수신자가 송신자의 유효성을 검사하고 이에 따라 메시지를 처리해야하기 때문에이 방법을 사용하여 액세스 권한이있는 두 스크립트 사이에서 통신 할 수 있습니다.

자식 창에 메시지를 보내고 메시지를 자식 창에 표시하도록 예제를 작성합니다. 부모 / 발신자 페이지는 http://sender.com 이고 아동 / 수신자 페이지는 예를 들어 http://receiver.com 으로 가정됩니다.

메시지 보내기

다른 창에 메시지를 보내려면 해당 window 개체에 대한 참조가 있어야합니다. window.open() 은 새로 열린 윈도우의 참조 객체를 반환합니다. 윈도우 객체에 대한 참조를 가져 오는 다른 메서드에 대해서는 otherWindow 매개 변수 아래의 설명을 참조 하십시오 .

var childWindow = window.open("http://receiver.com", "_blank");

자식 창에 메시지를 보내는 데 사용할 textarea 과 send button 을 추가하십시오.

<textarea id="text"></textarea>
<button id="btn">Send Message</button>

button 을 클릭하면 .postMessage(message, targetOrigin) 사용하여 텍스트 textarea 의 textarea 를 .postMessage(message, targetOrigin) .

var btn = document.getElementById("btn"),
    text = document.getElementById("text");

btn.addEventListener("click", function () {
    sendMessage(text.value);
    text.value = "";
});

function sendMessage(message) {
    if (!message || !message.length) return;
    childWindow.postMessage(JSON.stringify({
        message: message,
        time: new Date()
    }), 'http://receiver.com');
}

간단한 문자열 대신 JSON 객체를 보내고 받으려면 JSON.stringify() 및 JSON.parse() 메서드를 사용할 수 있습니다. Transfarable Object 는 .postMessage(message, targetOrigin, transfer) 메서드의 세 번째 선택적 매개 변수로 제공 될 수 있지만 최신 브라우저에서도 브라우저 지원이 여전히 부족합니다.

이 예제에서는 수신자가 http://receiver.com 페이지라고 가정하기 때문에 url을 targetOrigin 으로 입력합니다. 이 매개 변수의 값은 보낼 메시지의 childWindow 객체의 origin 과 일치해야합니다. wildcard 로 * 를 사용할 수도 있지만 보안상의 이유로 와일드 카드를 사용하지 않으려면이 매개 변수를 항상 수신자의 특정 원본으로 설정하는 것이 좋습니다 .

메시지 수신, 검증 및 처리

이 부분에있는 코드는 수신자 페이지 (이 예에서는 http://receiver.com 에 넣어야합니다.

메시지를 수신하려면 window message event 를 청취해야합니다.

window.addEventListener("message", receiveMessage);

메시지가 수신되면 보안을 최대한 보장하기 위해 따라야 할 몇 가지 단계가 있습니다 .

• 발신자 확인
• 메시지 유효성 검사
• 메시지 처리

보낸 사람은 신뢰할 수있는 보낸 사람으로부터 메시지를 수신하도록 항상 유효성을 검사해야합니다. 그 후 메시지 자체를 확인하여 악의적 인 내용이 수신되지 않도록해야합니다. 이 두 가지 유효성 검사 후에 메시지를 처리 ​​할 수 ​​있습니다.

function receiveMessage(ev) {
    //Check event.origin to see if it is a trusted sender.
    //If you have a reference to the sender, validate event.source
    //We only want to receive messages from http://sender.com, our trusted sender page.
    if (ev.origin !== "http://sender.com" || ev.source !== window.opener)
        return;

    //Validate the message
    //We want to make sure it's a valid json object and it does not contain anything malicious 
    var data;
    try {
        data = JSON.parse(ev.data);
        //data.message = cleanseText(data.message) 
    } catch (ex) {
        return;
    }

    //Do whatever you want with the received message
    //We want to append the message into our #console div
    var p = document.createElement("p");
    p.innerText = (new Date(data.time)).toLocaleTimeString() + " | " + data.message;
    document.getElementById("console").appendChild(p);
}

JS Fiddle의 사용법을 보시려면 여기를 클릭하십시오.