[FIXED] What causes Uncaught DOMException: Blocked a frame with origin " " from accessing a cross-origin frame?

Issue

I loaded a website of my own design in an iframe. This website contains links to other cross-domain pages. I wrote a javascript function to retrieve the title of the current page contained in the iframe, but when I run my application at localhost:3000, I get the error:

Uncaught DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

Even when I am using this javascript method on the page that was originally loaded in the iframe, I still get the same error. I would like to know exactly what is causing this error.

Solution

The Same Origin Policy is a security feature that protects user data across origins.

Consider what would happen if you loaded my webmail service into a frame on your site and were then able to access the DOM of that page. This would be a security disaster.

Even just reading the title could expose if I was logged in (and thus had an account on the site) or not (and probably don’t) which would be useful information for constructing a phishing attack.

Answered By - Quentin

Answer Checked By - Robin (PHPFixing Admin)