[.postMessage()](<https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage>) method is a way to safely allow communication between cross-origin scripts.
Normally, two different pages, can only directly communicate with each other using JavaScript when they are under the same origin, even if one of them is embedded into another (e.g. iframes) or one is opened from inside the other (e.g. window.open()). With [.postMessage()](<https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage>), you can work around this restriction while still staying safe.
You can only use [.postMessage()](<https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage>) when you have access to both pages’ JavaScript code. Since the receiver needs to validate the sender and process the message accordingly, you can only use this method to communicate between two scripts you have access to.
We will build an example to send messages to a child window and have the messages be displayed on the child window. The parent/sender page will be assumed to be http://sender.com and child/receiver page will be assumed to be http://receiver.com for the example.
In order to send messages to another window, you need to have a reference to its [window](<https://developer.mozilla.org/en-US/docs/Web/API/Window>) object. [window.open()](<https://developer.mozilla.org/en-US/docs/Web/API/Window/open>) returns the reference object of the newly opened window. For other methods to obtain a reference to a window object, see the explanation under otherWindow parameter here.
var childWindow = window.open("<http://receiver.com>", "_blank");
Add a textarea and a send button that will be used to send messages to child window.
<textarea id="text"></textarea>
<button id="btn">Send Message</button>
Send the text of textarea using [.postMessage(message, targetOrigin)](<https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage>) when the button is clicked.
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>');
}
In order send and receive JSON objects instead of a simple string, [JSON.stringify()](<https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify>) and [JSON.parse()](<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse>) methods can be used. A [Transfarable Object](<https://developer.mozilla.org/en-US/docs/Web/API/Transferable>) can be given as the third optional parameter of the [.postMessage(message, targetOrigin, transfer)](<https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage>) method, but browser support is still lacking even in modern browsers.
For this example, since our receiver is assumed to be http://receiver.com page, we enter its url as the targetOrigin. The value of this parameter should match the origin of the childWindow object for the message to be send. It is possible to use \\* as a wildcard but is highly recommended to avoid using the wildcard and always set this parameter to receiver’s specific origin for security reasons.
The code under this part should be put in the receiver page, which is http://receiver.com for our example.
In order to receive messages, the [message event](<https://developer.mozilla.org/en-US/docs/Web/Events/message_webmessaging>) of the window should be listened.
window.addEventListener("message", receiveMessage);
When a message is received there are a couple of steps that should be followed to assure security as much as possible.