This question already has answers here:
Cross domain iframe issue
(5 answers)
Closed 5 years ago.
My webpage(wp1) has an iframe. The source of the iframe is another webpage(wp2). I have some javascript functions on wp1 which try to manipulate the contents of wp2. However , the browser gives " Blocked a frame with origin "null" from accessing a cross-origin frame." How can i get around this?
According to the MDN page about postMessage, if your parent and child domains differ only by a subdomain (e.g example.com and subdomain.example.com), you can set document.domain to the same value on both pages and it should be enough to get it to work.
Accepted value for document.domain is that of the superdomain (example.com = ok, subdomain.example.com = nope), according to Same Origin Policy.
Related
This question already has answers here:
SecurityError: Blocked a frame with origin from accessing a cross-origin frame
(9 answers)
Closed 1 year ago.
My website provides functionality for embedding a video from my website via an iframe (similar to Youtube or any other video portals).
However, is there a way to exactly detect, which website included mine as an iframe.
Tried within my iframe embed, trying to detect parent's URL
if (window !== window.top) {
console.log(window.top.location.href);
console.log(window.parent.location.href);
}
but ended up with an error
Uncaught DOMException: Blocked a frame with origin "https://myurl.com" from accessing a cross-origin frame.
at console.log (<anonymous>)
at https://www.myurl.com/embed/1544401:20:21
Is there a workaround?
UPD. Solved by using document.referrer
You can't access an <iframe> with different origin using JavaScript, it would be a huge security flaw if you could do it. For the same-origin policy browsers block scripts trying to access a frame with a different origin.
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
const frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');
//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 applied in both directions, creating a listener in the main page too, and receiving responses from the frame. The same logic can also be implemented in pop-ups and basically any new window generated by the main page (e.g. using window.open()) as well, without any difference.
or just disable the same origin policy in your browser
This question already has answers here:
SecurityError: Blocked a frame with origin from accessing a cross-origin frame
(9 answers)
Closed 1 year ago.
How can you read and change the x / y coordinates of a PDF in an iframe, my iframe looks like this: <iframe id="pdf-interface" class="pdf-interface" src=path></iframe> where path is the local path to the PDF file.
All attempts I've tried until now failed with the error message: Uncaught DOMException: Blocked a frame with origin "http://127.0.0.1:8080" from accessing a cross-origin frame.
Is there any way to fix this or an alternative way of doing this?
You can't access cross-origin iframes directly.
Read more about it on Quentin's answer https://stackoverflow.com/a/66139466/7942242
And Willy Wonka's answer might interest you as well https://stackoverflow.com/a/39685594/7942242 which has a reference about how to bypass Same Origin Policy.
This question already has answers here:
Get protocol, domain, and port from URL
(19 answers)
Closed 5 years ago.
I'm running the development server on localhost:8000. Can document.domain include a port number, e.g., document.domain = 'localhost:8000'? I seem to be getting an error saying localhost:8000 cannot be parsed properly.
No. The document.domain includes only the host name.
document.domain
Gets/sets the domain portion of the origin of the current document, as used by the same origin policy.
Alternatively, location.port gets you the port of the domain.
This question already has answers here:
SecurityError: Blocked a frame with origin from accessing a cross-origin frame
(9 answers)
Closed 7 years ago.
I'm trying to fire a click event When web page loaded inside an iframe, but it doesn't seem to be working.
$(function(){
$('#iframe').load(function(){
var iframe = $('#iframe').contents();
iframe.find("#btnSubmit").click(function(){
alert("test");
});
});
});
When i am trying to using this code i am getting the error.
Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "https://pptform.state.gov". The frame requesting access has a protocol of "file", the frame being accessed has a protocol of "https". Protocols must match.
Please tell me how to resolve this issue. Thanks in advance
You cannot do that if the domains of the iframe and your parent site do not match, which they don't seem to in this case. Allowing it would be a big security risk.
If both sites are under your control, you can communicate across the iframe border using postMessage or using some URL hash hacks. However, if they are not under your control, there isn't much you can do about it.
This question already has answers here:
Get current URL from IFRAME
(8 answers)
Closed 5 years ago.
I have the following iframe in my code.
<iframe src="http://www.w3schools.com" id="myframe" name="myframe" height="100%" width="100%"></iframe>
I need to get the new URL of the page which is displayed after some navigations within the iframe.
I tried several methods but none of them delivered what I wanted. Some methods returned the same URL given as src. Others resulted in security issues.
How can I get this done using AngularJS?
(Asking for a friend)
As you commented on my last answer, here is my new one form Marco Bonelli
Same Origin security Policy
You can't access an <iframe> with javascript, it would be a huge security flaw if you could do it. For the Same Origin Security Policy, any browser blocks any script trying to access a frame that has another origin.
For example if you are in http://www.example.com and want to acces an with src="http://www.anothersite.com" you'll not be able to do that, because the frame has another origin.
Origin is considered different if at least one of the following variables isn't maintained:
<protocol>://<hostname>:<port>/path/to/page.html
Protocol, hostname and port must be the same of your domain, if you want to access a frame.
Workaround
Even thought Same Origin Policy blocks scripts from manipulating content of sites with a different origin, if you own both domains/sites, you can work around this problem using window.postMessage and its relative event window.onmessage 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 <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;
}
});
Would be the solution without angularJS.
It's just pure js.
document.getElementById("myframe").contentWindow.location.href