event.source is a handle

1. The problem

A page has two widgets.

Each widget is an iframe.

Both send data to you.

You must reply to the sender.

You must not reply to the other widget.

You already know how to get a handle.

The event already holds the handle of the sender.

2. Two fields

A window message has both of these:

• event.origin — a string. The origin of the sender at the time of the send.
• event.source — a WindowProxy. The handle of the sender. (MDN)

They are not the same kind of value.

On a later lesson, event.source can also be a MessagePort. This lesson is the window case.

3. How you reply

window.addEventListener("message", (event) => {
  if (event.origin !== "https://widget.example") return;
  event.source.postMessage({ type: "ack" }, event.origin);
});

event.source picks the window. event.origin is the targetOrigin for that send. (MDN)

That origin is the sender at send time. If the window goes to a new origin before the reply arrives, the browser discards the reply. There is no error. That is the same rule as lesson 1.

useEffect(() => {
  function onMessage(event) {
    if (event.origin !== "https://widget.example") return;
    event.source.postMessage({ type: "ack" }, event.origin);
  }
  window.addEventListener("message", onMessage);
  return () => window.removeEventListener("message", onMessage);
}, []);

4. Which iframe

You compare the handle to contentWindow. (MDN)

if (event.source === alphaRef.current.contentWindow) {
  // the alpha iframe sent this
}

Do not use event.origin to pick the element. Two iframes can have the same origin.

On this lesson file, both children stamp event.origin as the text null. A string check cannot tell them apart. The handle check can.

5. Do these steps

The box below has two real iframes: Alpha and Beta.

1. In Alpha, click Ping parent. The last-sender line must say source===alpha.contentWindow true.
2. Click Reply to source. Alpha must show the reply. Beta must not.
3. In Beta, click Ping parent. The last-sender line must say source===beta.contentWindow true.
4. Click Reply to source. Beta must show the reply.
5. Click Reply to the other. The iframe that did not ping must show that data.

6. Practice

Do the five steps first. Then answer these questions.

7. Remember

• event.source is a WindowProxy. event.origin is a string.
• Reply: event.source.postMessage(reply, event.origin).
• To find the iframe element, compare event.source === iframe.contentWindow.
• Two iframes can share an origin. The handle is how you tell them apart.

Primary source (read next)

MDN — The dispatched event. Then mapping message sources to iframes.