How to get iframe's URL in javascript? - javascript

Getting directly the current iframe's URL, in javascript, is not possible due to security restriction.
Is there a way to override this restriction?
Using ActiveX control?
Changing the browser's security options?
Using HTML5?
Using flash?
Using server side scripting?

Getting directly the current iframe's URL, in javascript, is not possible due to security restriction
If you mean cross-domain IFrames, and you have no way of controlling the inlying page, then this is correct.
As far as I know, no, there is no way to get around this.
The only way I can think of - and you don't want to go down that road - is proxying every page inside the iframe through a local server script, rewriting every link and action within each page to go through the proxy, too. But that is hugely difficult, comes with a shitload of things to be aware of, and is not a real option - many modern sites will simply break if proxied that way.

As I understand it if you have no control of the frame you are not supposed to know what is going on in this frame. So, knowing it would be a security bug and should be fixed. Browsers are designed to not allow the page spy on what you are doing in another page.
If you have control over iFrame there are some options for you
There is a discussion here:
How do I get the current location of an iframe?
basically
var iframe = document.getElementById('loader').src
You can actually get the location if iframe is located at the same server. If it is located at a different server the only way to go is to rewrite URLs like some sites do. It is not easy to do though
You can also do HTML5 cross-window communication:
http://ajaxian.com/archives/cross-window-messaging-with-html-5-postmessage

Related

Cross Origin XMLHttpRequest iFrame "Mini Browser"

Is it possible to get around the security and mimick either a full-browser or mobile browser within a webpage?
I had an idea to set the HTML manually, using an AJAX/XMLHttpRequest ("Get" request)
document.querySelector('#myiframe').contentWindow.document.write("<html><body>Hello
world</body></html>");
(from How to set HTML content into an iframe)
Can anyone verify this is possible? I'm guessing you would lose relevant site date (cookies, cache, etc)
Is it possible to get around the security
Yes, many browsers let you start them in a security-off mode, e.g. on chrome you run the program with the --disable-web-security flag. However, you should never ask a client to do this.
An alternative way would be to write a Java applet, or some other third-party plugin, which fetches the resources you want and then passes it over to the browser with your favourite method, from which you can use JavaScript on the data as desired. This method would lose things like cookies, and might be exploitable so I wouldn't recommend it.
mimick either a full-browser or mobile browser within a webpage?
Finally, if you don't mind the "URL bar" displaying the wrong thing when a user navigates, you could just use the default behaviour. This method is totally acceptable and doesn't circumvent any security.

Same Origin Policy and Facebook

Now I know there are a lot of resources about same origin policy, but I just want a straight up answer for my specific query as I am really struggling to understand.
I am using Facebook plugins on my website, these create iframes that are only visible in the DOM when I use chromes inspect element etc.
Is there a way that I can access these iFrames properties/attributes at all, or is it a resounding "NO CHANCE!". I am spending far too much time on this and I just need to get a final verdict.
Thanks!
Javascript doesn't see the iframe content. Chrome inspector just loads 2 different websites in the same time, yours and the plugins one, so you can play with both of them.
Just curious, how would you like to change it?
In general, JavaScript cannot access iframe content from outside of the iframe, unless the page domain and the iframe domain share the same protocol and host and port. In your case, this could possibly be done using a proxy server to load the iframe content from your domain.
http://en.wikipedia.org/wiki/Same_origin_policy

URL tracking functionality

I want my webpage to have two parts. The top part has a textbox. When the user types a URL into the textbox, the bottom part browses to the content of that URL. When the user clicks a link within the bottom part, the bottom part navigates to the new URL, and the textbox in the top part changes to the new URL. How can I do it?
NOTE: This behavior is the same as in Google Translate (e.g. here), but without any translation.
first problem..
Same origin issue
The only way to achieve what you are asking is exactly the way google translate does what it does - which is to use a server-side powered script as a proxy request:
http://translate.google.com/translate_un?depth=1&hl=en&ie=UTF8&prev=_t&rurl=translate.google.com&sl=auto&tl=en&twu=1&u=http://de.wikipedia.org/wiki/USA&lang=de&usg=ALkJrhgoLkbUGvOPUCHoNZIkVcMQpXhxZg
The above is the URL taken from the iframe that Google translate uses to display the translated page. The main thing to note is that the domain part of the URL is the same as the parent page's URL http://translate.google.com -- if both your frame and your parent window do not share the same domain, then your parent window's JavaScript wont be able to access anything within the iframe. It will be blocked by your browser's in-built security.
Obviously the above wont be a problem if in your project you are only ever going to be navigating your own pages (on the same domain), but considering you are proffering Google Translate as an example I'm assuming not.
What would Google do?
What the above URL does is to ask the server-side to fetch the wikipedia page and return it so that the iframe can display it - but to the iframe this page appears to be hosted on translate.google.com rather than wikipedia. This means that the iframe stays within the same origin as the parent window, and means that JavaScript can be used to edit or modify the page within the iframe.
next problem....
Rewrite the proxied content
Basically what I'm saying is that this can't be achieved with just HTML and client-side JavaScript - you need to have something to help from the server-side i.e. PHP, Python, Ruby, Lisp, Node.. and so on. This script will be responsible for making sure the proxied page appears/renders correctly e.g. you will have to make sure relative links to content/images/css on the original server are not broken (you can use the base tag or physically rewrite relative links). There are also many sites that would see this as an illegal use of their site, as per their site's terms of use and so should be black listed from your service.
final problem..?
Prevent the user from breaking away from your proxy
Once you have your proxy script, you can then use an iframe (please avoid using old framesets), and a bit of JavaScript magic that onload or ondomready of the iframe rewrites all of the links, forms and buttons in the page. This is so that when clicked or submitted, they post to your proxy script rather than the original destination. This rewrite code would also have to send the original destination to your proxy script some how - like u in the Google translate URL. Once you've sorted this, it will mean your iframe will reload with the new destination content, but - all importantly - your iframe will stay on the same domain.
too many problems!
If it were me, personally, I'd rethink your strategy
Overall this is not a simple task, and it isn't 100% fullproof either because there are many things that will cause problems:
Certain sites are designed to break out of frames.
There are ways a user can navigate from a page that can not be easily rewritten i.e. any navigation powered by JavaScript.
Certain pages are designed to break when served up from the wrong host.
Sites that do this kind of 'proxying' of other websites can get into hot water with regards to copyright and usage.
The reason why Google can do it is because they have a lot of time, money and resources... oh and a great deal of what Google translate does is actually handled on the server-side - not in JavaScript.
suggestions
If you are looking for tracking users navigating through your own site:
Use Google Analytics.
Or implement a simple server-side tracking system using cookies.
If you are looking to track users coming to your site and then travelling on to the rest of the world wide web:
Give up, web technologies are designed to prevent things like this.
Or join an online marketing company, they do their best to get around the prevention of things like this.
add a javascript function to your second frame -
<frame id="dataframe" src="frame_a.htm" onload="load()">
let the text box have an id - say "test"
function load()
{
document.getElementById('test').value=document.getElementById('dataframe').src
}

Javascript iFrame Limitations

I know that, for security reasons, javascript can't read the contents of an iframe if it belongs to a different domain. This makes sense, given that the entire page could be an iframe with snooping scripts outside of the frame.
The question is - are there equal limitations in the other direction? Can javascript within an iframe (from a different domain) read and manipulate the dom in its parent window?
Thanks!
You can't.
This would be a security hole. Now that everyone is crazy adding facebook iframes to their sites, imagine if javascript from FB could interact with your page ;)
Anyway, i set up a small example, and got the same origin warning when i tried to get a parent's div from inside the iframe (which was in another domain)
If you want to use this in a two domains that you own (not trying to attack anyone) you can do that using ajax as described Here.

