Get DOM content of cross-domain iframe

Question

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

Yes, you can do this - see http://stackoverflow.com/a/17262334/888177 — Stefan, Jun 23 '13 at 16:46

Máthé Endre-Botond · Accepted Answer · 2018-03-13T15:21:38.913

103

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)

edited Mar 13 '18 at 15:21

answered May 29 '11 at 22:58

Máthé Endre-Botond

4,826
2
29
48

14

if you meant design (flow) flaw, then no, it is not a flaw, this was implemented for security. – Ibu May 29 '11 at 23:08
3

In that case i misunderstood then – Ibu May 29 '11 at 23:32
1

In the end, I didnt need to use an iframe for what I was doing. – D-Nice May 31 '11 at 21:15
good to hear that you could resolve it – Máthé Endre-Botond May 31 '11 at 21:18
2

For reference, cross-domain same-origin-policy means that hostname, port and protocol must all be the same - https://en.wikipedia.org/wiki/Same-origin_policy (eg app1.example.com and app2.example.com are different; example.com and www.example.com are different) – Curtis Yallop Oct 26 '16 at 18:08
3

Note: You can use window.postMessage to communicate between iframe and the main window. – Curtis Yallop Oct 26 '16 at 18:10
1

CORS is not an option here. It does not enable JS to read the DOM of a cross-origin frame. – Quentin Mar 13 '18 at 15:04

score 26 · Answer 2 · edited Aug 25 '21 at 13:51

26

There is a simple way.

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
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.

edited Aug 25 '21 at 13:51

AGuyCalledGerald

7,882
17
73
120

answered Jan 28 '16 at 05:48

Clément Gournay

365
3
9

2

Could you please explain the detail. Thank you very much@@ – bfhaha Mar 24 '16 at 15:50
5

Sorry to be late, I didn't noticed. 1. Create a php page that display the content of the page you want from a GET parameter. content.php `` 2. Then, in your main page, add an iframe that will load this page. `` 3. It will display the wanted page in the iframe. Content.php is from your domain, so you can manipulate the iframe content with JS, without violating cross-origin policy. `var $iframeBody = $("iframe").contents().find("body"); $iframeBody.css("background", blue");` – Clément Gournay Aug 07 '17 at 00:52
If for whatever reason you don't want an iframe you could make an ajax call to your php too – Ric Jul 22 '18 at 05:58
@Bharata: Wrong. If you load the file contents into an iframe, you can access its inner DOM just like normal same-origin iframe. – Maxwell175 Oct 13 '18 at 19:44
11

Note that if you use this method, be very careful since this will allow your server to be used as a de facto proxy. Therefore this should be behind authentication and/or the list of permitted websites should be restricted. – Maxwell175 Oct 13 '18 at 19:56

score 9 · Answer 3 · edited Sep 27 '17 at 18:26

9

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'); ?>

edited Sep 27 '17 at 18:26

MasterOfTheTiger

113
6

answered May 29 '11 at 22:52

Matthew Nessworthy

1,428
10
19

i dont have access to the iframed page and a server-side solution is pretty much out of the question, because i am using cocoahttpserver (the server is running on an iphone) – D-Nice May 29 '11 at 22:56
In that case it's not possible. See http://en.wikipedia.org/wiki/Same_origin_policy for more detailed info. – Matthew Nessworthy May 29 '11 at 23:06
3

You sir are a scholar and a gentleman – Allen S May 15 '14 at 09:22
thanks allot for the idea, this answer and this - http://stackoverflow.com/a/29501376/1521606, helped me create a workaround! cheers – K-G Apr 14 '15 at 08:04
@devmatt, with `file_get_contents($_GET['url'])` you can get page content, but you can not get DOM content! Wrong answer. – Bharata Jul 25 '18 at 13:05

Maksim Luzik · Answer 4 · 2017-04-05T13:35:52.613

7

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

edited Apr 05 '17 at 13:35

answered Aug 28 '15 at 07:25

Maksim Luzik

5,863
4
36
57

How can we read the DOM in iframe with js? It's possible, isn't it? – Thinh Vu Dec 03 '16 at 12:36
1

You read the DOM as you would normally. For example document.getElementsByTagName("BODY")[0]; After that use the window.postMessage to send the DOM object you just read in the iframed window to the window that is hosting the iframe window. – Maksim Luzik Dec 04 '16 at 17:25

score 1 · Answer 5 · edited May 10 '12 at 14:16

1

There's a workaround to achieve it.

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.
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.

edited May 10 '12 at 14:16

Paul D. Waite

96,640
56
199
270

answered May 30 '11 at 04:58

Thuy Nguyen

71
4

1

Do you mean server sends http redirect to foreign location? If so, it doesn't work in at least Firefox 9. I assume other browsers won't be fooled by that either – Anton N Jan 31 '12 at 07:11
1

He means rewriting the request on the server, so the client has no idea that it isn't the right url – not my real name Apr 08 '19 at 02:32

Get DOM content of cross-domain iframe

5 Answers5

Linked

Related