Nonsecure items in IE (Solved!)

Posted by ColinG | Filed under Security, Usability

We recently came across an issue when creating a site with SSL plugged in that in Internet Explorer we were getting the good ol' "This page contains both secure and nonsecure items." popup. It took us a good long while before we finally realised what it was... Fancybox!

As i'm sure you'll agree, the above is certainly very off-putting for someone wanting to use your secure website.

First of all we used Charles to map locally and section by section removed scripts until we no longer got the popup, we soon realised it was the Fancybox JS plugin we were using on the site.

Once we had this piece of knowledge we finally came across this absolute gem of information over at the blog of Matt Wolfe regarding the CSS that comes packaged with Fancybox.

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;
overflow: hidden;
}

Take a look at the background-image reference, Fancybox is basically creating a transparent 1px x 1px image of AAAA with a base64 encoding on the fly, this is what's causing the problem.

This image is used for the buttons in the Fancybox script, so we do need to keep it in there but by simply creating a transparent 1px x 1px image of your own and referencing that one in the CSS instead you should soon realise that you no longer have the security message popping up in IE.

Here's the solution:

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"); Evil little line of code. */
background-image: url(../../img/global/blank-fancybox.gif);
outline: none;
overflow: hidden;
}