Get DOM content of cross-domain iframe

JavascriptJqueryHtmlIframe

Javascript Problem Overview


I have an iframe for a cross-domain site. I want to read the DOM of the iframe, which I believed was possible because using the inspector, I can even modify the DOM of an iframe. Every way I attempt to read it, however, I run into the same origin policy. All I want, is the content loaded in my local DOM, from the iframe. I thought it would be as simple as $(document.body).find('iframe').html(), but that's returning the empty string.

I really hope there's a way to do this since the work I've been doing for the last several days has been predicated on this being do-able.

Thanks

Javascript Solutions


Solution 1 - Javascript

You can't. XSS protection. Cross site contents can not be read by javascript. No major browser will allow you that. I'm sorry, but this is a design flaw, you should drop the idea.

EDIT

Note that if you have editing access to the website loaded into the iframe, you can use postMessage (also see the browser compatibility)

Solution 2 - Javascript

There is a simple way.

  1. You create an iframe which has for source something like "http://your-domain.com/index.php?url=http://the-site-you-want-to-get.com/unicorn

  2. Then, you just get this url with $_GET and display the contents with file_get_contents($_GET['url']);

You will obtain an iframe which has a domain same than yours, then you will be able to use the $("iframe").contents().find("body") to manipulate the content.

Solution 3 - Javascript

If you have access to the iframed page you could use something like easyXDM to make function calls in the iframe and return the data.

If you don't have access to the iframed page you will have to use a server side solution. With PHP you could do something quick and dirty like:

    <?php echo file_get_contents('http://url_of_the_iframe/content.php'); ?> 

Solution 4 - Javascript

If you have an access to that domain/iframe that is loaded, then you can use window.postMessage to communicate between iframe and the main window.

Read the DOM with JavaScript in iframe and send it via postMessage to the top window.

More info here: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Solution 5 - Javascript

There's a workaround to achieve it.

  1. First, bind your iframe to a target page with relative url. The browsers will treat the site in iframe the same domain with your website.

  2. In your web server, using a rewrite module to redirect request from the relative url to absolute url. If you use IIS, I recommend you check on IIRF module.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionD-NiceView Question on Stackoverflow
Solution 1 - JavascriptMáthé Endre-BotondView Answer on Stackoverflow
Solution 2 - JavascriptClément GournayView Answer on Stackoverflow
Solution 3 - JavascriptmatthewnessworthyView Answer on Stackoverflow
Solution 4 - JavascriptMaksim LuzikView Answer on Stackoverflow
Solution 5 - JavascriptThuy NguyenView Answer on Stackoverflow