📤 postMessage in JavaScript: What it is and how it can save you in extreme situations

When developing modern web applications, it often happens that you need to make windows, iframes or web workers communicate with each other.

In these cases, the postMessage method proves to be a fundamental tool. In this article we will see what postMessage is, what it is used for and how to use it, with practical examples.

🔗 Do you like Techelopment? Check out the site for all the details!

What is `postMessage`?

postMessage is a method provided by the window and worker objects in JavaScript, which allows cross-origin communication, such as:

between a main window and an iframe;
between two open windows or tabs;
between a web page and a Web Worker.

What is it for?

It is used to send data from one context to another securely, even if they come from different sources. It is useful when:

you embed widgets from other sites (e.g. a YouTube iframe);
you use Web Workers to perform heavy operations in the background;
you open popup windows or communicate different tabs of the same application.

How to use it: the syntax

window.postMessage(message, targetOrigin, [transfer]);

Parameters:

message: the data to send (can be a string, object, array, etc.).
targetOrigin: the origin of the recipient (eg: 'https://example.com' or '*').
transfer (optional): transferable objects (like ArrayBuffer).

Beware of `targetOrigin`: it is mandatory

The second parameter of postMessage, called targetOrigin, is mandatory according to the HTML specification. It is used to indicate the origin (protocol + domain + port) of the recipient who should receive the message.

Why is it important?

Security: prevents data from being intercepted by unauthorized sources.
Control: ensures that the message arrives only in the right window.

Examples:

// Correct
iframe.contentWindow.postMessage({ type: 'ping' }, 'https://example.com');

// Not recommended in production
iframe.contentWindow.postMessage({ type: 'ping' }, '*');

Note: Although in some JavaScript environments the parameter may seem optional, the HTML specification explicitly requires that you always provide targetOrigin.

How to receive messages: `window.addEventListener('message', ...)`

To receive a message sent with postMessage, the receiver subscribes to the message event which provides the event object:

window.addEventListener('message', function(event) {
    console.log('Data:', event.data);
    console.log('Origin:', event.origin);
    console.log('Source:', event.source);
});

Explanation of fields:

event.data: the received message.
event.origin: the origin of the sending window (e.g. https://example.com).
event.source: a reference to the window that sent the message.

(Simple) Examples of use

Let's now look at typical postMessage usage scenarios that can inspire new, more robust and structured implementation techniques.

Communication between main window and iframe

<iframe id="myFrame" src="https://otheruser.com/frame.html"></iframe>

// Main window
const iframe = document.getElementById('myFrame');
iframe.contentWindow.postMessage({ type: 'GREETING', text: 'Hello iframe!' }, 'https://otheruser.com');

// In the iframe (frame.html)
window.addEventListener('message', function(event) { 
    if (event.origin !== 'https://yoursite.com') return; 
    console.log('Message received:', event.data);
});

Window Communication

// Open new window
const popup = window.open('https://example.com/popup.html');

// Send message after 1 second
setTimeout(() => {
    popup.postMessage('Hello from the main window!', 'https://example.com');
}, 1000);

// Get response
window.addEventListener('message', (event) => {
    console.log('Response from popup:', event.data);
});

💘 When `postMessage` can save you in development

postMessage can really save you from hours of frustration (or going crazy) in many scenarios of modern web development. It is one of the most underrated APIs, but extremely useful when you are dealing with multiple contexts or sandboxing.

Here are the main scenarios where postMessage becomes a lifeline:

🧩 1. Communication between iframe and main page

Problem: You have a widget (chat, login, payment, etc.) embedded in an <iframe>, but you can't access its content directly (because it's on a different domain).