If you are utilizing an SSL certificate for your website, you are usually doing so for security reasons. You may be collecting credit card information or other personal data. As such, the SSL connection between your visitor and the server creates an encrypted connection to the server to protect data from others that may want to view that data. Though it can be used across an entire site, it is most commonly used for portions of the site that use sensitive information, such as shopping cart checkout areas.

Properly Functioning SSL

Obviously, if you purchase an SSL certificate for your website, it is important for your visitors to know that it functions properly. If it does not, then you risk credibility with your customers, and could appear to be a scam website. When the SSL is active on the page you are viewing, you can tell by checking the address bar at the top of the browser. There should be a small padlock icon in the address bar area. The format can vary among the different browsers. Below are a few examples of different sites with different browsers.

    EV SSL in common browsers

SSL with Errors

It is a common reaction to blame the SSL or host for having the certificate installed improperly. This is usually not the case. The SSL lock will only appear or display properly if all items on the page are linking securely. If there is even one unsecure link on the page, the SSL will appear as broken. This means it may not display at all, or it may display differently. Again, this will vary depending on the browser you are using. Below are examples of the same browsers using a page that is partially unsecure.

    EV SSL error in browser

Almost exclusively, the cause for this is the use of absolute paths for images, css, or javascript files within the page code instead of relative links. If even ONE additional file on the page is using the absolute format it will 'break' an otherwise secure page.

Absolute Path

Absolute paths for images, css and javascript files will include a full URL to the desired file, which is typically http://. For example, if you were linking image.jpg and your domain name was example.com, the link would be code as follows:

<img src="http://example.com/image.jpg" />

Relative Path

Relative addresses differ from absolute in that they include neither the protocol nor the domain name. Using the same image.jog file as before, the link code to that file in would simply be as follows:

<img src="/images/image.jpg" />

Correcting Coding

Using some form of relative pathing is required for websites with SSL and non-SSL pages. You will need to go through the code for your site and change all absolute links to relative ones. Alternatively, most designers that have SSL in their websites are using this type of relative pathing, which is similar to Absolute, but isn't protocol specific.

<img src="//example.com/image.jpg" />

That way, the image is called either via http or https.

Author: Michael Roberts