4

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?

tlng05
  • 141
  • 2
  • 6
  • https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content – Tom Jan 27 '16 at 16:13

2 Answers2

8

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.

spencer
  • 388
  • 5
  • 13
  • Thanks, had the same problem in a IIS/ASP.NET app. After inspecting the headers, I saw that there is a https -> http redirect in the redirect chain (the redirect that appends the "/" for requests on folders). – Guillaume86 Mar 09 '18 at 10:38
  • I had exactly the same problem embedding plotly dash app into flask page via iframe (dash app was piggybacking off of Flask as a module). Dash apps must be served at the address ending with "/". Without it at the end of the url nothing will be served and the browser will think it is http and not https. When I added "/" at the end of the src url in iframe it all worked. – wikiselev Jul 29 '22 at 10:28
2

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.

Dave L.
  • 9,595
  • 7
  • 43
  • 69
  • If I open the developer console on the page being embedded, the only error that shows up is `Refused to set unsafe header "Content-Length"`. – tlng05 Jan 27 '16 at 16:30
  • @tlng05 - Did you try opening the dev console after browsing directly to https://example.com/shellinabox ? Then in the network section you should be able to see all resources (secure or insecure) it tries to load. – Dave L. Jan 27 '16 at 20:40