Resolving the Blocked a Frame with Origin "null" From Accessing a Cross-Origin Frame Error

The 'blocked a frame with origin "null" from accessing a cross-origin frame` error occurs because of `Cross-originn` request. To resolve this error, you have a number of solutions like using a `local web server` or using a browser with cross domain web security disabled few solutions to numbers.

This article will discuss all the solutions to solve cross-origin issues.

What Does the “Blocked a frame with origin "null" from accessing a cross-origin frame” Error Mean

Google Chrome has a security feature that blocks a frame with origin from accessing a cross-origin frame.

If you see an error that says “Blocked a frame with origin from accessing a cross-origin frame”, it means that this security feature is preventing the content from loading.

Why does “blocked a frame with the origin "null" from accessing a cross-origin frame “ happen

This can happen when you try to show material from another website on your own. This is referred to as a cross-origin request.

So accessing <frames> directly from your browser without using a web service is not permitted for security reasons, if you could do this then it would be a major security vulnerability.

The following is the error message you are getting:

DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame. error.

How to resolve “blocked a frame with origin "null" from accessing a cross-origin frame”

Solution 1:

Host your webpage on a local web server or use a different browser, such as Firefox.

Solution 2: cross-domain policy disabled

Run a browser with  policy disabled.

Solution 3: Extensions like “xampp” or “Live Server”

You could solve it by installing xampp and moving all files to htdocs or using an extension like “Xampp”.

Solution 4: window.postMessage() method

Remember that the same-origin policy prevents scripts from accessing the content of sites with different origins, and you can securely enable cross-origin communication between Window objects by using window.postMessage().

`postMessage(message, targetOrigin)``postMessage(message, targetOrigin, [transfer])`

Conclusion:

Please keep in mind that turning off the same-origin policy (CORS) will only affect your browser. Also, disabling same-origin security settings in a browser allows any website to access cross-origin resources, which is extremely risky and should only be done for development purposes. Only window.postMessage() now is the best way to interact between frames/iframes.