blocked a frame with origin "null" from accessing a cross-origin frame

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

1. What is "blocked a frame with origin "null" from accessing a cross-origin frame"?
2. Why "does blocked a frame with origin "null" from accessing a cross-origin frame" happens?
3. How to resolve:
   1. Solution 1: Use local web server
   2. Solution 2: Import the datetime class from the datetime module
   3. Solution 3: Extensions like xampp or Live Server
   4. Solution 4: window.postMessage() method
4. Conclusion

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.

So accessing 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” ?

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 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)`
`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)

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() is now the best way to interact between frames/iframes. postMessage