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.

Improve this question
5
  • jsbin.com/kateyuf/1/edit?html,js,output — works fine, I can't reproduce the problem, see sscce.org Commented Feb 28, 2016 at 9:49
  • "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. Commented Feb 28, 2016 at 9:51
  • Seems because I am on https that I can't load http? Commented Feb 28, 2016 at 9: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 'examplemysite.com' is therefore not allowed access. Commented Feb 28, 2016 at 9: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). Commented Feb 28, 2016 at 10:07

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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

Improve this answer

4 Comments

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).
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....
That is not what the error messages say. … oh great, the comments seem to have moved on to a different problem.
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.