Cross domain and cross window communication in JavaScript | document.domain | Window.postMessage()

Summary

In this video, the focus is on cross-domain and cross-window communication in JavaScript, explaining how to work with the Same Origin Policy. The video discusses the role of `document.domain` for enabling communication between subdomains and the parent domain. It also covers the limitations of `document.domain` and introduces `window.postMessage` as a solution for communication between completely different domains. Through practical demonstrations, viewers learn how to safely send messages across origins and handle client-side communication, ensuring secure and effective cross-origin resource sharing.

Takeaways

• 😀 The Same-Origin Policy is a critical security mechanism that restricts interactions between resources from different origins to prevent potential malicious actions.
• 😀 Two URLs are considered to have the same origin if their protocol, hostname, and port are identical.
• 😀 A script from mydomain.com cannot access resources from sub.mydomain.com due to the Same-Origin Policy, even though they share the same protocol and port.
• 😀 Using `document.domain`, a page can change its origin to allow communication between subdomains and their parent domains.
• 😀 When `document.domain` is set to the parent domain (e.g., mydomain.com), cross-origin communication is allowed between subdomains like sub.mydomain.com and mydomain.com.
• 😀 The `document.domain` mechanism does not allow communication between completely different domains (e.g., mydomain.com and mydomain2.com).
• 😀 `window.postMessage` is a method that safely enables communication between windows of different origins, such as between a page and an iframe, or a pop-up.
• 😀 The `window.postMessage` method can be used to send messages between windows, specifying the target origin to ensure secure cross-origin communication.
• 😀 To send a message from a parent window to an iframe, you can use `window.postMessage` along with an event listener to handle the message in the iframe.
• 😀 The use of `postMessage` allows a parent window to communicate with an iframe even if they belong to different domains, bypassing the Same-Origin Policy restrictions.

Q & A

What is the same origin policy in JavaScript?

The same origin policy is a security mechanism that restricts how documents or scripts loaded from one origin can interact with resources from another origin. It helps isolate potentially malicious documents and reduces attack vectors.

How is the origin of a URL defined in the same origin policy?

The origin of a URL is defined by its protocol, hostname, and port number. Two URLs are considered to have the same origin if these three components match exactly.

What happens when two different origins try to interact in JavaScript?

When two resources from different origins try to interact, the browser's security mechanisms block the interaction. This is done to prevent cross-origin access, which could lead to security vulnerabilities.

What is the behavior when a page from mydomain.com iframes content from sub.mydomain.com?

If a page from mydomain.com tries to iframe content from sub.mydomain.com, the interaction is blocked due to the same origin policy, even though the protocol and port are the same. The browser considers them different origins due to the subdomain.

How can document.domain help with cross-origin communication between subdomains?

The document.domain property can be set to the same parent domain for both the main page and the iframe, allowing them to bypass the same origin policy and interact with each other. This works for subdomains, as they share a common parent domain.

What happens when document.domain is set to the parent domain in a subdomain setup?

When both the main page and iframe set document.domain to the same parent domain, the same origin check passes, and the script can access and manipulate the iframe's content, such as hiding elements inside the iframe.

Can document.domain be used for cross-origin communication between completely different domains?

No, document.domain only works for subdomains under the same parent domain. For completely different domains, other methods, like window.postMessage, are needed for communication.

What is the window.postMessage method used for?

The window.postMessage method is used to safely enable cross-origin communication between different window objects, such as between a parent window and an iframe, or between a page and a pop-up window.

How does the window.postMessage method work in a cross-origin setup?

In a cross-origin setup, the parent window can use postMessage to send a message to an iframe or another window. The receiving window listens for the message and processes it accordingly, based on the message's data, such as hiding an element.

What security measures can be taken when using window.postMessage?

When using window.postMessage, it is essential to verify the message's origin to ensure that it comes from a trusted source. This can be done by checking the origin property of the event in the message handler.