I would like to get a value of an input that is on an Iframe.
I would like to get this value when I click on a button that is on the mainPage.
well, I have this piece of code
Javascript on the MainPage:
var targetDiv = document.getElementById('CP_dem');
Html on MainPage:
A tab that when you click on it, it load the Iframe
and a button that call the javascript function
Html on the Iframe:
Zip Code : <input class="textForm" id="CP_dem" type="text" name="CP_dem" maxlength="5" size="5" value="42101">
I would like to get the input value when I click on my MainPageButton.
The javascript code show that "targetDiv" is null.
Can you please help me.
thx
The first thing you have to tell is is:
Is the iframe hosted on the same http host as the parent website? If not, you will run into javascripts same origin protection, read about it at: http://en.wikipedia.org/wiki/Same_origin_policy
In short: You will not be accessible to access the content. But wait! There is a workaround which I will explain after dealing with the second case, where the http host is the same!
So lets talk about that second case. Well then the job is easy...
You just have to access the iframe (probably give the iframe tag an id "example"). Then you can access the window using example.contentWindow.document or example.contentDocument
Whichever is set, depends on the browser. You will have to do some checking in js. Something like
if(document.getElementById('contentWindow.document').contentWindow) {
ifdoc = document.getElementById('contentWindow.document').contentWindow.document
} else {
ifdoc = document.getElementById('contentWindow.document').contentDocument
}
Then you can access the form and element just as you do in javascript, i will not cover that here...
So lets jump to the interesting part of this answer! Lets work around the same origin poliy. This is also called "cross site scripting" (go ahead and google that...)
So basically it comes down to one thing:
There is one property that is accessible from the child as well as from the parent document!
It is the document.location property!
So what can you do?
The child site can modify it and then the parent site can monitor it and react to changes.
Another nice feature is the url fragment (the part which comes after the #). This part does not reload the website, so javascript can modify it happliy and the parent site can poll it in regular intervals and react to it...
Basically this provides a ground for communication for parent and child document which can be worked on. There are beautifully designed librarys for that! The javscript version of "log in with facebook" was based on the same principle!
What this means is that the child document has to cooperate with the parent, therefore it is intentional and both parties basically work together on the job.
So this is OK and it is ok that they work around the same origin policies.
Hope this covers your question in theory and gives you something to work with in praxis!
Have a nice day on SO :)
Related
I am working on a school project and the goal is a rather difficult click jacking. I am using a virtual machine and a host-based domain. Essentially, I have a very vulnerable shopping website and I am trying to overlay iframes on top of some buttons on the site.
My first approach I created an iframe when the user clicked my "eViL" Button to host the vulnerable website in. From here I have tried inserting more iframes based off of the page after it loads (since the buttons are dynamic). I have tried doing this by doing something like this:
iframe.onload = function(){
var innerDoc = iframe.contentWindow.document;
};
However, I soon realized that this just causes an error because of the Same Origin Policy of the Browser.
My second approach that I can think of is possibly sending some script tags through a GET request. However, I am not quite sure how to go about doing it as I am not super familiar with Javascript or HTML. I'm sure it will have to be a little hacky to do it by escaping characters and what not but, is it really possible to do it this way?
My second kind of overall question is was my logic from my first attempt flawed? Or was there another way to go about doing this whole process? Which approach seems to be the correct one here?
So, I'm sure this will get down voted and I'll be banned from the site because I'm a total newb that asks elementary questions/wrong questions/vague questions that irritate the community. But...I'm not sure where else to turn, this seems to be one of the best communities.
I use a live chat service. And they have this cut/paste bit of markup that you drop into your page and it'll display a jpeg indicating whether or not the chat service is open.
https://rci.ehosts.net/netagent/client/invites/chatimage.aspx?style=style0&questid=44D115D4-5242-476F-AE56-6AEECE8E9343&portid=28586436-7974-4E4B-BBDE-73E63BC3EAED&imagelanguage=en-us&customopenimage=https%3A//rci.ehosts.net/netagent/custfiles/en_chat_open.gif&customcloseimage=https%3A//rci.ehosts.net/netagent/custfiles/en_chat_closed.gif
If you drop that into a browser, it doesn't seem like anything happens. But if you set that as the src attribute of a image tag in a html page, it displays the appropriate image (chat online/chat unavailable).
My question is...can I determine the outcome of that script without dropping it into the page? Via either javascript or php? What'd like to do is make a script of my own that will determine which image is returned and do things other than just displaying the chat online/chat unavailable images.
Thanks!
EDIT: oh, the above url will redirect to the correct image if you change all the & to just &
I ended up following the redirect to see which image it takes me to. It was the only way I could think of. Ended up basically copying example #2, except that I returned the headers location, from the following link:
php manual
Just as the question states, I have an iframe that is on a cross domain parent. I need to trigger an event if that content is scrolled into view or already in view on page load. Normal checks for distance from top/side of page and viewport height/width don't seem to work as they measure the page within the iframe itself.
I cannot edit/add anything on the parent page to enable this functionality, everything must be within the iframe itself.
The reason behind this is to record whether content has ever had the chance to be viewed by the user or if it was loaded out of view and kept there.
There are companies who provide this service for advertising, but as far as finding out how it is actually done, well it seems to be one of the dark arts.
Any help would be greatly appreciated.
EDIT: Two examples of the companies I spoke of who offer this service.
View the first tick under (4)
http://www.doubleverify.com/what-is-verification/
First thing they state they can do on the right hand side http://adxpose.com/home.page
spider.io does this probably using browser timing attacks. there is a video on their page:
http://www.spider.io/viewability/
here is a nice report on how some browser timing attacks work: http://www.contextis.com/documents/2/Browser_Timing_Attacks.pdf
Simple answer is, you can't.
You have no way to access a cross-domain iframe (DOM or window object) with ECMAscript because of the Same Origin Policy.
Are you sure those examples are exclusively iframe based? Maybe they need to add some javascript to the parent Window.
If you really need this, and 100% accuracy is not needed, I would try some time based techniques on the assumption that most browser will optimize graphical work happening out of view.
Being realistic I don't think it would be possible to get good results with that techniques in a reasonable time or expecting a general robust cross-browser solution. It would be quite fun though.
doubleverify and adxpose use "offline" techniques to determine if the ad was visible or not, it doesn't happen on the page view. If they did it through Javascript, all you would have to do is look at one of their pixels to see how it works.
I know that this question was asked earlier but the OP didn't get any suitable answer.
So the question is:
How to access page context to call some js function in FF overlay (toolbar in my case).
I have <toolbarbutton> element with onclick="nextTrack()". nextTrack declared in the included JS file. Function executes when I press toolbar button, but I cannot exec function that I'm sure exists on the page.
I cannot modify the page, because it is an external site, but I really want to make my extension.
Of course I can (and I am) use something like mainDocument.getElementById("player_play").click(), but page already has an audioPlayer object that has all ability I need: play, pause, next, prev etc.
For more cleanliness I make an extension to control an audio player for vkontakte social network (well known social network in exUSSR countries). So you can look at example page here, maybe it can be helpfull: http://vk.com/wall6843477_2327.
When you start listening the bar with controls must appear you can find lot of stuff like audioPlayer.nextTrack(); audioPlayer.prevTrack(); etc.
You aren't accessing content directly, you are rather going through XPCNativeWrapper. This means that all JavaScript properties defined by the content page are invisible (which is a security feature). In your case, the simplest secure solution is to use the javascript: protocol:
mainDocument.defaultView.location.href = "javascript:void audioPlayer.play()";
This way you won't be able to get a result back but from it seems that you don't need to.
(excuse me if this is not the right forum to post - i couldn't find anything related to non-native programming and related to this topic)
I Am trying to set a dynamic HTML into an iFrame on the webpage. I have tried a couple of things but none of them seem to work. I m able to read the innerHTML but can't seem to update it.
// Able to read using
document.getElementById('iFrameIdentifier').innerHTML;
// On Desktop IE, this code works
document.getElementById('iFrameId').contentWindow.document.open();
document.getElementById('iFrameId').contentWindow.document.write(dynamicHTML);
document.getElementById('iFrameId').contentWindow.document.close();
Ideally the same function should work as how it works for div's but it says 'Object doesn't support this method or property".
I have also tried document.getElementById('iFrameId').document.body.innerHTML.
This apparently replaces the whole HTML of the page and not just the innerHTML.
I have tried out a couple of things and they didn't work
document.getElementById('iFrameId').body.innerHTML
document.frames[0].document.body.innerHTML
My purpose is to have a container element which can contain dynamic HTML that's set to it.
I've been using it well till now when I observed that the setting innerHTML on a div is taking increasing amount of time because of the onClicks or other JS methods that are attached to the anchors and images in the dynamic HTML. Appears the JS methods or the HTML is some how not getting cleaned up properly (memory leak?)
Also being discussed - http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26185526.html#a32779090
I have tried a couple of things but none of them seem to work.
Welcome to IEMobile! Nothing you know about DOM scripting applies here.
Unfortunately, cross-iframe scripting does not appear to be possible in IEMobile6-7.
frameelement.contentDocument (the standard DOM method) isn't available
frameelement.contentWindow.document (the IE6-7 workaround version) isn't available
the old-school Netscape window.frames array only works for frames, not iframes
having the child document pass up its document object to the window.parent only works for frames, not iframes. In an iframe, window.parent===window.
So the only ways forward I can see are:
use frames instead of iframes. Nasty. Or,
use document.cookie to communicate between parent and child: the child document is just a script, that checks for a particular cookie in document.cookie on a poller, and when it's found that's a message from the parent, and it can write some HTML or whatever. Slow and nasty. Or,
using the server-side to inject content into the frames, passing it in as an argument to a script. Slow, nasty, and potentially insecure. Or,
avoid frames completely (best, if you can). Or,
drop support from IEMobile6-7 (best for preserving your sanity, if you can get away with it!)
Appears the JS methods or the HTML is some how not getting cleaned up properly (memory leak?)
Yes, probably. IEMobile6-7(*) is close to unusable at dynamic HTML. It gives you a lovely flavour of what scripting used to be like for us poor gits back in the Netscape 4 days.
Try to avoid creating and destroying lots of nodes and event handlers. Keep the page as static as possible, re-using element nodes where possible and setting text node data properties in preference to tearing everything down and making anew with createElement or innerHTML. Use an event stub (onclick="return this._onclick()") in the HTML together with writing to _onclick if you need to set event handlers from JavaScript, in preference to recreating the HTML with a new event handler (or just trying to set the property, which of course doesn't work in IEMobile). Avoid long-running single pages when you can.
It'll still crash, but hopefully it'll take longer.
*: that is, the versions of IE present on WinMo before version 6.1.4, where it became the infinitely better IEMobile8, marketed as “Internet Explorer Mobile 6” (thank you Microsoft).
Okay, I kinda resolved the issues that i was facing earlier and the bigger issue which was setting HTML to an iFrame on IEMobile. But i still have one more PIA which is related to double scollbars - which i am currently looking into. There seems to be more poor souls facing similar problem - if i fix that too. I will post an update here.
How did i finally write to iFrame on IEMobile?
Have 2 divs one to wrap the iFrame and the other to write inside an iFrame.
document.getElementById('OuterDiv').innerHTML = '';
document.getElementById('OuterDiv').innerHTML = '<iframe id="iFrameId" src="somefile.html"></iframe>';
This creates an iFrame each time and in the somefile.html on load there is a InnerDiv.innerHTML which doesn't seem to leak the memory.
In the somefile.html there will be an onLoad method which will fetch the HTML (explained below on how i managed to get it) and do a
document.getElementById('InnerDiv').innerHTML = dynamicHTML;
How did I manage to pass the HTML between parent and child iFrame
As well explained by #bobince earlier, one has to rely on 3rd party service like a cookie or a server to pass around the data between parent and the child iFrame.
I infact used an ActiveXControl to set and get data from the parent and child iFrame's javascript respectively. I won't recommend doing this if you have to introduce an ActiveX Control just for this. I accidentally already have one which I use to get the Dynamic HTML in the first place.
If you need any help you can DM me - Twitter #Swaroop
Thanks #bobince for your help. I am marking this one as an answer because it says what i did to fix the issue.