Test thử PostMessage để gửi tin nhắn giữa windows và iframe

Gọi một phương thức và thêm một trình xử lý sự kiện:

• Gọi phương thức postMessage của phần tử window / iframe mà bạn muốn gửi thông tin tới.
• Chỉ định nguồn gốc. Phải là một tên miền hoặc ký tự đại diện "*"
• Trong cửa sổ nhận, chỉ cần thêm một trình nghe sự kiện cho sự kiện tin nhắn.
• Tùy chọn: thêm kiểm tra nguồn gốc vì lý do bảo mật.

Mã để làm điều này

Trong ví dụ này, chúng tôi sẽ có một trang chứa một biểu mẫu, đăng một thông báo lên iframe trong trang đó.

>> PostMessage Vulnerabilities - J2EEScan – Javascript postMessage Handler Detected

Xem kết quả để tưởng tượng

Mã được sử dụng trong index.html

<form id="the-form" action="/">
    <input type="text" id="my-message" value="Your message">
    <input type="submit" value="postMessage">
</form>
 
<iframe id="da-iframe" src="postMessageTarget.html"></iframe>

window.onload = function () {
    var iframeWin = document.getElementById("da-iframe").contentWindow,
        form = document.getElementById("the-form"),
        myMessage = document.getElementById("my-message");
 
    myMessage.select();    
 
    form.onsubmit = function () {
        iframeWin.postMessage(myMessage.value, "http://robertnyman.com");
        return false;
    };
};

Mã được sử dụng trong iframe

<p id="received-message">I've heard nothing yet</p>

function displayMessage (evt) {
    var message;
    if (evt.origin !== "http://robertnyman.com") {
        message = "You are not worthy";
    }
    else {
        message = "I got " + evt.data + " from " + evt.origin;
    }
    document.getElementById("received-message").innerHTML = message;
}
 
if (window.addEventListener) {
    // For standards-compliant web browsers
    window.addEventListener("message", displayMessage, false);
}
else {
    window.attachEvent("onmessage", displayMessage);
}

postMessage có 2 thành phần chính, đó là:

1. window.postMessage() — Để gửi message
2. window.addEventListener(“message”,callback) — để nhận và xử lý message

Syntax chung của postMessage như sau:

targetWindow.postMessage(message, targetOrigin, [transfer]);

Tham số [transfer] là optinal, trong bài viết này chúng ta sẽ không sử dụng.