How to gracefully handle iframe breaker?

I understand that there is no way to kill the iframe breaker... However, I was wondering, is there a way to gracefully handling it.
So far, I managed to detect it before exiting, using <body onunload="function();">. I was wondering whether it is possible to prevent it from loading the iframe or force it to open in the new window, etc.
Cheers,
Mickey
In fact, you can actually do what you really want to do, which is bust the iframe buster. The technique lets you use onbeforeunload to switch the page back to yours, but indirectly, since the browsers are too smart to let you set the URL in onbeforeunload. So instead, onbeforeunload sets an indicator variable to mark that the URL has changed, and you periodically poll that variable using a setInterval routine established when your page loads. As long as you're polling fast enough to catch the variable change, you can jump in and change the page's URL yourself. The trick is to change it to a page that returns a 204, a special status which tells the browser to leave the current page alone.
That said, this is a cat-and-mouse game. Check out Jeff Attwood's StackOverflow question on this, where he asks how to bust the above technique. Web pages can bust the buster buster by beating the poll interval; basically, they set the URL to point to a tiny page, and one that has already been cached. As soon as the URL changes to that page, it will load faster than the poll routine can jump in and notice that the indicator variable has changed.
It's not easy to prevent loading the frame in the first place. If you really wanted, you could have your server download the page and parse the Javascript to see if the iframe-busting technique is present. However, short of emulating a browser, you can only rely on basic pattern-matching and it would be easy for a page to bypass that. (e.g. use top["l"+"ocation"] instead of top.location).
A smarter technique would be to track which URLs were redirecting using Ajax requests back to the server. (e.g. if the iframe is still there after it has loaded, send an Ajax request back to your server). You can't 100% guarantee the accuracy of those requests, since they come from the browser, but you can at least use them to build up a manual blacklist.
You also can't force the iframe to break out into another window.
You can use the sandbox attribute introduced in HTML5 to prevent the iframe buster. Just don't include allow-top-navigation in the whitelist:
<iframe sandbox="allow-forms allow-popups allow-pointer-lock allow-same-origin allow-scripts"
src="foo.html"></iframe>
Are you talking about an embedded iframe setting top.location? There's no way to prevent that as far as I know.
If you're worried about the contents of an iframe doing something you don't want, you could consider sanitizing the contents of that frame and hosting it yourself. Obviously this is very tricky, but it's pretty much the only true solution. See Caja for a project that does this. This limits what you can actually host of course (if the code you're hosting uses XHR you're outta luck, for instance).

Categories