Reload page from iframe with cross-domain support

Context

When your iframe loads a page from a different domain, the browser blocks direct access to window.parent.location — the same-origin policy prevents cross-domain DOM reads. Instead, you send a message to the parent page with window.parent.postMessage, using the parent's exact origin, and verify the iframe's origin before reloading.

Usage

Inside iframe (sender):

const parentOrigin = "https://parent.example.com";

<button onClick={() => window.parent.postMessage("reload-page", parentOrigin)}>
  Reload Parent
</button>

In parent page (receiver):

useEffect(() => {
  const iframeOrigin = "https://iframe.example.com";

  const listener = (event: MessageEvent) => {
    if (event.origin === iframeOrigin && event.data === "reload-page") {
      window.location.reload();
    }
  };

  window.addEventListener("message", listener);
  return () => window.removeEventListener("message", listener);
}, []);

<iframe
  src="https://your-iframe-url.com"
  sandbox="allow-same-origin allow-scripts"
/>