[.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.