Why HTTPS
Serving a website over an encrypted connection (HTTPS) has some advantages:
- Man-in-the-middle attacks become much harder.
- Therefore users trust your website more, which is especially important for e-commerce
- WebSocket connections (wss://) are more likely to succeed, especially for mobile devices
HTTP content on an HTTPS page
When you’re serving your pages via HTTPS there can still be some non-encrypted HTTP-requests happing in the background, like Images, CSS, Ajax etc. Reasons for this can be:
- Assets (CSS, Images) reside on a non-HTTPS CDN
- Embedding of content from other domains not under your control. (E.g. when embedding a Youtube-video, although the player itself can be requested over HTTPS, the actual video file will be delivered over HTTP.)
In these cases of “mixed content” browsers give the user feedback that not all of the content on the current page is being served securely.
Dynamically adding and removing HTTP content on an HTTPS page
Our web applications usually don’t reload the whole page when the user navigates to a different subpage. Rather we use Ajax-requests to inject content dynamically into the existing page, to deliver a smoother user experience.
Therefore I was interested in how different browsers react when loading HTTP content into an already loaded HTTPS page (hint: works in Chrome only).
Browser Feedback on Mixed Content
The following is a brief comparison table of how browsers react when loading HTTP content into an HTTPS page. Most notably IE8 (and 7 I think, but don’t bother) shows a modal warning whenever HTTP content is loaded! On the other hand Google Chrome is the only browser which re-enables the HTTPS-indication when dynamically loaded HTTP content is removed from the page and history.pushState() is called.
In the table click on the small images to see screenshots. To summarize: you can use mixed HTTP/HTTPS content if you don’t care about IE8.
| HTTPS-indication | HTTPS-indication vanishes when loading HTTP-content | |
|---|---|---|
| Chrome 26 | yes  |
becomes orange  (becomes green again when removing HTTP-content) |
| Safari 6 | yes  |
yes  |
| Firefox 20 | yes  |
yes  |
| Opera 12 | yes  |
yes  |
| IE 8 | yes  |
yes  (plus a modal dialog  ) |
| IE 9 | yes  |
yes  |
| IE 10 | yes   |
yes   |
| Android 2.3 | yes  |
no |
| iOS 6.1 | yes  |
yes  |