0

I have the following iframe code that is transmitted to a page via AJAX:

<iframe sandbox="allow-forms allow-scripts" id="iframe-content" src="http://www.example.com" scrolling="yes" style="padding-top:40px;border:0;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-color:#74A82A;"></iframe>

It is then written to the page like this:

$("#bottom").html(data);

I've inspected the page and it is loading the new code successfully into the div.

But for some reason it isn't loading the page? The Iframe just displays the green background color.

How can I get this iframe to load the page?

Ideally I'd like to transmit all the iframe code because there are different versions of iframes that I need to create for different scenarios.

Amy Neville
  • 10,067
  • 13
  • 58
  • 94
  • http://jsbin.com/kateyuf/1/edit?html,js,output — works fine, I can't reproduce the problem, see http://sscce.org/ – Quentin Feb 28 '16 at 09:49
  • "The page at 'https://www.examplemysite.com' was loaded over HTTPS, but requested an insecure resource 'http//www.example.com'. This request has been blocked; the content must be served over HTTPS. – Amy Neville Feb 28 '16 at 09:51
  • Seems because I am on https that I can't load http? – Amy Neville Feb 28 '16 at 09:51
  • I tried putting my page on http and it now says this No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.examplemysite.com' is therefore not allowed access. – Amy Neville Feb 28 '16 at 09:54
  • @AmyNeville — There is no way that that should generate *that* error. There's no attempt in the code to access a different origin from JS (just add an iframe pointing to one). – Quentin Feb 28 '16 at 10:07

2 Answers2

1

From your comment ('Access-Control-Allow-Origin' header is present on the requested resource. Origin 'examplemysite.com'; is therefore not allowed access.), your issue is related to CORS: basically, you cannot access a domain via Ajax if it's not allowed on the server side. This is a "security" feature on most modern browsers. You won't encounter this problem using command line such as curl or chrome's Postman extention.

If you own the domain http://www.examplemysite.com/, make sure the domain requesting the data is allowed in the Access-Control-Allow-Origin header, as well as the http verb (GET, POST, PUT... or * for every http methods).

Basically, it comes down to add the two following headers to the http://www.examplemysite.com/ server's response:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *

EDIT: From Quentin's comments, it looks like your issue is related to Same Origin Policy.

cl3m
  • 2,791
  • 19
  • 21
  • No. The Same Origin Policy (which CORS can relax) prevents you from reading data from different origins into JS. It has no effect on the ability to display content in iframes (or load images or link to other sites). – Quentin Feb 28 '16 at 10:08
  • So says his error messages... If it's not CORS, then it's `SAME ORIGIN POLICY`, which is kinda the same thing: he can't access another domain from his.... – cl3m Feb 28 '16 at 10:10
  • That is not what the error messages say. … oh great, the comments seem to have moved on to a different problem. – Quentin Feb 28 '16 at 10:11
  • From the OP comment: `'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'examplemysite.com'; is therefore not allowed access.`. Seems like CORS to me, but maybe you're right. – cl3m Feb 28 '16 at 10:14
1

"The page at 'examplemysite.com'; was loaded over HTTPS, but requested an insecure resource 'http//www.example.com'. This request has been blocked; the content must be served over HTTPS.

Seems because I am on https that I can't load http?

Correct.

Browsers are taking increasingly strict measures against mixing secure and insecure content.

It used to be that they would flash up a warning about mixing secure and insecure content to warn users that the page might not be as secure as it seems.

These days they tend to just reject the insecure content entirely (presumably on the basis that too many users were confused by anything more complicated than "This is / is not secure").

If you want to display the content from the other domain then you will either need to request it over HTTPS (obviously this is only possible if they supply it securely) or host your page on plain HTTP.

I tried putting my page on http and it now says this No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'examplemysite.com'; is therefore not allowed access.

That's a different problem from some other code which you haven't included in the question. Presumably it is in the page you are embedding in the iframe.

Dealing with Access Control Allow Origin issues is well documented in many different questions on Stackoverflow.

Community
  • 1
  • 1
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • I think I am going to just load these iframes using a traditional reloading of the page rather than AJAX. Black hat people ruin the party for everyone. – Amy Neville Feb 28 '16 at 10:16