SecurityError: Blocked a frame with origin from accessing a cross-origin frame

What it means

Why it happens

1. 01

   The origin in the message is the origin of your page, the one that runs the script.

2. 02

   A frame from another origin gives only a few things to your script, such as postMessage() and location to set. document is not one of them.

3. 03

   The error is the same for contentDocument, for window.parent.document from inside the frame, and for window.top.

Check the page

Fix it if you own the site

// In the framed page (https://example.com)
window.parent.postMessage({ title: document.title }, "https://your-site.com");

// In your page (https://your-site.com)
window.addEventListener("message", (event) => {
  if (event.origin !== "https://example.com") return;
  console.log(event.data.title);
});

If you do not own the site

1. 01
   Use postMessage

   Ask the owner of the framed page to send the data you need with postMessage.

2. 02
   Use an API

   Many services give an API or an embed SDK for the data that the page shows.

3. 03
   Read it on your server

   Get the data with a request from your server, where the same-origin policy does not apply.

Sources

• Chromium source: dom_window.cc
• WebKit source: DOMWindow.cpp
• Firefox source: AccessCheck.cpp
• MDN: Same-origin policy
• MDN: Window.postMessage()