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.
Related
Well, I'm trying to run an iframe or window.open in my subdomain page to access the domain page for Google Login permission purposes. But i'm getting the cross origin error.
My principal page is:
http://subdomain.lvh.me:3000
And when I click on the button, a new pages open or the iframe opens (does not make difference) with the URL:
http://lvh.me:3000
But in this way I can't access iframe.contentWindow.document to get the iframe content value from the principal page. That is the situation:
Image error
And, when I try to send by window.postMessage, this is the error:
postMessage error
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://subdomin.lvh.me:3001') does not match the recipient window's origin ('http://lvh.me:3001').
You need to set the targetOrigin field when using postMessage to another domain
postMessage(‘hello world’, ’http://lvh.me:3000/’)
While I was testing the SOP, i came to this scenario two documents has a relationship with the same domain as i would expected and it throws an error when i try to get the location.
To reproduce the problem:
Open https://www.google.com
from the console let opened = window.open("https://www.google.com")
from the same window do opened.location.toString() which will return the correct location
from the second tab's console do document.domain = "www.google.com"
from the first tab do opened.location.toString() and you will get an error
Uncaught DOMException: Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame.
at <anonymous>:1:12
Can anyone explain this strange behavior?
This error is not a bug. The same-origin policy is a security mechanism that ensures that window objects only have access to the informations they are authorized to get. In your case, this includes having access to opened.location.
Upon creation, both tabs have the same origin, which allows the first one to access opened.location. But after the call to document.domain='www.google.com', they don't anymore.
"What? But in both tabs, window.location.origin are identical"
Yes, but it is a little bit more complex. The origin is defined by the scheme/host/port tuple, see #TheUnknown's answer for more details. The scheme and host stay the same all along, and they're the one included in the string of window.location.origin.
The tricky thing to know is that any call to document.domain, including document.domain = document.domain, causes the port number to be overwritten with null, therefore causing a difference in the two tabs' origins, and preventing them from communicating informations like opened.location with one another, thus the error.
Informations extracted from MDN's guide on same-origin policy
First, I would recommend, you read Same-origin Policy.
The same-origin policy is a critical security mechanism that restricts
how a document or script loaded from one origin can interact with a
resource from another origin. It helps isolate potentially malicious
documents, reducing possible attack vectors.
Two URLs have the same origin if the protocol, port (if specified), and host are the same for both. You may see this referenced as the "scheme/host/port tuple", or just "tuple". (A "tuple" is a set of items that together comprise a whole — a generic form for double/triple/quadruple/quintuple/etc.)
In this particular case, you open a window with HTTPS protocol, however when you set the domain, the protocol is changed to HTTP, see image below:
As per 1, if the protocols are not the same, then its a violation of the principle and hence you get the error
Uncaught DOMException: Blocked a frame with origin
"https://www.google.com" from accessing a cross-origin frame.
cross-origin is the keyword here.
Also, check out this SecurityError: Blocked a frame with origin from accessing a cross-origin frame for more details.
This will be a bit uninformative (just states facts), nevertheless:
After you change domain in window B, window B stops accounting window A as opener.
Since window A is no longer considered an opener of window B, the access is prohibited.
This makes me think, that altering document.domain is considered potentially insecure and is "punished" by orphaning the child window.
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
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