iframe blocked as insecure content, even though the iframe is HTTPS

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

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.