Imagine an elderly grandmother – we’ll call her Grandma Moz. She’s about to make her very first online purchase.  She’s used a computer before, but feels some anxiety giving out her personal information over the Internet. Then, just when she’s about ready to enter her credit card number, the following message pops up:

What does Grandma Moz do?  If she is like 30% of most internet users, she runs and hides her credit card back into her wallet never to be seen again.  And the unsuspecting website loses the sale.

The 30% is not a statistic based on a large data set, but rather the experience of an actual client website I work with that recently installed HTTPS on its checkout pages. Instead of seeing an increase in conversions, as would be expected, sales actually dropped after installing HTTPS.  A brief investigation showed the culprit to be error messages coming from a single browser – Internet Explorer 8.  FIxing the problem became an adventure.

What is an HTTPS Error?

HTTPS is a secure way for browsers to communicate directly with servers using encryption.  Without going into the technical details (which I am not an expert on) HTTPS  causes your browser’s address bar to turn green or blue on sites like PayPal and SEOmoz’s checkout pages.  In Microsoft’s IE8, the overly scary security warning pops up if it detects any HTTPS errors – meaning that some part of the page has been called from a non-secure source.

That's a Secure Connection!

It is important to note that the IE8 security warning DOES NOT necessarily mean the page is dangerous.  It only means the browser detected an error, usually a very small one.  Although the error may be innocent, the security warning can scare away a good portion of your business, so it is important to root the problem out.

How to Fix HTTPS Errors

1.  Determine if You Have a Problem

The easiest way to see if your site has any HTTPS errors is to fire up IE8 (make sure it’s updated if you haven’t used IE in awhile.)  Then navigate to your HTTPS pages - as if you were making a purchase or completing a transaction - and see if you get the security warning.  Make sure to check every single page protected by HTTPS, as each page can call different resources.

You can also look for the green bar in any browser’s address window.  The green often will not display if there are HTTPS problems, but each browser behaves differently so this method is not reliable.

2.  Get the Tools

A great resource for sniffing out errors is HttpWatch.  Simtec offers a basic edition available as a free download.  This powerful tool allows you to “record” all Http requests for any given webpage.  With this, you can identify any part of a webpage that isn’t HTTPS compliant.

Once you get the hang of HttpWatch, you will begin to understand how HTTPS errors happen.

The easiest way to wrap your head around this is to visualize a webpage as consisting of many different elements – text, images, JavaScript and even parts of other websites.  Each of these individual elements can be “requested” from a different resource – hopefully your secure server.  Errors occur when the requested path does not come from a secure source, but rather one that starts with plain old http (without the ‘s’)  With HttpWatch, you’ll spot 80% of these errors with ease.

3.  Check Your Images

By far the most common of all HTTPS errors are images.  The correct way to use images on any HTTPS page is to use relative path in you website code as opposed to absolute image paths.  

See the http without the ‘s’?  That’s what causing the HTTPS error.

HttpWatch will identify most image errors.  You can also view your page’s source code and perform a search for “http://”.   Change any images written with absolute paths to relative paths and you will be okay.

4.  Look at your Tracking Codes and Javascript

SEOmoz’s favorite Englishman Tom Critchlow recently wrote an excellent post for the Google Analytics Blog detailing HTTPS errors hiding in legacy analytics code.  Aside from scoring a guest post on the ultimate high-authority domain, Will expertly explains how webmasters who haven’t updated their tracking code in awhile may unintentionally trigger the IE8 security warning.  Read Tom’s post for a full explanation.

Beyond Google Analytics, it’s important to check all the tracking codes and javascript contained on your webpage.  For example, say you have CrazyEgg installed on your website to generate user heatmaps.  CrazyEgg uses one type of tracking code for regular Http, and another type for Https.  To check this and all JavaScript on your page, view your source code and look for any markup that includes a request starting with Http, instead of HTTPS.

5.  Digging Deeper – Hidden Errors

The most frustrating errors are the ones you cannot find, the ones that do not show up on HttpWatch and defy all logic.  You comb every line of code by hand and still can’t find anything out of sorts.  In these cases, the error is often hidden.

By hidden, I mean located in an external CSS or JavaScript file.  These are frustrating errors because they don’t show up in your page’s source code.  For example, you have a background images coded into your CSS that only appears when a user hovers over a drop-down menu.  The CSS file is external, meaning it’s attached to the webpage like this –

But instead of writing the background image using a correct relative URL, the developer used an absolute URL…

This type of error is hard to spot because the CSS or JavaScript in question may not appear on your webpage.  If you can’t find your HTTPS error, it’s best to search through all your external CSS and JavaScript files and look for anything there that starts with http.

Conclusion

This is not an exhaustive list of HTTPS errors, but it covers 95% of common problems to get you started.

After we fixed the error on my client's site, conversions from IE8 rose 30%.  As a result, the client recovered tens of thousands of dollars a year in sales.  If you have other solutions to this problem, I’d love to hear them in the comments.