Cross Window Communication … Concluding the craft, 30daysofJavaScript ==> Day 30

Photo by Pavan Trikutam on Unsplash

Originally the web forbids pages that are not from the same origin from reading information from each other, this is to protect the user from information theft. But of course, pages from the same origin can read information from each other, you could run a function in the console on one page and execute it on the other. This rule is known as the “Same Origin” (same site) policy. Before we go into examples, let's look at pages with the same origin.

A page is said to have the same origin if they have the same protocol, domain and port. The following URLs have the same origin:

• https://medium.com/me/stories/drafts
• https://medium.com/
• https://medium.com/me/notifications

But these URLs do not have the same origin:

• https://medium.com/me/notifications
• https://javascript.info/cross-window-communication
• https://angular.io/features

Examples

Images of two websites from the same origin

The images above show one webpage reading from another webpage of the same origin. The first URL has the address https://www.learnweb3.io/about and the second https://www.learnweb3.io/tracks.

Taking a closer look, we can see the function was displayed on the other webpage. This means that communication with window objects of the same origin has been achieved seamlessly. But how then do we make windows of different origins talk to each other? Because of course, this is forbidden by the same-origin policy. Oh well, we have a little help.

The postMessage interface allows windows to talk to each other no matter which origin they are from. This means that a window from https://javascript.info/cross-window-communication can read and talk to https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage on a condition that both windows agree and call corresponding JavaScript functions.

postMessage

The window that wants to send a message calls the postMessage() method of the receiving window. In other words, if we want to send the message to win, we should call win.postMessage(data, targetOrigin).

NB: Specifying targetOrigin ensures that the window only receives the data if it’s still at the right site. Important when the data is sensitive.

Syntax

targetWindow.postMessage(message, targetOrigin)
targetWindow.postMessage(message, targetOrigin, transfer)

onmessage

This object method is used to receive a message from the target window when there is a handler on the message event.

The event object has special properties:

• dataThe data from postMessage.
• originThe origin of the sender, for instance http://javascript.info.
• sourceThe reference to the sender window. We can immediately source.postMessage(...) back if we want.

To assign that handler, we should use addEventListener, a short syntax window.onmessage does not work.

Check out examples of cross-communication examples in the link for the references.

References

• https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#syntax
• https://javascript.info/cross-window-communication

Conclusion

It feels so good to complete my article on 3-daysofJavascript, I want to thank you for the claps and responses. It has been an amazing journey so far. Also, I have started learning the framework, Angular. Hoping that I can share my journey as time goes on. I am so grateful to God for this opportunity to learn and be better. See you in more articles to come.

What is this about?

30daysofjavascript is a series of writing on how I learned to code in JavaScript. These episodes are as simplified as possible and for beginners like me, I hope you find JavaScript less confusing throughout this episode. Thank you as always and see you in the next episode. Check out every episode I have written here.