The 'blocked a frame with origin "null" from accessing a cross-origin frame` error occurs because of
`Cross-originn` request. To solve this error, you have a number of solutions like using a
`local web server` or using the browser with
`cross domain web security` disabled few solutions to number. This article will discuss all the solutions to solve cross-origin issues.
Photo by Rachel Vine
TABLE OF CONTENTS
- What is "blocked a frame with origin "null" from accessing a cross-origin frame"?
- Why "does blocked a frame with origin "null" from accessing a cross-origin frame" happens?
- How to resolve:
What is “blocked a frame with origin "null" from accessing a cross-origin frame”?
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 origin "null" from accessing a cross-origin frame “ happens?
This can happen when you try to show material from another website on your own. This is referred to as a cross-origin request.
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.
Following is the error message you get:
`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” ?
Host your webpage on a local web server or use a different browser, such as Firefox.
Solution 2: cross domain policy disabled
Run the 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 lik “xampp” or “Live Server”
You could solve it by installing xampp and move all files to htdocs or using extension like “Xampp”
Solution 4: window.postMessage() method
Remember the same-origin policy prevents scripts from accessing the content of sites with different origins, you can securely enable cross-origin communication between Window objects by using window.postMessage().
`postMessage(message, targetOrigin, [transfer])`
ℹ Browsers that follow the same-origin policy prevent scripts from accessing frames with different origins.html (https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)
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() is now the best way to interact between frames/iframes. postMessage
Top comments (0)