Fancybox SSL Security Warning in IE6 and IE7

Although this is probably a rare and fairly random issue, I thought I'd write a blog to address it because it was so darn hard to track down.
While building a webapp for my company, once we turned SSL on we faced some common gotchas (and some not so common) that most SSL websites face. One such issue was trying to suppress the warning that Internet Explorer gives about accessing secure and insecure data from the same page.
Typically this happens if you have a page secured by SSL (meaning the URL starts with https), and you are accessing resources with paths that include the protocol http: rather than https:. If you make your local resource paths relative rather than absolute, you won't have a problem (for the most part). Most issues arise from an image/css/javascript which is referenced as
http://yourdomain.com/path/to/resource

However, in my case I had no such references yet I was still getting this warning message. I went through all of my code, grepping for http: but found nothing (besides some comments). I then fired up wireshark and monitored all http traffic, and sure enough, there was absolutely NONE occuring when loading the site I was building. Thus, the message was obviously another IE bug (one of billions the software giant has its its infamous software).
So I did what any other respectable developer does, and tried google. Eventually I came across a person claiming that the lightbox implementation they were using had a weird line of CSS which caused the issue. Since I was using Fancybox (a really cool jQuery lightbox implementation), I thought perhaps I have something similar going on. It turns out I had the exact same line of CSS which was causing the warning.

Offending CSS:

a#fancy_left, a#fancy_right {
	position: absolute; 
	bottom: 0px; 
	height: 100%; 
	width: 35%; 
	cursor: pointer;
	z-index: 111; 
	display: none;
	background-image: url(data:image/gif;base64,AAAA);
	outline: none;
}

Particularly, this line:

	background-image: url(data:image/gif;base64,AAAA);

It looks like this css creates an image with a base64 encoding of AAAA which turns out to be just a transparent image. If you remove this line of CSS you won't get the security warning anymore, however your Fancybox's navigation buttons won't work correctly. The correct fix is to replace the offending line of css with the following

background-image: url(/path/to/blank.gif);

Basically, just create a 1px x 1px blank.gif file (transparent, not white), and put it in an image folder on your website. Then put the correct path to that image in the css as described above, and tada, no more warning messages (assuming you don't have other problems). Fancybox should work exactly the same as before as well.

== Update 2009-10-20 ==
Thanks to Tom below I found another issue that only happens with IE6. When the Iframe is created it causes the SSL warning message to occur in IE6 because the iframe has no src attribute. By changing the offending line of code to include a src="javascript:false;" will remove this error.
Thus change this:

$("#fancy_inner").prepend('<iframe class="fancy_bigIframe" scrolling="no" frameborder="0"></iframe>');			

To:

$("#fancy_inner").prepend('<iframe src="javascript:false;" class="fancy_bigIframe" scrolling="no" frameborder="0"></iframe>');			

== Update 2009-11-1 ==
I've found that several other projects around the net have the same problem and I've patched those as well (using the <iframe src="javascript:false;"></iframe> method).
The most recent one being the jquery autocomplete plugin (rcarver fork)

Well spotted! Unfortunately

Well spotted! Unfortunately even three years later our customers work with IE6, can you imagine?

Just for everyone coming from google: The line containing

fancybox-hide-sel-frame (Sorry, comment won't allow HTML)

of fancybox 1.3.4 leads to a mixed ressources warning too, so deal with that one if you have any SSL / IE6 / Fancybox trouble...

javascript:false still displays 'false'; Another fix

We were using fancybox 1.3.4 (current stable release at time of posting) which still suffers from this SSL security warning issue.

The problem with this post's proposed solution of using "javascript:false" in the source is that the text "false" still displays in the fancybox content area.

Even worse, the stable 1.3.4 tries to use 'javascript:void(false)' which unfortunately still causes the error on Line 1093 of jquery.fancybox-1.3.4.js.

To fix this issue, we modified the core library and replaced 'javascript:void(false)' with a hard-coded full HTTPS path to the blank.gif distributed with fancybox.

Here's the diff patch showing where to fix. Note that you need to supply your own path to blank.gif on your own server: https://gist.github.com/1186601

Thanks for the great solution

Thanks for the great solution you have given for the IE6. So many peoples face this kind of problem. I am also one of them. To solve this problem i spent nearby whole day. You solved my problem as well as saved my lot of time. Expect more from you.

Thanks for this useful

Thanks for this useful information :)
Facebook Application Development

IFrame fix suggested by Microsoft KB also fixes this issue

Team
The iframe fix suggested by MS KBase article: http://support.microsoft.com/kb/261188/ also fixes this issue.
Just create /common/dummy.html & add src="/common/dummy.html" to iframe attribute if scr is not specified.

Regards
Venkatramanan

elusive bug

Thanks for the solution! I was definitely *not* expecting to find the offender in CSS!

I never posted a answer on

I never posted a answer on blogs, but I have to say: THANK YOU!

You ROCK!

Matt - thank you so much for sharing this solution. You saved me hours of work, and a long night of headaches. For the record, I was getting the error in Google Chrome too (the CSS fix worked there too). I thank you! Take care. - Scott

Thanks!

Works like a charm and solved everything that was bothering me today.

You saved my day! Thanks.

You saved my day! Thanks.

Many thanks.

Excellent, many thanks for your time on this. The iframe src attribute has been added in fancybox 1.2.5 but the css/image still causes an issue. Thanks again.

THANKS YOU VERY MUCH !

Guys, a very big thanks, this was a terrible problem for us !

Thanks

I just spent all night

I just spent all night chasing this bug, I'd narrowed it down to fancybox and had even commented out this line in the CSS to no avail. Even after replacing the url with a blank gif I was *still* getting it in IE6. After some more testing I've found that fancybox makes an empty iframe to fill content with in IE.
After changing the line

$("#fancy_inner").prepend('<iframe class="fancy_bigIframe" scrolling="no" frameborder="0"></iframe>');
to
$("#fancy_inner").prepend('<iframe class="fancy_bigIframe" scrolling="no" frameborder="0" src="https://www.example.com/js/blank.gif"></iframe>');

in jquery.fancybox-1.2.1.js it looks like it's working as expected. I guess it has to preload with a secure src or it will crap out.
Maybe this will save someone else's hair a bit.

Good Tip

You're right, this was a problem for me as well. I thought my original fixes worked for IE6 but turns out there is a problem with the iframe in IE6 causing the SSL warning.
However, I think I found a more robust solution. I was looking through the source code for Ajax Uploader: http://valums.com/ajax-upload/
And found that you can include a src="javascript:false;"
which will get rid of the pesky ssl error message (thus removing the need to hardcode a URL that may break down the line.)
Good find though!

Thx for the hint, helped a

Thx for the hint, helped a lot!!!!