I ran into IE’s mixed content security alert feature earlier today when trying to load our application’s secure credit application page. Obviously it’s a bad user experience and it looks bad on us so I set out to fix it and found the following things that hopefully will save someone else some time.

The reason for the warning is that you’re on an SSL-secured (https protocol) page that is attempting to load non-SSL (http protocol) content. It’s ok if you’re on an HTTP page and you request HTTPS; you won’t receive the error.

First of all, you should download a tool for HTTP sniffing. I use Fiddler.

Run Fiddler and then browse to the page that is causing the message. You’ll see a bunch of requests go through, most likely. You can ignore any CONNECT requests; anything else should be showing up as HTTPS.

Most likely, you have a script or CSS file that is requesting HTTP content. If you set them all to HTTPS or leave them as relative paths, you should be ok.

For example:
/css/site.css - OK
https://www.example.com/css/site.css - OK
http://www.example.com/css/site.css - Error

Here’s your checklist of things to do:

  • All loaded assets, such as images, scripts, css, favicons, etc. must be relative paths or be HTTPS.
  • All iframes must point to an actual page (relative or HTTPS). No SRC attribute, or an SRC of # or about:blank will raise the error. Some people have used javascript: false; with success.
  • Make sure all requests from your page are HTTPS. Google Analytics and other 3rd-party tools often have a special link you can use for HTTPS.
  • The codebase attribute of an object (Flash, Applets, etc) must be HTTPS. IE doesn’t actually make a request on this, but it does check the protocol for some reason.
  • Anything that returns an HTTP error will cause the error to pop up, since IE considers its error pages to be “insecure”. Of course, the whole browser’s insecure, but that’s another article.
  • If you have a JavaScript that calls removeChild() on a node that has a background image, it may cause this error. You can set outerHTML = ” instead without consequence. Retarded, but it works.

Things that you don’t have to worry about:

  • DOCTYPES
  • XHTML namespaces
  • Links in the page (anchors, not the link element)

The one that got me was the codebase attribute of an object element. I figured it was just too stupid to be the actual problem. Silly me; IE strikes again.

Hope this saves some folks time.

5 Responses to “IE Mixed Content - Page Contains Both Secure and Nonsecure Items”
  1. Cheers mate - we spent ages trying to track down the remove child issue.

  2. Yeah, I spent almost a day running through our code to find out what was causing it, so I’m glad I was able to help you guys.

  3. thanks a lot - saved me a lot of debugging time, and solved my problem with a simple search-and-replace :)

  4. Thanks a lot. I’ve never used ssl before and this IE message wasn’t acceptable. Your simple to follow instructions quickly solved my problems.

    Egg

  5. Glad you guys found it helpful.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>