With Chrome now labeling sites accessed via regular HTTP as “Not Secure”, SSL/TLS support is becoming even more common. However, simply installing an SSL certificate doesn’t necessarily result in your site showing up as “Secure” (Chrome) or with a green padlock (Firefox). Instead, you might see the following in the Firefox URL bar:
And in Chrome you might see this in the security overview (Menu -> More Tools -> Developer Tools -> Security):
Although not immediately clear from the Firefox URL bar, you can see from Chrome that the issue is with mixed content being loaded. This means that although the page was accessed via HTTPS, regular HTTP content is being loaded within it. For this example, the page in question has the following code in it:
<img src="http://demo.dathorn.com/logo.png">
You can see that the source attribute is specifically set to an HTTP URL, which results in this mixed content issue. You can easily identify these mixed content resources in Chrome by clicking the “View request in Network Panel” link under the security overview which will display something like this:
In Firefox you can open the developer console to see similar results:
In both cases, the logo.png request is clearly noted as the problem. Correcting this is very easy, especially if the content in question is hosted on your own domain. You can simply update the code to one of the following:
<img src="https://demo.dathorn.com/logo.png">
<img src="/logo.png">
The first sets an absolute HTTPS path while the second uses a simpler relative path. The latter works because when the site is loaded via HTTPS, the items referenced with relative paths will as well.
If the resource in question isn’t hosted on your domain, you’ll have to see if the source domain supports HTTPS. If so, simply update the URL to use it. If not, you may have to remove that particular resource or host it locally on your domain.
Note that in some cases, you might have quite a few of these HTTP references to correct. Once you are done, though, you’ll see the green padlock in Firefox:
As well as a secure status in the Chrome security overview
Now you’re all set and have the full benefit of SSL/TLS on your site. Generally, it is a good idea to go through all of your site’s pages, if practical, to make sure there are no issues with any of them. There are also some scanners out there that can search through your site automatically to look for mixed content if you have a lot of pages.
We hope this helps to clear up some confusion that often occurs upon installation of an SSL certificate. If you run into any issues or have any questions please feel free to submit a ticket and we’ll be happy to assist.