how to resolve iframe cross domain issue

Question

I'm making web page that has to show another domain's web page.

For example, in my web html, there are two <div> tags.

Like :

<html>
<head></head>
<body>
   <div>
      <p> hello world </p>
   </div>
   <div>
      <!-- other domain's web page comes here -->
   </div> 
</body>
</html>

To resolve my issue, I should use <iframe>, <embed> or <object> tags, but this causes the cross domain problem. So, I can't use it to show other domain's web page. They doesn't allow me to use it.

So, for example :

<iframe src="http://stackoverflow.com"></iframe>

It doesn't work. My web page can't show stackoverflow.com. Because, stackoverflow denies this.

I have searched lots of things with these issues. But they are just ajax or JSONP. It was not iframe.

Are there solutions to resolve my problem?? Or is it impossible to implement this?

have you considered using screenshots of the pages instead of iframes? — madalinivascu, Nov 29 '16 at 12:46
also, iframes should be killed with fire. it's suboptimal in most cases. — xShirase, Nov 29 '16 at 12:48
@madalin are there javascript plugin or solutions to get web page screen shot and show it immediately to my web page from given URL? — user7159879, Nov 29 '16 at 12:56
@xShirase iframes are not the issue. iframes are the scapegoat. the issue is just really complex. HTTP was insecure in a specific way that prevented a certain use-case of the web and CORS fixes that in a way that happened to make iframes really complicated. iframes are a valuable user interface tool. — olleicua, Dec 28 '18 at 02:18

score 34 · Accepted Answer · edited Aug 16 '21 at 08:57

34

You need control over the domain you want to embed to remove/amend its CORS policy.
If the domain has explicitly blocked Cross-Origin requests, there's nothing you can do about it.

This is used to avoid anyone hijacking any site you want (you could have a full screen Google in an iframe running with your ads on top on bettergoogle.com, things like that).

This page will give you more insights on Cross-Origin

edited Aug 16 '21 at 08:57

vsync

118,978
58
307
400

answered Nov 29 '16 at 12:46

xShirase

11,975
4
53
85

1

Ok, we have control over the domain to be embedded. How to specify CORS policy for it to work? – Marius Jul 28 '20 at 08:00
1

useful to mention: Unless specifically restricted, by default iframe embedding 3rd party sites works. – Marius Jul 28 '20 at 08:38
1

"CORS does not apply when attempting to programmatically access content from a cross-origin iframe. If you want to access content from an iframe on a different domain, you will need to make use of the Web Messaging API" -- https://stackoverflow.com/a/22413275/2603297 – Steven Schkolne Aug 22 '21 at 03:55
The word **"programmatically"** is doing all the heavy lifting in @StevenSchkolne 's quote. This question isn't (necessarily) about that, so it doesn't necessarily apply. – Daniel Kaplan May 17 '23 at 23:26

score 8 · Answer 2 · answered Nov 29 '16 at 12:46

If you have the permission of the owner of the domain in the iframe, you can ask them to add your domain to their cross-origin policies so you can do this.

If you don't have permission to show their content on your site, I'm happy to say that modern browsers do not support such unethical behaviour, and there is no way of doing what you are trying to do.

how to resolve iframe cross domain issue

2 Answers2

Linked