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 cross-domain web security/same-origin policy disabled.
Disabling the same-origin policy is extremely risky and should never be attempted unless you are confident of what you are doing.
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])`
Browsers that follow the same-origin policy prevent scripts from accessing frames with different origins.html.
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.