Converting a non-SSL Website to SSL

ssl certificate

There are two kinds of websites on the Internet: Those that use SSL, and those that do not. When accessing a website protected by SSL, your browser’s address bar may turn a green color, or a golden or green padlock icon may appear next to the start of the website URL in that address bar.

If the website is accessed at https://, but the SSL certificate is incorrectly configured, or more commonly, the website is not entirely encrypted because it is trying to serve files not protected under SSL, your browser will show you a popup alert informing you of this error. Websites serving errors to visitors can cause confusion or a breakdown in trust with the user, and potentially lead to lost sales and traffic. So, it is vital to ensure your website is correctly configured for use with SSL.

If you have just installed SSL on your hosting account, there are additional steps you will still need to take to ensure the site functions properly with SSL.

The following steps assume you are using WordPress, the most widely used application framework in our network. (Similar steps are required for other frameworks, such as Joomla, Drupal, and Magento, but are not addressed in the scope of this article.)

1. Change the main links within your application framework to reference “https://”

Log into your website’s administration panel. In WordPress, navigate to Settings -> General, and note the following:

WordPress Address (URL)
Site Address (URL)

Change these values to ensure the full URL in each contains https:// and not simply http://.

Optionally, if you are more of a database administrator type of person, you can log into the MySQL database for this WordPress installation using phpMyAdmin within Cpanel, and navigate to the the “homeurl” and “siteurl” variable values in WordPress’s wp_options table, ensuring the link for both variables begins with “https://”.

2. Force SSL requests with a .htaccess file

The .htaccess file lives in the document root of your website. In Cpanel, this directory is /public_html/. The file may not appear when using an SFTP program or when accessing File Manager through Cpanel, so be sure to set “show hidden files” is set in your application.

To force SSL requests throughout your website, include the following rules in your .htaccess file:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L
]

Make sure that “www.example.com” is replaced with your actual domain name.

3. Verify images and included files are called with https://, or an absolute file path for the URL

Though the first two steps should adequately enforce file and resource requests for your website should be served securely, we have found many cases where “hard-coded” links, such as an IMG tag with a TAG parameter requesting a file, beginning with “http://” can be all it takes to make a page fail to fully load in SSL and therefore result in a popup error.

A good example of this would be a WordPress blog post or page with an included file. By default, images placed using the WordPress Media Library, will by default be written out as a complete URL, meaning the IMG tag will show http:// or https:// as part of the included file’s URL.

For this reason, we recommend that you search for and replace all references to included files throughout your website, so none request http://. One plugin that achieves this at the database level is simply named, “Search & Replace”, and can be downloaded here:

Search & Replace

Even then, we suggest a manual review of all prominent pages or blog posts of your website, to ensure the links have been altered.

If performing this manually, you can simply change the IMG SRC value and strip out the entire protocol and URL, leaving just the file structure. For example, instead of a tag like this:

<img src="http://www.canvashost.com/path-to-the-included-file-or-image.jpg" alt="" />

You could change the reference to:

<img src="/path-to-the-included-file-or-image.jpg" alt="" />

When modifying links in this way, the browser automatically understands that whatever website address you are at (in this case, on our website, at https://www.canvashost.com), should be used to pre-pend that link, so the browser will understand the IMG tag to effectively read:

<img src="https://www.canvashost.com/path-to-the-included-file-or-image.jpg" alt="" />

This is a bit of a hack, but useful if you ever plan on changing the primary domain of your website, or wanting to reference the website through additional domain names that have been aliased/parked on the account, as the absolute file path will still be valid for each of those requests.

4. Verifying your website theme uses either SSL or absolute file path

This may present the trickiest aspect of website cleanup. Your website theme (or template) contains file path callouts to images, stylesheets, javascript files, and other included files, all of which will need to be hard-coded to “https://”, or be stripped down to the absolute file path as demonstrated in step 3.

You can verify the state of your website by first accessing it with a browser at https://(your domain), so your browser is attempting to reach it securely. If you don’t see any errors, you may be all done, as the same theme files will be loaded regardless of which page of the website you access.

If you happen to see a browser error, try viewing the page source. In Firefox and Chrome on a PC, for example, this can be done by pressing Ctrl-U with your keyboard. The actual, served HTML code will be displayed. Once viewing the source code, simply search for references to “http://”, such as “src=’http://”, to see cases where the theme is trying to load files or images with http:// and not https://.

The next step will be to individually log into the theme files and make necessary adjustments, just as done in step 3. Once you’ve completed this cleanup, try loading a fresh copy of the website and go over this until the broken padlock icon disappears from your browser’s address bar. You’ve done !

5. Canvas Host can help!

If you’re still stuck or simply want some help, Canvas Host is happy to assist. We’ve helped many customers through these steps. Though it is billed work, it costs about $200 to fully ensure a website is protected by and working properly with SSL. If you are interested in learning about our SSL clean service, please contact our Sales team at sales@canvashost.com.

David Anderson

This blog is published by David Anderson, Principal and owner of Canvas Host.