Atomic Smash homepage splash

What do I need to remember when adding an SSL?

Words by David DarkeMarch 21, 2018

TL;DR: Checklist can be found here.


SSL checklist

Browsers and internet services are taking a more strict approach to how insecure content is accessed via the internet. For a web-store or any site that collects personal information, it’s essential to have a secure connection to your end users. This is now even starting to apply to simple content driven sites like blogs. Not having an SSL up and running might dramatically affect user’s experience and trust of your site/brand.

In some cases in the very near future, you will be presented with warning messages like:

ssl warning for insecure sites

ssl warning for insecure sites

…will confront visitors before the website even loads.

There are many hosts/services that allow you to purchase SSL, but for most content delivery websites we recommend using the FREE SSL provider Let’s Encrypt.

Sadly, however, slapping a certificate onto your site isn’t always straightforward, there are tasks that need to be done before and after the installation.

These tasks don’t just apply to WordPress driven sites, these basic principals should apply to any CMS, Non-CMS or e-commerce driven platform. Also, some of the tasks may require knowledge/updates of your code base running your site. If this is something you are not comfortable with, then please pass this checklist onto your current developers.

Stage 1 | Before installation preparation

These are steps that can be performed at any time before the SSL is in place. Most of these changes wouldn’t be done on the live server, but on a local copy ready to upload after the SSL is live.

Hardcoded references

Update all hard-coded insecure URLs in your theme or custom plugins. If we were doing this for this site (www.atomicsmash.co.uk), we would search our codebase for ANY reference for the string of characters “http://www.atomicsmash.co.uk” and replace them with “https://www.atomicsmash.co.uk”. Note the “s” addition.

This first search replaces all Atomic Smash related URLs, but a site will usually reference a number of external assets (Javascript libraries, images, and other media). It’s worth doing a search for simply “http://” to make sure there won’t be any insecure files loaded. If you do find any, most of the time simply replacing “http://” for “https://” will do the trick, but it’s important to make sure there is actually a secure version of whatever asset that is being loaded, if there isn’t, you’ll need to find a replacement.

There will also be references to insecure links inside your database. It’s not good practice to replace all links with an ‘https://’ version without some way of checking to see if the secure version exists. So it’s safer to just replace local URLs, from our previous examples this would mean “http://www.atomicsmash.co.uk” will be replaced with “https://www.atomicsmash.co.uk”.

The simplest method of updating the database is to download a backup, open in a text editor, then find and replace the URL. There is also a way of use WP-CLI to do the same thing.

Stage 2 | Install SSL

Time to get the certificate onto the site, again, this may require help from a developer if you are uncomfortable with this stage.

It’s also now time to upload your code and database changes from Stage 1.

Once done, it’s time to test and make sure the connection is secure. All browsers have this ability but with Chrome, navigate to the secure version of your site, right-click and select “Inspect”

Right-click anywhere on the currently visible page

Right-click anywhere on the currently visible page

Then navigate to the “Security” tab:

security-of-site-in-chome

There should be no security flags (like above).

Stage 3 | Prioritise the secure connection

The final step in the process (once you know your site is secure) is to force all traffic through the “https://” version rather than the “http://”.

For WordPress, this should have already happened when we updated the database. To verify, navigate to the WordPress admin, click Settings > General and check the “WordPress address” and “Site Address” to make sure that they both include “https://”:

Updating WordPress URL

Updating WordPress URL

From a developer point of view, it’s also important that this redirect between insecure and secure is handled via a 301 redirect. This tells search engines that the content permanently moved and needs to be re-indexed.

Installing a tool like Redirect Path in your browser will help you identify any issues with the redirect chain. For example, when I try to access the insecure version of Atomic Smash, you should receive this redirect chain:

Redirect to secure version of your site

Redirect to secure version of your site

 

One final check is to run a couple of pages through an external SSL checker, to make sure everything has been correctly configured and isn’t just working on your setup. Here are the results for Atomic Smash:

ssl-report

Once you have a clean result with no issues your SSL is fully setup!

Checklist

Here is a reference checklist. If anything is unclear please refer back to the stages in the article.

  1. Update hardcoded reference in the code to the site to make sure they are secure.
  2. Update hardcoded reference to external resources to make sure they are secure.
  3. Update reference to the insecure site in the database.
  4. Install the SSL.
  5. Check any site issues using your browser’s dev tools.
  6. Check redirects from the insecure version of the site.
  7. Run an SSL test
  8. Brag about your newly secure site on social media. 😉
Profile picture of David Darke

David Darke

As the lead developer and co-founder at Atomic Smash, David’s wealth of knowledge in website development means that all sites work seamlessly across desktop, tablet and mobile devices.

Go back to top

Keep up to date with Atomic news