How to Send Data From iframe To Parent Page — JavaScript postMessage Tutorial

Summary

In this tutorial, Dom walks through how to send messages from an embedded iframe to the parent website using JavaScript. The tutorial covers setting up an iframe with different origins, using the postMessage API to send data, and listening for the message in the parent window. Dom explains the importance of verifying the message’s origin for security and demonstrates passing both simple strings and complex objects between the iframe and parent. This is an essential guide for developers looking to enable cross-origin communication between embedded applications and their parent websites.

Takeaways

• 😀 Iframes allow communication between different web origins (websites/services) using the `postMessage` method.
• 😀 The `postMessage` method can send a variety of data types, including simple strings and complex objects, across different origins securely.
• 😀 The target origin parameter in `postMessage` ensures that messages are sent only to trusted domains, improving security.
• 😀 A typical use case is embedding an iframe from a different origin into a main website and sending data from the iframe to the main site.
• 😀 The `parent` window in an iframe can be accessed via `window.parent` to send messages to the embedding site.
• 😀 For security, it's important to check the `origin` of incoming messages to ensure they come from a trusted source.
• 😀 The `postMessage` method works asynchronously, meaning messages can be posted without waiting for a response, making it suitable for various use cases.
• 😀 You can use the `addEventListener` method on the parent website to listen for messages coming from the iframe.
• 😀 The `message` event contains an object with data and the `origin`, which should be validated before processing the data.
• 😀 You can send complex data like objects without needing to manually serialize them, thanks to the `structuredClone` algorithm used by `postMessage`.

Q & A

What is the purpose of the video?

The video explains how to post messages from an embedded iframe to a main website, specifically demonstrating cross-origin communication using JavaScript.

Why is cross-origin communication important in this context?

Cross-origin communication is important because it allows for interaction between different websites or services that are hosted on different domains or ports, such as an iframe embedded in a parent website.

What is the role of the 'window.parent' in the code?

The 'window.parent' refers to the parent window (the main website) that contains the iframe. It allows the iframe to send messages to the parent window using the postMessage method.

What security measure does the 'targetOrigin' parameter in postMessage serve?

The 'targetOrigin' parameter ensures that the message is sent only to trusted origins. It specifies the origin the message should be sent to, preventing potential cross-origin attacks.

What happens if no message listener is added on the parent website?

If no message listener is added, the message sent by the iframe will not be handled by the parent website, meaning no response or action will occur when the message is posted.

How do you listen for messages from an iframe in the parent window?

In the parent window, you can use 'window.addEventListener' to listen for the 'message' event, which will capture the messages posted by the iframe.

What is the significance of the 'origin' property on the message event?

The 'origin' property is used to verify the source of the message, ensuring that the message comes from a trusted origin before executing any further code.

How can you differentiate different types of messages when handling postMessage?

You can use a 'type' property in the message object to differentiate between different events or messages, which helps in deciding how to handle the data within the message.

Why is it important to use 'window.parent.postMessage' with an object?

Using 'window.parent.postMessage' with an object allows you to send complex data (e.g., multiple properties or nested structures) from the iframe to the parent window, making the communication more versatile.

What is the recommended practice for setting the 'targetOrigin' during development?

During development, it is common to use an asterisk ('*') for the 'targetOrigin' to allow messages from any origin. However, in production, you should specify the exact origin to enhance security.