I’ve mentioned before that I frequently post on the Volusion forums, both seeking and giving advice on topics ranging from coding, SQL queries, marketing, bug reports and fixes, and the software itself. One of the most common issues experienced by store owners is the variety of security alerts, pop-ups, and icons resulting from loading non-secure content on a secure page. These alerts and messages will quickly drive ready-to-buy customers away from your site. Here are some steps you can take to ensure that your visitors don’t bounce due to secure content and page mismatching.
First, let’s establish a basic understanding of some of the terms and situations. Depending on the application and context these definitions can change, but for our purpose – e-commerce sites – the following is good for basics:
Secure Site – For our purposes, a secure site is a site that is encrypted by Secure Sockets Layer (SSL). You can tell you’re on a secure site by looking at the URL / in your address bar itself. If it begins with https:\\ (capitalized from now on), then the data you send to that site is encrypted. This can be displayed differently depending on your browser. Additionally, there are a number of software and browser add-ons that can enhance this functionality with color codings and other visual cues.
SSL certificates cost money, so you’re only likely to encounter them on sites which may require you to transmit personal and / or financial information. Some sites don’t have SSL or a secure “version.”
http://www.lolcats.com/ is a regular site. They do not, however, have an SSL certificate. Try going to https://www.lolcats.com/ and see what happens. You should get a message about the (lack of a) security certificate.
Now take a look at http://www.bankofamerica.com/. This site instantly forces you to the secure HTTPS version with SSL.
Non-Secure Site – A non-secure site simply means that a site isn’t operating with SSL. Data sent to the site isn’t encrypted. “Non-secure site” shouldn’t be taken to mean that the site isn’t “safe” or that it’s dangerous. It all depends on the context. If you’re looking at funny lolcat pictures on HTTP, you’re okay. If you’re transferring funds from one bank account to another on HTTP, that’s a big problem.
Non-Secure Content – This is content loaded from a site with no SSL. I think you get the picture now.
Identifying Secure Content Issues
The most effortless (and ineffective) way to identify non-secure is to pay attention to your browser and the messages it displays. Each browser (and browser version) is different, but most will force a pop-up, error message, or icon display to notify you. Here are some examples of how current versions of Firefox, Internet Explorer, Chrome, and Safari handle secure content warnings.[nggallery id=3]
As you can see, you can’t always rely on your browser to notify you of security issues. In fact, you may have even adjusted your browser settings to prevent seeing notifications. When your browser does notify you of a problem, it won’t tell you what the specific problem is. For that, we have to go directly to the source.
Check Your Source
To identify and isolate instances of non-secure content loading, view your page source and do a simple search.
In the image below, you can see that I’m viewing the source of the HTTPS page. All of my content sources should come from hard-coded HTTPS addresses, or relative URL (more on relative URL later). Content being pulled from hard-coded HTTP addresses will result in errors on this HTTPS page.
A hard-coded HTTP source will look like this:
Of course, that’s an image call. Instead of img, it could be script, iframe, or something else. So, I ignore that prefix in the code and search for the part that would be universal, which is src=”http://
As you can see, my search for src=”http:// returns 7 results. By searching for this bit of code, I’ve found the non-secure content that is hard-coded into the page.
Fixing Secure Content Issues
Now that we’ve found the problems, it’s time to fix them. Let’s do that by looking at some examples from the Volusion store that I screen-shotted above. Here’s one of the lines that needs fixing:
So here’s what happens: a visitor comes to this site ready to buy, adds items to the cart, clicks the checkout button (which switches the site over to HTTPS), and the BBB image loaded from the above non-secure address creates a security error message. The customer freaks out, leaves, and calls you a scammer on one of any number of consumer review sites. Not good.
It’s important to understand what’s happening here. This BBB image is being pulled from the bbb.org web servers. Not only does this create all of these security issues but, it also gives bbb.org the power to change what your site looks like. Suppose they remove the small BBB logo called “seal.jpg” and replace it with a large funny cat photo called “seal.jpg.” Now you’ve got a huge picture of a cat on your site instead of the BBB logo. Believe me, this sort of thing happens all the time.
For content on your own server
The solution is to save the image to your own server. Let’s say we put it in the images directory on our example site. We edit the code in our template to something like this:
But – this is a hard-coded HTTP address. Aren’t we going to have the same security problems if our page is being viewed on HTTPS? Yes – and the solution to that is a relative URL, which looks like this:
A relative URL is an address that is structured relative to your root address. Additionally, it’s relative to the security type (HTTP or HTTPS) that the visitor is utilizing to view your page. By saving the image to your own server and using a relative URL to access it, HTTP and HTTPS no longer matter. It’s this same method of coding that is used to create your store’s template in the first place.
For content on another server
If you aren’t able to save content to your own server and you have to pull it in from another location, exclude the HTTP: or HTTPS: prefixes and use the following:
This will pull the content from the source location using whatever security type the visitor is using. Keep in mind that the 3rd party server must be able to support the security type. E.g., if they don’t have HTTPS, and your visitor is viewing from HTTPS, they’re obviously not going to be able to load <img src=”https://example.com/image.jpg>
Avoiding Future Security Issues
As is the case with most coding and security issues, there’s little substitution for education – unless you want to hire someone. That said, use this post as a guide and go through your store’s template to ensure your relative URLs are set up properly.
Also be aware of third party sites that generate code which you can copy and paste into your template. Often times this code pulls images and scripts from the respective third party site. Some of these sites, like YouTube, have options to include HTTPS in the code so that you don’t create security errors. Here is a list of popular sites which generate code snippets that you may have on your site:
- Facebook – “Like” -related buttons and badges
- Twitter – Feeds, “Follow” buttons, badges
- PayPal – “Verified” buttons, badges
- Merchant Raters (grief boards) like ResellerRatings.com – buttons, badges
- Product Feed sites like NexTag, Shopzilla, PriceGrabber, Shopping.com, and The Find – which is notorious for “Up Front” badges
- Linked In, BBB, Yahoo, Godaddy – Badges
- Various blogging / RSS feeds – Feeds, badges
- Bookmarking services like Delicious, StumbleUpon, Tumbler – Rating badges
- Newsletter services like Constant Contact, MailChimp, etc. – Newsletter signup forms / scripts
Please realize that I’m not advising you to discontinue using these sites. By all means, incorporate these sites’ API and functionality into your site, but pay attention to the coding that you’re pasting into your template.
If you found this post informative, please consider sharing it with others so that they can have their shot at success selling online as well. If you have further questions or need assistance, please feel free to contact me.