Published: July 26, 2015
Last updated:

Solving Magento SSL errors (yellow padlock or exclamation mark)

Tags:
magento-ssl-error-in-chrome
Yellow pad lock in Chrome on Magento checkout
Your connection is encrypted with 128-bit encryption. However, this page includes other resources which are not secure. These resources can be viewed by others while in transit, and can be modified by an attacker to change the look of the page.
If you see this warning message along with yellow SSL pad lock in Chrome for your Magento store (usually in frontend or on checkout pages), that means that your page contains some resources (i.e. image or form) that transmitted over plain HTTP, not HTTPS. In Firefox this SSL issue can be noticed by gray triangle with exclamation mark:
SSL error with exclamation mark in Firefox
SSL error with exclamation mark in Firefox
The connection to this website is not fully secure because it contains unencrypted elements (such as images) or encryption is not strong enough.

Cause

In most cases, some images or forms on the page are loaded over plain HTTP, without SSL. It can happen when CMS pages are edited by hand and some images or other resources pasted with absolute URL hardcoded with http:// protocol prefix instead of https:// or just //. In the worst cases, web-server configuration is incorrect or does not provide security level expected by browser.

Troubleshooting

We can effectively troubleshoot any SSL configuration issues with your Magento store and re-issue SSL certificate should you need it. To have us troubleshoot it for your simply click here to order it. To troubleshoot this issue on your own, you can use the following steps:

Find all non-SSL elements

Right click anywhere on your page, in context menu select View Source option. In source view page press ctrl+f and search for src="http:// or src='http:// or even src=http:// text: view-source-in-chrome



Find places, where non-SSL elements are defined

CSS, JS files usually are defined in theme headers. The common place to header template is app/design/frontend/package/theme/template/page/html/header.phtml, where package and theme should be replaced with actual names that corresponds to your theme. For images, the most common place, especially on CMS pages, is CMS page content or static blocks. Navigate to CMS > Pages or CMS > Static blocks in Backend and check for page or block that contains such resources.



Replace all non-SSL calls with protocol-relative or SSL call

For every non-SSL resource replace its non-SSL call (http://) with protocol-relative (//) or forced SSL call (https://). In example, replace http://example.com/image.jpg with //example.com/image.jpg or https://example.com/image.jpg. If non-SSL calls are made by code, i.e. getBaseUrl function, add array('_secure'=>true) option, so
<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK); ?>
should be like the following after adding it:
<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK, array('_secure'=>true)); ?>




Flush caches to apply changes

Do not forget to Flush Magento cache to apply changes.



Posted in: Configuration

64 votes, 4.74 avg. rating (94% score)