You've taken all the steps necessary to make sure your site is secure, and you want your visitors to be confident that their personal information is kept confidential. When visitors to your web site request a page using a secure https:// connection, a broken padlock icon may appear in the web browser's location bar. Additionally, they may receive a warning message:
- Mozilla Firefox displays:
"The connection to this website is not fully secure because it contains unencrypted elements (such as images)." - Microsoft Internet Explorer displays:
"Do you want to view only the webpage content that was delivered securely?
This webpage contains content that will not be delivered using a secure HTTPS connection, which could compromise the security of the entire webpage." - Google Chrome displays:
"Your connection to example.com is encrypted with 256-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."
When you have an SSL certificate installed on your website, it attempts to encrypt all of the elements on your website's secure pages (e.g. the checkout page). If all elements on the page cannot be encrypted, customers will see an "unsecured content" message and, in some browsers, customers may see a broken padlock icon.
Though these messages do not indicate a failure of the SSL certificate, they can still be scary to customers and drive your website's conversions down. Below are the three most common issues in your website that can cause an "unsecured content" message and tips on how to correct the issues.
Error Explained
When your website's SSL certificate fails to encrypt all of the elements on a page (for example: forms, textboxes, images, etc.), customers receive an "unsecured content" pop-up message.
To resolve the error, all you need to do is find the elements on the page that cannot be encrypted and make some minor modifications.
Images Hosted on Your website
Any time an HTML image link is created within a page using the entire, "absolute" URL for the image file's location, the resulting image link will not be encrypted by any SSL on the site.
For example, the following image link cannot be encrypted by an SSL certificate:
<img src="http://www.yourdomain.com/assets/photo1.jpg">
To correct this issue, simply remove your website's domain from the image tag, creating a relative link:
<img src="/assets/photo1.jpg">
Images Hosted Externally
Note that the previous example only applies if the image file is being hosted within your website. If an image link refers to a file hosted on a web server outside your website (e.g. a Flickr account), you'll need to modify the image link to use the secure "https" protocol.
In this case, the image link should look like this:
<img src="https://www.anotherdomain.com/images/photo1.jpg">
Note that the third-party web hosting server in question must support the "https" protocol in order to successfully secure the image using your website's SSL certificate in this manner.
Relative Urls
Alternatively, using "relative URLs" lets the browser automatically choose HTTP or HTTPS, depending on which protocol the user is using. For example, instead of linking to an image using a link with the "absolute path" of:
<img src="https://www.anotherdomain.com/images/photo1.jpg">
The site can use a relative path:
<img src="//www.anotherdomain.com/images/photo1.jpg">
This allows the browser to automatically add either http: or https: to the start of the URL as needed. (Note that the site linked to will need to offer the resource over both HTTP and HTTPS for relative URLs to work.)
Javascript Files Hosted Externally
As with image links, any unsecured reference to an external file such as a stand-alone Java Script file (.js) will also produce the "unsecured content" pop-up. You can resolve the issue by removing your website's protocol and domain name from the HTML that references the Java Script file.
If the JavaScript file is linked from an external source, the secure http protocol (https) must be used when linking to the script file and the server it is hosted on must support the secure http protocol.
Third-Party Tools for Finding Unsecured Content
There are some third-party tools such as WhyNoPadLock.com which can help you find non-secure content on your website's secure pages. You can visit sites like these and enter your website's secure URL (https://www.yourdomian.com) to get a report on unsecured content.
Note that MonsterMegs does not endorse any specific third-party software or tool. We encourage you to do your own research on the effectiveness and reputation of any third-party service or tool you choose to use.
Following the above steps will not guarantee a fully secure site, as these are simply a recommended set of preliminary troubleshooting steps to resolve unsecured content issues
