33. What is a post message?

In JavaScript, the postMessage method is used to send messages between different windows, iframes, or web workers. It allows secure communication between different origins (cross-origin communication).

Syntax

js
CopyEdit
targetWindow.postMessage(message, targetOrigin, [transfer]);

Parameters

1. message – The data to send (can be a string, object, number, or array).
2. targetOrigin – Specifies the origin of the receiving window:
   • "*" – Any origin.
   • "https://example.com" – Only allow communication with the specified origin.
3. transfer (optional) – An array of objects that can be transferred, such as ArrayBuffer.

Example 1: Communication between a parent window and an iframe

Parent window (index.html):

html
CopyEdit
<iframe id="myFrame" src="https://example.com/receiver.html"></iframe>

<script>
    const iframe = document.getElementById('myFrame');

    // Send a message to the iframe
    iframe.onload = () => {
        iframe.contentWindow.postMessage('Hello from parent!', 'https://example.com');
    };

    // Listen for messages from the iframe
    window.addEventListener('message', (event) => {
        if (event.origin === 'https://example.com') {
            console.log('Message from iframe:', event.data);
        }
    });
</script>

Iframe (receiver.html):

html
CopyEdit
<script>
    // Listen for messages from the parent window
    window.addEventListener('message', (event) => {
        if (event.origin !== 'https://your-allowed-origin.com') {
            return; // Ignore messages from unknown origins for security
        }

        console.log('Message from parent:', event.data);

        // Send a response back to the parent
        event.source.postMessage('Message received!', event.origin);
    });
</script>

Example 2: Communication with a Web Worker

main.js:

js
CopyEdit
const worker = new Worker('worker.js');

// Send a message to the worker
worker.postMessage({ action: 'start', data: 42 });

// Listen for messages from the worker
worker.addEventListener('message', (event) => {
    console.log('Message from worker:', event.data);
});

worker.js:

js
CopyEdit
self.addEventListener('message', (event) => {
    console.log('Message from main script:', event.data);

    // Send a response back
    self.postMessage(`Received: ${event.data.data}`);
});

✅ When to Use postMessage

• Communicating between:
  • Parent window and iframe
  • Different browser tabs
  • Web workers
  • Browser extensions and content scripts
• Handling cross-origin messaging securely

🚨 Security Tips

• Always validate the event.origin to avoid security vulnerabilities.
• Use specific targetOrigin instead of * whenever possible for better security.