iframe blocked as insecure content, even though th

Question

I am trying to embed an iframe (containing shellinabox, if that's relevant) onto an HTTPS webpage. The HTML I'm using to embed the iframe is pretty straightforward:

<div class="jumbotron" style="min-height: 400px;">

    <iframe src="https://example.com/shellinabox" style="border:none; min-height: 400px;" width="100%"></iframe>
</div>

However, Chrome blocks the iframe from loading because it is "insecure content," and I have to manually unblock it for it to work. The Chrome console reports an error like this:

Mixed Content: The page at 'https://example.com/mainpage/' was loaded over HTTPS, but requested an insecure resource 'http://example.com/shellinabox/'. This request has been blocked; the content must be served over HTTPS.

I am confused by this because clearly my HTML code is embedding the HTTPS version of example.com/shellinabox. Moreover, when I visit https://example.com/shellinabox directly, the lock icon is green, nothing is blocked, and there are no indications of any SSL problems on that page.

I also tested this in Firefox, IE, and MS edge, and they all have the same behavior (so it's not a Chrome-specific issue). What gives?

Answer 1

your code is loading the page over https but that page is then probably trying to load additional scripts or assets over http. or it may have scripts in the page that are making ajax requests over http. youll have to examine the page and look in the developer console to see exactly what the insecure requests are. it's probably not an issue with how you are creating the iframe element.

Answer 2

This is an old question but I encountered the same issue. My use case is slighty different to yours, but hopefully this helps.

For me, my route on my python flask server ended with the "/" character. In my iframe, I was calling the route without the slash at the end of the src and was seeing the same error. Adding a slash to the src in the iframe did the trick for me.

<iframe src="https://example.com/shellinabox/" style="border:none; min-height: 400px;" width="100%"></iframe>

I'm not exactly sure why the missing slash on the end the src attribute would cause this error. If anyone can explain why, I'll gladly update my answer.