IE6&7 causes of “This page contains both secure and nonsecure items”

Question

I have an HTTPS site that in IE6 & 7 displays (in error) a dialog that reads:

This page contains both secure and nonsecure items

Do you want to display the nonsecure items?

This doesn't happen in any proper browsers, but the site is corporate and lots of customers are still on Windows 2000 and IE6.

I am familiar with (and have eliminated) the following possible causes of this message:

1. One or more of the resources loaded with the page have http:// instead of https:// - this is the only legitimate reason to display the error, and would cause the same message in working browsers too. Fiddler can identify the resources loaded nonsecure, so this is easy to fix.

2. IE behaviour .htc files are loaded to provide DHTML features - these often are treated as unencrypted even if delivered across from an https:// URL, which made them pretty useless even back when IE6 was new. It's not a good idea to use these in the first place.

3. IE treats empty frames as nonsecure resources, so <iframe src="" or <iframe src="about:blank" both cause this error. This is easy to find and fix in the code.

4. IE5 used to send AJAX requests as nonsecure when using the ActiveX XMLHTTP component. I don't think this is an issue in IE6 and above.

5. Data-URIs are not supported by IE 6 or 7, and won't be displayed, but if any are included in the CSS that results in a nonsecure warning too. We have different CSS for IE that doesn't use them.

6. Javascript protocol links in the source for script tags report as nonsecure: <script type="text/javascript" src="javascript:void(0)"> Easily avoided by clearing the src attribute (thanks Eric!)

7. No external libraries are loaded, with the page or dynamically, and no CDN is used. We do use some third party plug ins, but they're delivered securely and don't dynamically load any further content.

There's lots on here about this IE bug, but all I've found so far point to one of the issues above that I've already eliminated.

Are there any other bugs in IE6 & 7 that could be the cause of this error?

Is there any way to identify which resource IE thinks is the nonsecure one?

Answer 1

I've found the source of the problem, but it took some digging.

Firstly Eric Law has come up with a prototype tool (exe) in another answer that helped identify the problem.

The nonsecure resource is:

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

The problem is that IE6 doesn't support data URIs, so we don't use them. So where has this come from?

It turns out that jQuery UI 1.8 is the problem, specifically a fix for another bug in the CSS:

.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;
    /* http://bugs.jqueryui.com/ticket/7233
     - Resizable: resizable handles fail to work in IE if transparent and content overlaps
    */
    background-image:url(data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=);
}

It looks like others have also spotted this issue, and it's been fixed in the latest jQuery UI CSS (1.9 or above).

My fix was to replace that with a regular URL for a blank gif, problem solved.