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.

9 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.

  6. I wish I had read this article sooner, the fact that Iframes not having a src attribute could cause this issue for me is insane. I spent at least 2 days trying to figure out why I was getting this issue when everything on the page was using relative or https already. Thanks so much, you made my day.

  7. how do i turn off the error in the browser. mostly I dont care if there’s nonsecure items on the page as I didnt intend to use SSL anyway

  8. Hi name, in IE7 you can go into Tools->Internet Options, click the Security tab, choose the Internet level, hit “Custom Level”, and look for an option that says “display mixed content”. Change that to enable instead of prompt.

    This of course only disables it on your computer, and I don’t recommend it anyway–it’s a bit of a security risk.

  9. Man, you saved me! Thanks for the valuable info!!!

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>