Unable to access iframe content (same-origin policy)

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

And the iframe is showing a page from the same domain as the site ? — adeneo, Jan 06 '14 at 05:40
@adeneo no, what i'm trying to make is a page which when you run the script, will loop though the entire gallery and download every image, but first i need to be able to loop[ though the entire gallery — Memor-X, Jan 06 '14 at 05:43
Have a look at same origin policy http://javascript.info/tutorial/same-origin-security-policy — Sachin Jain, Jan 06 '14 at 05:44
If it's not from the same domain, you don't have access to the iframe for security reasons, see the above link, and no, there's no way around it. — adeneo, Jan 06 '14 at 05:44

score 6 · Accepted Answer · edited May 23 '17 at 12:21

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

BeautifulSoup for python (Documentation Link)
Jsoup for Java (Documentation Link)

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

score 0 · Answer 2 · answered Jan 06 '14 at 05:48

0

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.

answered Jan 06 '14 at 05:48

Rohan

3,296
2
32
35

Unable to access iframe content (same-origin policy)

2 Answers2

Another solution might be this:

Linked