Solution:
Same-origin policy
You can't access an <iframe>
with different origin employing JavaScript, it would be a huge security flaw in case you could do it. For the same-origin policy browsers block scripts attempting to access a frame with a different origin.
Origin is considered different in case at least one of the following parts of the address isn't maintained:
<protocol>://<hostname>:<port>/...
Protocol, hostname and port should be the similar of your domain, in case you want to access a frame.
Examples
Here's what would occur attempting to access the following URLs from
http://www.example.com/home/index.html
URL RESULT
http://www.example.com/home/other.html -> Success
http://www.example.com/dir/inner/another.php -> Success
http://www.example.com:80 -> Success (default port for HTTP)
http://www.example.com:2251 -> Failure: different port
http://data.example.com/dir/other.html -> Failure: different hostname
https://www.example.com/home/index.html:80 -> Failure: different protocol
ftp://www.example.com:21 -> Failure: different protocol & port
https://google.com/search?q=james+bond -> Failure: different protocol, port & hostname
Workaround
Even though same-origin policy blocks scripts from accessing the content of sites with a different origin, in case you own both the pages, you can perform around this problem employing window.postMessage
and its relative message
event to send messages between the two pages, like this:
In your main page:
let frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');
The second argument to postMessage()
can be '*'
to indicate no preference regarding the origin of the destination. A target origin must always be provided when possible, to fudge disclosing the data you send to any other site.
In your <iframe>
(contained in the main page):
window.addEventListener('message', event => {
// IMPORTANT: check the origin of the data!
if (event.origin.startsWith('http://your-first-site.com')) {
// The data was sent from your site.
// Data sent with postMessage is stored in event.data:
console.log(event.data);
} else {
// The data was NOT sent from your site!
// Be careful! Do not use it. This else branch is
// here just for clarity, you usually shouldn't need it.
return;
}
});
This method can be employed in both directions, making a listener in the main page too, and taking responses from the frame. The similar logic can also be executed in pop-ups and originally any new window produced by the main page (for examle employing window.open()
) as well, without any difference.
Disabling same-origin policy in your browser
There meanwhile are some good answers regarding this topic. Hence, for the browsers where this is possible, I'll link the comparative answer. But, please remember that disabling the same-origin policy will just affect your browser. Further, running a browser with same-origin security settings disabled grants any website access to cross-origin resources, hence it's very unsafe and must NEVER be done in case you do not know accurately what you are doing (for example development purposes).
In your main page:
var frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, '*');
In your <iframe> (contained in the main page):
window.addEventListener('message', function(event) {
// IMPORTANT: Check the origin of the data!
if (~event.origin.indexOf('http://yoursite.com')) {
// The data has been sent from your site
// The data sent with postMessage is stored in event.data
console.log(event.data);
} else {
// The data hasn't been sent from your site!
// Be careful! Do not use it.
return;
}
});