Have you ever arrived at the checkout page, ready to buy, and a message pops up “this page contains secure and insecure items“? For many non-technical web shoppers this warning can cause alarm and possibly abandonment from your checkout page.
These security errors at checkout show up more prominently within the Internet Explorer (IE) web browser then Firefox or Google Chrome. Unfortunately, IE has almost 70% of the market share of internet users (Source: http://www.statowl.com/web_browser_market_share.php) and such security warnings can impact a large portion of your purchasing visitors.
We have purposely setup an insecure image on our site to show examples of each browser’s warning.
Error in IE
Error in Firefox: A red “!” exclamation point is displayed on the security lock icon in the footer of the browser window.
Error in Chrome: An orange triangle with an exclamation mark is displayed in place of the secure lock icon in the browser URL at the top of the page.
What causes these types of security errors?
An original ProStores template will not produce these errors, but often times “do-it yourself” shop owners and even experienced web developers unfamiliar with ProStores can inadvertently introduce errors. 99% of these errors come down to one simple mistake: “creating an insecure or untested absolute link”. An "absolute" link is a hard reference to a direct path such as an image, file, style sheet, JavaScript file, or external tracking element. Common examples include incorrectly inserting a site seal, building absolute links to your own web site images, or incorrectly adding affiliate tracking code, etc.
The good news is this can be fixed with little effort. Follow these easy steps to find and eliminate these security warnings in your web site source code.
Finding the offending item causing the error
You can find the error by reviewing the secure page’s HTML code. However, this can take a lot of time and effort. One quick and easy tool is using the Firefox browser’s diagnostic tools (pre-installed). This will allow you to quickly determine if any images are causing the error and save yourself time. To find out if the error is caused by an image or set of images, follow these quick steps:
- Step #1) Open your site in Firefox and browse to the offending page (usually the secure checkout page).
- Step #2) Right click on the page and select “View Page Info”. This will open a new window where you can check for insecure images.
- Step #3) Select the “Media” tab at the top of the page. Presented will be a view of all the URL addresses of the images and other media elements on the secure page.
- Step #4) Scroll through the list until you find one that has a non-secure address starting with “http://”. If one has “http://”, this image is causing the conflict when visitors open the secure page. See the image below as an example.
If you can not find an image causing the error, then you will need to manually review your HTML code for references to insecure files such as Javascript or CSS files from third-party sites. You must right click and select “View Page Source” as illustrated in the graphic below:
Insecure, absolute links from third-party sources may appear like the following picture:
Notice after src=" we have http://, which is an absolute reference to an insecure file. To eliminate the security warning error, this file needs to be accessed through the https:// protocol during checkout, or not be accessed at all during checkout.
Fixing your absolute linked site images:
Upload the offending image through your ProStores Admin (Support > Upload Images > Store Version Images) and link the image using the ProStores SSML code:
<ss:image source="$storeVersion.images['Image_Name.ext']"/>
Just change the ‘Image_Name.ext’ to the name of your image, plus the file extension (.gif,.jpg, etc), leaving the single quotes (‘) intact.
For example: <ss:image source="$storeVersion.images[' homelogo.jpg ']"/>
By using the SSML code, it will automatically resolve the security issue at checkout.
Fixing referencing third-party images, Javascript, and CSS:
If you have an image or Javascript/CSS reference files pulled from another site (e.g. site seal, brand logo, CSS file), you will need to make sure the image or file is accessible using https:// in the URL instead of http://. If it comes back as properly secure then you can use an SS:IF test to secure the file.
Use the following ssml code and insert the secure and insecure file references appropriately:
<ss:if test="$request.getScheme() == ‘https’">
<ss:comment>Put the /securely/ linked file reference here. If it is not available, just leave this area empty and your store will not load the offending file during the checkout process. </ss:comment>
<ss:else/>
<ss:comment>Put the /insecure/ file reference here.</ss:comment>
</ss:if>
Note: The code above also works for external Javascript and CSS style pages.
If you found that all your images are secure, you have viewed your site’s source code, and all linking javascript or style sheets correctly, you may need to contact a certified ProStores developer for further assistance.
Remember to avoid just hard linking to the secure URL only. This causes longer page loads for an SSL encrypted file or webpage, and more importantly impacts the customer experience.