Unable to access iframe content (same-origin policy)

StackOverflow https://stackoverflow.com/questions/20943686

Question

I have the following page

<!DOCTYPE html> 
<html>
<script type="text/javascript">
    function loopLink(i) 
    {
        window.open($('#iframe_a').contents().find('.image-navigator-mid a').attr('href'),'iframe_a');
        setTimeout(function()
        {
            if (i < 3) loopLink(i+1);
        }, 5000);
    }
    // Wait for the page to load first
    window.onload = function() {

      var a = document.getElementById("mylink");

      a.onclick = function() {
        loopLink(0);
        return false;
      }
    }
</script>
<iframe src="http://nanofate.us/content/fate-new-hair-style#node-inner" width="500" height="500" name="iframe_a" id="iframe_a"></iframe>
<br />
<a id="mylink" href="">Execute</a>

the idea is that in it's current form, when you click Execute, the javascript will cause the iframe to use the "previous" link 4 times, waiting 5 second each time, however when i click the link it just reloads the page and even after waiting 10 seconds the iframe is doing nothing

i am wondering what i have done wrong

Was it helpful?

Solution

Due to Same Origin Policy restrictions, you can not access contents of iframe if it is running a page from another domain. There are solutions to same domain policy like

  • Opening a page via a proxy

Check out Tomodo. It is just to give you a hint how they used proxy to bypass same origin policy constraint and access iframe content. So the implementation idea goes like this

  • Create a proxy and host it at a.com/proxy
  • Host your main page at a.com/index.html
  • Now, request your proxy to give you content of iframe_url something like this a.com/proxy?url=iframe_url.com

Please note this is not a trivial task and you may have to handle a lot of cases at your proxy like handling relative URLs, cookie reading by iframe_url etc etc. So go for it only if you need it desperately.

Another solution might be this:

If you want to download some images for a particular domain, just ask your server side code to it for you. Your backend code will fetch the html of page and use some HTML parser like

to parse img tags and extract the source and fetch the images and download them.

PS: Just for some good information, please read Ways to circumvent same origin policy

OTHER TIPS

I think what you are doing is subject to the same origin policy. This should be the reason why you are getting permission denied type errors.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top