Gathering location of an IFRAME - javascript

I am building a script/application (on client side and on proxy site too) that gathers information about elements from various web-sites.
One last thing that makes me troubles is gathering location of an IFRAME. Let me explain this in more details:
Invariant: Location of IFRAME is not changed via user interaction
Some web-pages uses SRC attribute to define location of new IFRAME - either defined via scripting or manually typed in the source - this is ok (no problem)
Other web-pages uses various techniques how to populate IFRAME dynamically and they do not use SRC attribute of IFRAME - this is ok if location of such IFRAME is inside the same domain, otherwise it is unsafe access to other domain
I will include one example of HTML code:
<html>
<body>
Click here to open an iframe.
<br>
<iframe id="test_iframe" name="test_iframe"></iframe>
</body>
</html>
So if I try by JavaScript this below I will get an empty string.
document.getElementById("test_iframe").src
And if I try to use this below I will get a security error.
document.getElementById("test_iframe").conentDocument.location.href
So my question can be reduced to:
Are there any technique to gather location of such IFRAME which content is outside parent domain and that IFRAME is without SRC attribute?
Thank you very much for your answers :-)

This is called iframejailing. Its not possible to read or alter an iframe element in the page if its pointing to a different domain. Its an inbuilt security feature in browsers.
However, there are certain workarounds for this if the domains in questions can work together to create an iframe proxy (google to get more info), which i feel in this case is not applicable.
Respond back if you have more questions.

Related

Bypass Cross-Domain-Policy to access iframe's HTML with server-side solution

Currently we are trying to access the HTML of (with javascript) dynamically generated html-elements (e.g. to get the url of an image). If the html-elements are generated with javascript only - their is no problem. Just extracting the image url with javascript by accessing the DOM elements. But now we have trouble with an iframe.
This is the situation at the moment:
We include external script-file (www.test.com/script.js) to create a gallery on our website
The script.js generates a new iframe in our website (document.write('iframe code here')); referencing to www.test.com/iframe.html)
The iframe.html contains javascript-code again to generate the gallery by creating serveral dom-elements (divs, imgs, a, p,....)
Now we need to read the src-attribute of these images. With the debugging tool of the browser, it is no problem. Without the iframe, it's also no problem. But with the iframe, because of the cross domain policy of the browsers we can not access the html of the iframe.html with javascript.
One possible solution was to try to get the src of the iframe tag with javascript, call a server-side script to get the html content of the src-url and run the content via eval()-function on the client again.
I hope you have other better ways to solve that.
It is not clear from your question, but if the iframe is being served by your app, you can use postMessage in order to communicate between the iframe and its parent window.

Get content of an iframe after it loads with

I want to achieve the fallowing goal.I want by the click of a button to get the domain name entered in one input and load it into an iframe. What i have trouble with is after i load the specific site in the iframe how can i get the DOM of the loaded site in the iframe ? I need to save the exact path of an element of my choosing from the newly loaded site in the iframe by clicking on it. Any help would be much appreciated. Thank you.
You can access the <iframe>'s contents via the contentDocument property.
var iFrameContent = $('myIFrame')[0].contentDocument;
$(iFrameContent).find('.mySelector').text();
I should also point out accessing the <iframe>'s contents can only be done if the src of the <iframe> is from the same domain as your script. If the src of the <iframe> is from any other domain, the browser will deny access to the <iframe>contents.
This is a CORS consideration.
UPDATE:
To get around the CORS limitation, you'll have to write a server-side proxy for the URL that is the src of the <iframe> (and it could be pretty simple).
If I were to do something like this in ASP.Net (as an example), I would write a web service that:
takes the actual URL as a String parameter.
Uses the HTTPWebRequest object (or similar) to get the URL contents.
Return it back to the browser.
Then you could set your <iframe> src to "http://mysite.com/getURLService?url=www.lalala.com" and get the contents because the contents are now delivered by "http://mysite.com".
You use .contents()
like $("iframe").contents().find(); etc

Find Child in iFrame?

I am trying to achieve this:
I am working on a script that checks a Page for iFrames(done), but than it tries to find the VIDEO Tag of HTML5 in it, store its source, than remove the iframe and replace it by a new VIDEO Tag created with the previously retrieved source, the script shall grab the Element from cross domain Sites like YouTube e.g.
So currently I was able to find all iFrames via getElementB
and btw: JavaScript ONLY
It is impossible to do it cross domain because JavaScript has the same origin policy that prevents accessing the content from different domains.
As mentioned within another answer, this is not possible to do in a cross domain setup.
If this is not an issue, you can access the document of the iframe using the following:
var iframeElmnt = documentGetElementsByTagName('iframe')[0];
var iframeDocument = iframeElmnt.contentWindow.document;
var videoElmnts = iframeDocument.documentGetElementsByTagName('video');
You can then hunt through the videoElmnts to figure out which one you should insert into the current page.

Retrieve the src of an iframe embedded within another iframe

I have a page which contains an iFrame into which I display the content of another page, which contains an iFrame; I don't control this page. I would like to get the src attr of the embedded iFrame and display that content within my iFrame. Is this possible with either jquery or javascript?
Just to be clear, here is what I have:
iframe src="somepage.html" id="mypage"
somepage.html looks like this:
iframe src="content.html"
I want to extract content.html from somepage.html and display it within "mypage" before displaying the frame. Is this possible?
If you do not control the other page, and it is not on the same domain as you, browser security restrictions will not let you read the contents of the first iframe on the client (see eg. https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript ). This will make it impossible to read the contents of the second iframe. The only exception is that you may be able to talk from the innermost iframe to the topmost iframe by using window.top, assuming that innermost iframe is on the same domain as the topmost one -- essentially bypassing the 'middle' iframe.
Other than that, you could work around it by requesting the 'middle' frame's html contents using a proxy on the server written in a server-side language of your choice (PHP, Java, Python, Ruby, what-have-you), parsing it for the iframe and then feeding this back to your own application. Depending on what exactly you're doing, this may or may not be a viable option...

How to grant permission to function or document element from iframe created through external .js script tag? [duplicate]

This question already has answers here:
Cross domain iframe issue
(5 answers)
Closed 6 years ago.
I am embedding a script via <script src="example.com/file.js"></script> on a domain that does not belong to me. The script outputs a iframe with its src set to a script on my site. I'm also outputting a div tag that contains the iframe (it is not rendered by the iframe but the js file). Now, I want to be able to execute a function that is loaded via the iframe to control the parent div of the iframe OR output the function along with the div tag and execute the function from the iframe. I am getting permission denied errors when attempting to do either. How can I grant permission?
You can't (and then time passes and the answer changes, see the duplicate question).
In short, you can't using the way you posted. The only thing windows (including iframe windows) can do to each other is change the URL / hash. What you can do is:
1) Make an HTML page that checks its hash for commands to run. Put this on SITEA.
2) On your regular SITEA page load SITEB in an iframe.
3) SITEB iframes doesn't have access to it's parent since it's on a seperate domain. However, it can load the page you set in step 1 through an iframe. You can also change the URL on this iframe. This SITEA iframe is allowed to talk and control SITEA parent (through something like window.top).
This may sound confusing but it works and is pretty much the only way to do it cross-browser and in IE6. I've done stuff like this to support ads that expand on the parent site.

Categories

Resources