Who can hear

1. Two listeners

A page has two iframes. Alpha and Beta.

Both add a listener on the window.

A send to Alpha’s contentWindow does not go to Beta. You already know that.

A send to both windows reaches both listeners.

If you later add a third listener on Alpha’s window, that listener also hears Alpha’s window traffic. You filter with event.origin.

A MessagePort is different. Only the holder of that port hears it. (HTML §9.4.1.2)

2. Pick by who must hear

The first port still travels on the window. After that, the private talk is on the port.

After you transfer port2, this page cannot use that end. On a port message, event.origin is empty. Those are lesson 5 facts B and D.

// trusted widget: give a port after ready
function givePort() {
  const channel = new MessageChannel();
  channel.port1.onmessage = onPrivate;
  trustedRef.current.contentWindow.postMessage(
    { type: "port" },
    "https://widget.example",
    [channel.port2],
  );
}

// both widgets may hear a public flag
function sendFlag(flag) {
  const data = { type: "flag", flag };
  trustedRef.current.contentWindow.postMessage(
    data,
    "https://widget.example",
  );
  otherRef.current.contentWindow.postMessage(
    data,
    "https://other.example",
  );
}

3. Stop here if

• A window listener does not check event.origin. Any holder of the WindowProxy can inject. (MDN)
• You set targetOrigin: "*" with a secret. Whoever lives in the window now can read it.
• You call postMessage on a port you already transferred or closed.
• You treat event.data as server truth. It is a structured clone from another page.

4. Do these steps

Alpha and Beta both listen on the window. Only Alpha will get a port.

1. Wait until both ready chips are true.
2. Click Transfer port to Alpha. Alpha port: must say held. Beta port: must stay none.
3. Click Send on window. Both window: lines must change.
4. Click Send on Alpha port. Only Alpha port: must change.
5. Read Beta again. Beta did not hear the port send.

5. Practice

Do the five steps first. Then answer these questions.

6. Remember

• Ask who must hear. Then pick the window or a port.
• The first port still uses the window. Check origin and source.
• Same page: call a function.
• Many same-origin tabs: BroadcastChannel.
• A port does not fix a window listener with no origin check.

Primary source (read next)

HTML §9.4.1.2 — Ports as a capability. Who holds the port can talk. Then MDN Channel Messaging API.