Why you should not mix http and https when using iframes

In the administration of advanced iframe I have written the following note:

"Please do not use a different protocol for the iframe: Do not mix http and https if possible!".

What does this mean?

  1. If the protocol of your page is http than use a http page inside the iframe.
  2. If the protocol of your page is https than use a https page inside the iframe.

But why should you not do this?

1. https with http iframe

Lets start with the one you should not do:  Your page is https and your iframe page is http. This scenario is called "Mixed Active Content" and is blocked by more and more browsers.

I have found a nice description from the developer from Firefox about this topic:

There you e.g find the following: Firefox and Internet Explorer consider frames Mixed Active Content, while Chrome considers frames Mixed Passive Content. This means that Firefox and Internet Explorer block iframes while Chrome does not (yet).

2. http with https iframe

The other way is including an iframe with a https page into a http page.

This is the way you can do but is not recommended (see below why)!  If you really have no other way please try if it is working on all major browsers. I already had users with side effects when it comes to cookies or session handling!

The next section is from http://stackoverflow.com/questions/3144986/http-https-iframe:

It is generally bad practice to embed an iframe with content served over HTTPS within a page served over plain HTTP (or mix content). The reason for this is that there's no good way for the user to check they're using the HTTPS site they intend (unless the user really wants to check the source of the page).

An attacker could very well replace the content you serve like this:

<iframe src="https://your.legitimate.example/loginframe" width="300" height="150">


<pre><iframe src="https://rogue.site.example/badloginframe"></iframe>

or even:

<iframe src="http://rogue.site.example/badloginframe"></iframe>

This is very hard to detect for the user, and defeats the security measure you're trying to put in place by enabling login via HTTPS.

So I hope you now don't mix content anymore ;).

IF YOU STILL REALLY WANT TO DO THIS: The external workaround is by default NOT working in this setup as the Javascript is than loaded from an http domain which is blocked! So to get this working you need to

  1. Enable "Use post message for communication" on the "External workaround" tab.
  2. Copy the generated ai_external.js to a https domain and include it from there! Remember to copy the ai_external.js each time you change something with the "save" icon in the administration.

See a working example here: http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-with-post-message#e53

Have fun using advanced iframe (pro),