| ms.assetid | description | title | author | ms.author | ms.date | ms.topic | ms.prod | keywords |
|---|---|---|---|---|---|---|---|---|
6fdd6441-a0bb-4794-9a1e-50ecf9f3354a |
See how channel messaging lets code in different browsing contexts communicate directly via ports in a way designed to avoid cross-site scripting attacks. |
Dev guide - Message channels |
abbycar |
abigailc |
02/08/2017 |
article |
microsoft-edge |
edge, web development, html, css, javascript, developer |
Channel messaging enables code in different browsing contexts to communicate directly via ports, regardless of source domain, in a way designed to avoid cross-site scripting attacks. After the ports are created, the endpoints communicate by using a combination of the postMessage method and the onmessage event.
Note
Based on the HTML5 Web Messaging standard, Message Channels are supported in Microsoft Edge build 10240+.
MessageChannel() creates a connection (two "entangled" ports) to enable independent pieces of code (running in different browsing contexts) to communicate directly. Communication channels are implemented as two-ways pipes, with a port at each end. Messages sent in one port are delivered at the other port, and vice-versa. Messages are delivered as DOM events, without interrupting or blocking running tasks.
var msgChannel = new MessageChannel();When a new MessageChannel object is created, it has two connected MessagePort objects (port1 and port2). One port is kept as the local port, and the other is sent to the remote window or worker using postMessage.
MessageChannel Attributes
| Attribute | Type | Description |
|---|---|---|
| port1 | MessagePort | Returns the first MessagePort object of the MessageChannel. |
| port2 | MessagePort | Returns the second MessagePort object. |
The postMessage method safely enables cross-origin communication, allowing cooperative text exchange between non-trusted modules from different domains embedded within a page. It does so by ensuring a consistent and secure process for text-based data exchange.
Here's an example of sending a port to be used for cross-document communication. Be aware that the array of ports must be the last argument.
otherWindow.postMessage('hello', 'http://example.com', [channel.port2]);Similarly, you can send a port endpoint to a worker thread by using postMessage:
worker.postMessage({code:"port"}, [channel.port2]);To send messages, the postMessage() method on the port is used:
channel.port1.postMessage('hello');To receive messages, one listens to onmessage events:
channel.port1.onmessage = handleMessage;
function handleMessage(event) {
// message is in event.data
// ...
}When a script invokes the postMessage method, the browser sends an onmessage event to the target document on which the data property has been set.
The following example shows how a worker thread might receive and use a port.
// Worker Thread
onmessage = function (event) {
if (event.data.code == "port") {
event.ports[0].postMessage("Port received.");
}
}After the port is received, additional communication occurs on the port using postMessage and onmessage events. The following code defines an event handler and sends a message using a channel-messaging port.
channel.port1.onmessage = function (event) {
// Message is in event.data
alert("Message is: " + event.data);
}
channel.port1.postMessage('hello');Messages can be sent and received without the repeated origin checking that is needed when using window.postMessage. Validation of the origin of a port and messages need only be done when a port is sent to windows other than the one that created them. The array of ports is sent in the ports property of the event. A port can be used once and closed, or it can be saved locally and used repeatedly, as necessary.
Channel messaging is used to coordinate lighting effects between worker threads in the Web Worker Fountains demo. For a full messaging demo, see the MessageChannel object reference page.