I have a page that has an iframe which loads html template from amazon aws s3 bucket. In the iframe, I want to take the link of the parent window, then add some parameters.
E.g: My parent window has the link http://xx.xx.x.xxx:8088 . I want to take this url, apprend "#abc/edf" and redirect to that page. But I cannot because my iFrame has url https://bucketName.s3.amazonaws.com
The error I get is
Uncaught SecurityError: Blocked a frame with origin "https://bucketName.s3.amazonaws.com" from accessing a frame with origin "http://xx.xx.x.xxx:8088". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
The javascript I used to redirect to another page from within an iFrame
function navigateTo(e){
var destination = e.data.destination;
var url = window.parent.location.host;
window.parent.location.href = url+destination;
}
$("#button").click({destination: "/#abc/edf"}, navigateTo);
html
<div id="button">Redirect to another page</div>
I cannot use absolute path for a reason. The parent window link will change somehow. I think the best solution is to take the parent url and append the parameters that I want. How can I make this happen without getting the security error?
Short answer is "you can't."
Browser security model precludes cross-domain and cross-protocol scripting from the client side. Your embedded iframe under the https protocol is not allowed to access (not even read) its parent's non-https context.
To do what you want, both contexts must agree on both domain of origin and protocol in order to interact on the client side.
Related
I would like to allow the user enter their url and browse in the iframe.
After they click the confirm button, i will get the url the browse from the iframe.
IFrameElement frame = IFrameElement.as(DOM.createIFrame());
frame.setSrc("http://www.example.com"); //set the url of user enter
VerticalPanel ver = new VerticalPanel();
ver.getElement().appendChild(frame);
// After they click the confirm button, get the url from iframe
Window.alert(frame.getContentDocument().getURL());
But i got an error after i get the url from iframe
Exception: com.google.gwt.event.shared.UmbrellaException: Exception
caught: (SecurityError) : Blocked a frame with origin
"http://localhost" from accessing a cross-origin frame.
In short: you should not do this and you can not do this.
First:
Some pages' authors simply do not want to let their pages to be displayed in a frame. Try Facebook for example, you'll get:
Refused to display 'https://www.facebook.com/' in a frame because it set 'X-Frame-Options' to 'deny'.
One can also check (with a script) if the page is in a frame and 'break through' and take main window, http://www.interia.pl/ is an example.
So, there are pages that can not be shown in a frame.
Second:
Read about Same Origin Policy (SOP):
Simply stated, the SOP states that JavaScript code running on a web page may not interact with any resource not originating from the same web site. The reason this security policy exists is to prevent malicious web coders from creating pages that steal web users’ information or compromise their privacy. While very necessary, this policy also has the side effect of making web developers’ lives difficult.
I am trying to build a phonegap app, which acts as a mini browser for a clients website. The clients customers would open this app, it would have a list of favorites. They could click on one of these favorites and it'd open that favorite within the minibrowser.html page. The minibrowser.html, has a favorites button at the top, then it has an iframe that should act as the browser. I open the favorites by changing the iframes src. I can capture the title/url with this code
$iframe.on('load', () => {
try {
console.log($iframe[0].contentDocument.title);
currentUrl = $iframe[0].contentDocument.URL;
console.log(currentUrl);
} catch (e) {}
});
But the problem occurs when the webpage within the iframe trys to access window.top with this line
window.top.scrollTo(0,1);
That throws the error:
Uncaught SecurityError: Blocked a frame with origin "https://webapp.company.com" from accessing a frame with origin "file://". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "file". Protocols must match.
Is there anyway to spoof window.top for the iframe? Is there anyway of doing this without hosting the phonegap code on webapp.company.com. I do not have access to webapp.company.com
Due to the nature of the HTTPS protocol, it's mandatory for the server to specify if it's accepting third-party frame distribution (something like what you're trying to do). This is done as it's a major flaw when it comes to security.
Imagine, a person may use a simple variant of this hack to show a part of the Facebook page, and capture your account details. This policy prevents that.
A simple workaround would be to use some sort of URL shortener, or a proxy forwarder.
For a quick example: http://codepen.io/nakshatra334/pen/OMgLLP and open up the console; you'll see the content security policy.
The header, X-Frame-Options is denying this as people may use this for illicit purposes.
I'm trying to access to the URL of the parent window from an iFrame but I got an error on my server:
Unsafe JavaScript attempt to access frame with URL
http://www.domain.com/folder/ from frame with URL
http://www.domain.com/folder/file.html. The frame being accessed set
'document.domain' to 'domain.com', but the frame requesting access did
not. Both must set 'document.domain' to the same value to allow
access.
I'm in the same domain so I don't understand why I get this error.
For your information everything works good in localhost.
Thanks for your help.
OK I found the solution.
I put this code and that works:
document.domain = 'domain.com';
I have a javascript script that is being run from within an iframe that is trying to access the parent but I'm getting the following error:
Unsafe JavaScript attempt to access frame with URL mysite.com from frame with URL myothersite.com?. Domains, protocols and ports must match.
The iframe html is on a different domain but I didn't think that would matter. This is the code that is generating the JS error:
var parent_site = parent.document;
Is there a way around this?
If the parent domain is a trailing part of the iframe domain (i.e., iframe is child.parent.com and parent is parent.com) you can set the domain of the iframe document with document.domain = "parent.com" and avoid the problem.
If the domains of the parent and the iframe are unrelated there is no way to work around it.
Do some research on CORS (Cross-origin resource sharing): http://www.w3.org/TR/cors/
You essentially need to add this to your .htaccess of the parent domain:
Header set Access-Control-Allow-Origin *
Header set Access-Control-Allow-Headers x-requested-with
Ideally you'd replace the * with the domain(s) for which you want to allow access.
I would like to know how I can get content from an IFrame cross-domain?
I have no problem getting content from a non-cross-domain iFrame, but when it's located on another domain, JavaScript doesn't allow access.
You use Cross Document Messaging, here's an example. Here's the significant code from the parent page:
window.addEventListener('message', receiver, false);
function receiver(e) {
document.getElementById('message').value = e.data;
}
function update_child() {
var el = document.getElementsByTagName('iframe')[0];
el.contentWindow.postMessage('Updated from parent', '*');
}
The child page has identical code - note that you need to be able to implement the interface on both domains for this to work, either by yourself, if you control both, or in co-operation with the owner of the other domain. In production code you should set (and check) the origin.
Short of requesting it via a proxy on your own server, you can't.
The same origin policy prevents it (and for good reason; I would be very unhappy if you loaded my banking site in your iframe and read all my account details)