So there is a parent page on one domain that includes an iframe from a different domain.
I am trying to navigate parent page from the iframe using a relative path that would take base url from the parent.
I tried with
<script type="text/javascript">
function navigateParent(targetPage) {
var url = window.parent.location.href;
if (url.indexOf('.') > -1) {
url = url.substring(0, url.lastIndexOf('/') + 1);
}
window.parent.location = url + targetPage;
}
</script>
but this produces an error:
Unsafe JavaScript attempt to access frame with URL ...my parent url... with URL ...my iframe url... . Domains, protocols and ports must match.
Is there any way to do this? Ie specifiying some cross-domain permission or something.
Cross domain protections are now serverly enforced browser-side to protect the user (following some cross domain injections).
To call a function or change a property in a frame/window served by another domain you can
specify CORS headers on the server (this tells the browser that cross domain communication is fine)
preferred : use postMessage to communicate between windows and frames
Related
I have an iframe in which src is different domain, and I am trying to call a method in iframe from parent window. Then it is giving below:
Uncaught SecurityError: Blocked a frame with origin
"http://localhost:8080" from accessing a frame with origin
"http://stage.xyz.com". Protocols, domains, and ports must
match.
On main window I have this:
launchUPwidget(widgetParams);
function launchUPwidget(widgetParams){
document.getElementById('iframe').contentWindow.invokeUPWidget(widgetParams);
}
On iframe:
window.invokeUPWidget = invokeWidget;
So how can I call a function in child iframe form parent window where iframe src is different domain?
here protocals are same but the domains are different.
You can't access an <iframe> with Javascript, it would be a huge security flaw if you could do it.
For the same-origin policy every browser blocks any script trying to access a frame with a different origin.
Even though same-origin policy blocks scripts from accessing the content of sites with a different origin, if you own both the pages, you can work around this problem using window.postMessage and its relative message event to send messages between the two pages, like this:
In your main page:
var frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, '*');
In your (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;
}
});
There is a similar question. You can read about it more there.
It seems this is not possible by default because I get error blocked a frame with origin x from accessing a frame with origin y. I know this is because of security but I would like to allow by partners to integrate my iframe. Iframe is on domain mysubdomain.mysite.com and contains search box. Once user has made search it has been redirected to page partners-domain-containing-search-results.com Search results are also on domain mysubdomain.mysite.com and I would like to read parameters from url (hash and query string parameters) but I can't because I can't read parent url parameters (from partners-domain-containing-search-results.com ).
You should be able to use top.location from subdomain.mysite.com to read the parent urls of partners-domain-containing-search-results.com:
e.g. from an iframe hosted on mysubdomain.mysite.com and embedded in partners-domain-containing-search-results.com?hello=true#blabla you should be able to run:
top.location.hash
>"#blabla"
top.location.search
>"?hello=true"
Note: you cannot modify the other domain's location object or you will see:
Uncaught SecurityError: Blocked a frame with origin
"http://domain2.com" from accessing a frame with origin
"http://domain.com". Protocols, domains, and ports must match.
Hi I am having a problem with this message.
the url from my MAIN page is:
page1.mydomain.com/page1.html
this page have a Iframe to:
frame.mydomain.com/iframe.html
and from the main page I open a window from a another page like that:
mywindow = window.open("http://page1.mydomain.com/page3.html", 'page3', 'status=1,height=768,width=1280,scrollbars=1');
all the 3 pages have set the javascript:
document.domain = "mydomain.com";
I can interact from the main page to the iframe without a problem.
I only have problem to access the window.open properties.
Like:
mywindow.document.getElementById("something")
I got that error message.
blocked a frame with origin from accessing a cross-origin frame
if I try from the page3:
window.opener.document.getElementById("somethingPage1")
I got the same error:
blocked a frame with origin from accessing a cross-origin frame
Why I can interact with the iframe and can't interact with the window.open and the window.opener ?
In my case domain names were different and I solved it by replacing client's domain with the parent's domain name. You can try that if domain name is not matter in child(popup) windows.
What you are trying to access window.opener.document.getElementById() won't work.
It will raise security error as you posted. Best way to do is make both the URLs under the same Domain Name if it's possible. Or just for the development you can install extension
"Allow-Control-Allow-Origin:" in Chrome it will work.
I want to read window.top.location.origin from inside an iFrame.
The parent and iFrame are on different HTTPS domains.
Trying to access that throws a security error in Chrome for example.
[DOMException: Blocked a frame with origin "..." from accessing a cross-origin frame.]
Is it at all possible to do that without triggering the error?
I need window.top's origin because I send different postMessages based on that origin.
I know this is old, but maybe it helps others:
The full Parent URL will appear to the <iframe/> as document.referrer. With that, you can parse it locally to find the URL specifics you may need.
if (document.referrer !== location.href) {
let foo = document.createElement('a');
foo.href = document.referrer;
console.log('origin is:', foo.origin);
}
Of course, this is thanks to the anchor tag's built-in parsing. Hidden gem~!
Because of the same-origin policy, JavaScript in an iframe from a different origin will not be able to communicate with its parent frame. If you have access to the server that serves the iframe, you can enable CORS, otherwise I think you are out of luck
This answer specifies explains how to access the content of all iframes on gmail.com https://stackoverflow.com/a/9439525/222236
But on mail.google.com it throws this error:
Unsafe JavaScript attempt to access frame with URL https://plus.google.com/u/0/_/... from frame with URL https://mail.google.com/mail/u/0/#inbox. Domains, protocols and ports must match.
I tried adding *://plus.google.com/* to the matches of the manifest of the extension, but it didn't help.
Update: Checking for the url before accessing the content works, but my logic is very crude at the moment as it only checks for google plus:
if(-1==iframes[i].src.indexOf('plus.google.com')) {
contentDocument = iframes[i].contentDocument;
if (contentDocument && !contentDocument.rweventsadded73212312) {
// add poller to the new iframe
checkForNewIframe(iframes[i].contentDocument);
}
}
Access is blocked due to the same origin policy.
The right way to avoid the error is to exclude the frames from a different origin. Your logic is very crude indeed. It does not specifically look in the host name, and it doesn't account for other domains.
Invert the logic to have a robust solution:
if (iframes[i].src.indexOf(location.protocol + '//' + location.host) == 0 ||
iframes[i].src.indexOf('about:blank') == 0 || iframes[i].src == '') {
Explanation of this white list:
protocol://host/ = https://mail.google.com.
Obviously, the current host has to be allowed
about:blank and an empty string
These frames are dynamically created and scripted by GMail.
mail.google.com and plus.google.com are not the same domain. JavaScript implementations in modern web browsers do not allow cross-domain scripting.
Without resorting to different kinds of hackery, the correct way to get around this is through CORS (http://en.wikipedia.org/wiki/Cross-origin_resource_sharing), which is not available to you in this circumstance.