I wrote a content script that injects an iframe to any website (therefore different domain).
I need the parent website to send some information to the child iframe, however I couldn't find a way to do it.
The code
var targetFrame = $('#myIframe')[0];
targetFrame.contentWindow.postMessage('the message', '*');
Doesn't work somehow and i get a Cannot call method 'postMessage' of undefined error.
But then when I tried the same code directly in Chrome's console, it worked.
I had no trouble sending a postMessage from the child to the parent though but just need a way for the parent to send messages to the child iframe.
I recently wrote code that did postMessage to an iframe and I encountered quite a similar issue where it said contentWindow is undefined.
In my case, my iframe was not yet part of the DOM tree, it was a variable created by document.createElement('iframe').
Once I put it hidden (width and height 0px, visibility hidden) into the body of the page, contentWindow was no longer undefined and everything worked as expected.
I found the Mozilla Developer Network page for postMessage extremely useful when I was working on my project.
I've had success using the following library:
http://easyxdm.net/wp/
It doesn't require any flash/silverlight, only javascript. And it is compatible as far back as as IE6.
It took a little doing to get it up and running, but once it was things ran very smoothly.
Keep in mind that if the iFrame you're opening on the other domain uses a different protocol (HTTP vs. HTTPS) the browser will kick out a warning which prevents your script from running (unless the user says they will accept the risk). If you have access to both protocols it may be wise to host the contents of the iFrame on both HTTP and HTTPS and load the appropriate script accordingly.
Good luck!
You don't need to target contentWindow. Try this:
var targetFrame = $('#myIframe')[0];
targetFrame.postMessage('the message', '*');
Related
I want to use the window.parent.postMessage function, however, I want it to be used on a redirected iframe. Here is the scenario:
Let's say that our browser is at http://mytestsite.com and it has an iframe inside of it which is initially set at http://othersite.com
to be more accurate, the iframe is set to http://othersite.com?redirect-url=http://mytestsite.com
(except the redirect site URL would be HTML encoded)
what happens is, some stuff gets done on othersite.com and then othersite.com eventually redirects itself to mytestsite.com. When this happens I thought I would be able to do this:
window.parent.postMessage({
'someData': 'whatever'
}, window.location.ancestorOrigins[0]);
and then this on the parent:
window.addEventListener('message', (e) => {
console.log('do something with: ', e);
});
However, this does not seem to work.
As it turns out, I did not fully understand the situation. In my question I simplified the problem but in real life this is what I had.
Main browser window: http://10.1.20.61:4200/console/payments
Note: this is an Angular 5 app. The IP address listed here is the local IP of my machine on the network here at work.
redirected iframe: http://localhost:4200/cc-auth-process
There were two problems that I had to solve here. First thing I noticed was when I went to do an ng build on this the build blew up because it said that window.location did not have a property of ancestorOrigins. I still don't know why this blew up though because at least in my case (in the Chrome browser) window.location did have an ancestorOrigins property which was an array of URLs.
Anyhow looking at this is what made me realize that the parent was in fact a different domain than the iframe. To fix this I added an environment variable and used this instead, which in turn allowed the postMessage to propagate to the parent.
I was trying to get the value from my child.jsp to my parent.jsp using
var myvalue = window.opener.document.getElementById(“parentId1”)
Even though there were no errors found in the console the value is not getting in the parent page.
The child popup window has the url starting like, https://host.example.com:7001/..... and the parent page url is different starts with http://anotherhost:8080/webapp.... is there any issue in communicating with a child window and a parent page which is on another server?
If so how can I solve this issue?
...is there any issue in communicating with a child window and a parent page which is on another server?
Yes, this is prevented by the browser's implementation of the Same Origin Policy.
If you control both servers, look at using Cross Origin Resource Sharing.
Alternately, if you control the JavaScript code on the pages but not the servers (or just if you prefer this mechanism), you can use postMessage to send messages from one window to another. You can't directly access the other window's elements as in your code snippet, but the two pages can cooperate to deliver the relevant value from one page to another, even cross-origin. More on postMessage: MDN | Spec
Unless you can use CORS or postMessage, I don't think you can do it client-side; you'll need a proxy.
I have a classic ASP web page that used to work... but the network guys have made a lot of changes including moving the app to winodws 2008 server running iis 7.5. We also upgraded to IE 9.
I'm getting a Permission denied error message when I try to click on the following link:
<a href=javascript:window.parent.ElementContent('SearchCriteria','OBJECT=321402.EV806','cmboSearchType','D',false)>
But other links like the following one work just fine:
<a href="javascript:ElementContent('SearchCriteria','OBJECT=321402.EV806', 'cmboSearchType','D',false)">
The difference is that the link that is failing is in an iframe. I noticed on other posts, it makes a difference whether or not the iframe content is coming from another domain.
In my case, it's not. But I am getting data from another server by doing the following...
set objhttp = Server.CreateObject("winhttp.winhttprequest.5.1")
objhttp.open "get", strURL
objhttp.send
and then i change the actual html that i get back ... add some hyperlinks etc. Then i save it to a file on my local server. (saved as *.html files)
Then when my page is loading, i look for the specific html file and load it into the iframe.
I know some group policy options in IE have changed... and i'm looking into those changes. but the fact that one javascript link works makes me wonder whether the problem lies somewhere else...???
any suggestions would be appreciated.
thanks.
You could try with Msxml2.ServerXMLHTTP instead of WinHttp.WinHttpRequest.
See differences between Msxml2.ServerXMLHTTP and WinHttp.WinHttpRequest? for the difference between Msxml2.ServerXMLHTTP.
On this exellent site about ASP you get plenty of codesamples on how to use Msxml2.ServerXMLHTTP which is the most recent of the two:
http://classicasp.aspfaq.com/general/how-do-i-read-the-contents-of-a-remote-web-page.html
About the IE9 issue: connect a pc with an older IE or another browser to test if the browser that is the culprit. Also in IE9 (or better in Firefox/Firebug) use the development tools (F12) and watch the console for errors while the contents of the iFrame load.
Your method to get dynamic pages is not efficient i'm afraid, ASP itself can do that and you could use eg a div instead of an iframe and replace the contents with what you get from the request. I will need to see more code to give better advice.
I am writing a simple lightbox-like plugin for my app, and I need to embed an iframe that is linked to an arbitrary page. The problem is, many web sites (for example, facebook, nytimes, and even stackoverflow) will check to see if is being embedded within a frame and if so, will refresh the page with itself as the parent page. This is a known issue, and I don't think there's anything that can be done about this. However, I would like the ability to know before hand if a site supports embed or not. If it doesn't, I'd like to open the page in a new tab/window instead of using an iframe.
Is there a trick that allows me to check this in javascript?
Maybe there is a server-side script that can check links to see if they permit an iframe embed?
I am developing a browser extension, so there is an opportunity to do something very creative. My extension is loaded on every page, so I'm thinking there's a way to pass a parameter in the iframe url that can be picked up by the extension if it destroys the iframe. Then I can add the domain to a list of sites that don't support iframe embed. This may work since extensions aren't loaded within iframes. I will work on this, but in the meantime....
Clarification:
I am willing to accept that there's no way to "bust" the "frame buster," i.e. I know that I can't display a page in an iframe that doesn't want to be in one. But I'd like for my app to fail gracefully, which means opening the link in a new window if iframe embed is not supported. Ideally, I'd like to check iframe embed support at runtime (javascript), but I can see a potential server-side solution using a proxy like suggested in the comments above. Hopefully, I can build a database of sites that don't allow iframe embed.
Check x-frame-options header by using following code
$url = "http://stackoverflow.com";
$header = get_headers($url, 1);
echo $header["X-Frame-Options"];
If return value DENY, SAMEORIGIN or ALLOW-FROM then you can't use iframe with that url.
Probably pretty late but what you need to do is make a request, likely from your server and look for the x-frame-options header. If it's there at all you can just open a new tab because if it is there is is one of the following: DENY, SAMEORIGIN, ALLOW-FROM. In any of these cases it's likely that you don't have access to open it in an iframe.
This subject has been discussed forever on the web with a particularly interesting (failed) attempt here:
Frame Buster Buster ... buster code needed
The bottom line is that even if you are able to construct a proxy that parses the contents of the page that you want in your iframe and removes the offending code before it is served to the iframe you may still come under "cease and desist" from the site if they get to hear about you doing it.
If you don't want your development to be widely available, you could probably get away with it. If you want your development to become popular, forget about it, and build a less underhand way of dealing with it.
Or develop it for mobile only... ;)
UPDATE: OK following on from your comment here's a bit of taster:
in javascript capture the click on the link
$("a").click(function(e){
preventDefault(e); // make sure the click doesn't happen
// call a server side script using ajax and pass the URL this.href
// return either a true or false; true = iframe breakout
// set the target attribute of the link to "_blank" for new window (if true)
// set the target attribute of the link to "yourframename" for iframe (if false)
// only now load the page in the new window or iframe
});
server side in PHP
$d = file_get_contents($url); // $url is the url your sent from the browser
// now parse $d to find .top .parent etc... in the <head></head> block
// return true or false
I am having the eternal battle against same origin policy.
I have a registration process loaded dynamically to a page in an iframe. This process is on a different domain which I know is prohibited via the same origin policy.
However ! at the end of the process I direct the frame back to a page on the parent domain with a url variable and then fire a function to refresh the page.
I assumed that as the page is now on the same domain this would not be an issue and on firefox and chrome it works great, however on ie it still throws a permission denied error.
The function im running inside the iframe
if(gup("command") == "refresh"){
parent.samRefresh();
}
And in the parent frame I have
function samRefresh(){
location.reload(true);
}
Does any one have any ideas? I know that there are some scripts knocking around to do this however I would prefer not to use them if possible.
Thanks in advance for any help you can give me
Try the following:
In iFrame:
window.parent.success_msg(deferred);
On parent page:
window.success_msg = function(dfd) {
console.log("I'm from the parent window");
};
Also make sure you're running localhost rather than viewing your files from your file system.