Imagine Passing Notes Between Windows

Think about two classrooms side by side. Each classroom has its own students and teacher. They can’t just shout to each other (that would be messy!), but they can pass notes through a window. That’s what .postMessage() does—it allows different browser windows, tabs, or iframes to talk to each other safely.

What is .postMessage()?

.postMessage() is a method for sending messages between different windows, tabs, or iframes, even if they are from different domains (like one from example.com and another from mygame.com). This is useful for:

  • Embedding YouTube videos (YouTube iframe talks to your page)
  • Cross-domain communication
  • Secure messaging between tabs

Why do we need it?

Normally, browsers block direct communication between different websites (called the Same-Origin Policy) for security reasons. .postMessage() is a safe way to allow this communication with restrictions.

How does it work?

There are two main players:

  1. Sender → uses .postMessage() to send a message.
  2. Receiver → listens for a MessageEvent to read the message.

Example

Sender page (sending a message):

let iframe = document.getElementById("myFrame");
iframe.contentWindow.postMessage("Hello from parent!", "*");

Here:

  • iframe.contentWindow → the window inside the iframe
  • "Hello from parent!" → the message
  • "*" → means send to any domain (you can specify for security)

Receiver page (listening for the message):

window.addEventListener("message", function(event) {
    console.log("Message received:", event.data);
});

What is MessageEvent?

When a message arrives, the browser sends a MessageEvent. It contains:

  • event.data → the actual message
  • event.origin → where the message came from
  • event.source → the window that sent it

Security Tip

Always check event.origin before trusting the message. Example:

if (event.origin === "https://trusted.com") {
    // Safe to process the message
}

Real-Life Analogy

Think of .postMessage() like sending a letter through a locked mailbox.

  • You put the note in the box (send message).
  • The other person checks the letter and who sent it (origin check).
  • This way, strangers can’t just sneak in harmful stuff without being noticed.

In Short

  • .postMessage() = send a message between windows/tabs safely
  • MessageEvent = the event that carries the message data

Review Questions

  1. The .postMessage() method allows different __________ to communicate safely.
  2. The main two players in .postMessage() are the sender and the __________.
  3. The event used to listen for messages is called __________.
  4. The actual data in a MessageEvent is stored in __________.
  5. To know where the message came from, we check the __________ property of MessageEvent.
  6. The wildcard "*" in .postMessage() means the message can go to __________ domain.
  7. For security, we should always verify the __________ before processing a message.
  8. Browsers normally block cross-domain communication because of the __________ policy.
  9. .postMessage() is often used in iframes and __________ communication.
  10. A real-life analogy for .postMessage() is passing __________ between classrooms.
<
Previous Post
Celebrating Excellence: Okiri Emmanuel Emerges as the Star of the Python Bootcamp!
>
Next Post
JavaScript WeakMap: Your VIP Secret Notebook