How to Solve 'SecurityError: Blocked a frame with origin from accessing a cross-origin frame'?

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

The Crux of the Issue

Same-origin policy, a critical security measure, prevents scripts from accessing frames with differing origins (protocol, hostname, or port). This error arises when attempting to access elements within an iframe with a non-matching origin.

Resolving the Issue

Direct JavaScript access is prohibited by the same-origin policy. However, if you control both pages, consider window.postMessage for cross-domain communication:

1. Main Page:

   frame.contentWindow.postMessage(data, 'https://second-site.example');

2. Iframe Page:

   window.addEventListener('message', event => {
     if (event.origin === 'https://first-site.example') console.log(event.data);
   });

Disabling Same-Origin Policy (Unwise)

In exceptional cases, you may need to disable the policy. However, it's strongly advised against due to security concerns.

For some browsers, disabling instructions can be found here:

• [Google Chrome](link)
• [Mozilla Firefox](link)
• [Safari](link)
• [Microsoft Edge (Chromium)](link)
• [Brave](link)
• [Microsoft Internet Explorer](link)

Remember, disabling same-origin policy affects only your browser and poses significant security risks.

The above is the detailed content of How to Solve 'SecurityError: Blocked a frame with origin from accessing a cross-origin frame'?. For more information, please follow other related articles on the PHP Chinese website!