Secure a Website with HTTPS TLS/SSL via Let's Encrypt

Secure a Website in 10 Minutes with HTTPS (TLS/SSL)

Every effort should be made to ensure your visitors information is secure with browsing your website.  Even if you are not actively collecting personal details, such as those parameters required for e-commerce, the very act of browsing a website can be intercepted by a third party and observed if your website only supports the standard HTTP protocol.  We’ll show you how to secure a website in ten minutes with HTTPS.

What is HTTPS (TLS/SSL?)

Okay, so we often hear of the term SSL certificate — it’s a fairly accepted term, even if it is incorrect.  SSL 3.0 (Secure Socket Layer) the protocol that was used as the basis fore TLS 1.0 (Transport Layer Security) which is used for security certificates used for HTTPS (Hypertext Transfer Protocol Secure)  which is used to secure web pages.

Google and HTTPS

In fact, as of 2014, Google has suggested that those sites using HTTPS for their entire site may get a bonus point in the search algorithm, which can help your position in the search results pages.

Google has a fairly full document about implementing HTTPS for a website, however, we’re going to break it down the basics of what you need to do, to get through it without  a headache.

The Coles (Cliff) Notes

Okay, we’re Canadian, and in Canada we had “The Coles Notes” whereas the American edition was “The Cliff Notes”.  In any case, the Coles notes are that to secure our website pages, we need to do the following:

  1. Get and implement a TLS certificate
  2. Make sure that any references external web page resources are also using a secure protocol

Getting and Implementing a TLS Certificate — The Quick & Easy Way

Okay, we’re going to assume you’re hosted with a web hosting provider that is running current and up-to-date server software.  (I know, pretty big assumption, but if you’re not with a web host who is offering this next feature, you should consider finding one that does).

In early 2016, an “Open Certificate Authority” was created called “Let’s Encrypt”.  “Let’s Encrypt” allows you get a security certificate, for free.  And it’s automated.  So cool.

The trick to getting it implemented for a website, in the beginning, involved running special command line software.

That is, until server software providers started to provide extensions to their platforms that allowed for automated installation of the “Let’s Encrypt” certificates.

So, check with your web provider to see if they support “Let’s Encrypt”.  All of our hosting servers at i3dTHEMES/Web Template Hosting support Let’s Encrypt, so our tutorial is going to show you how to implement it with our server in less than a minute.

Locking It Down — Getting Rid of Blocked Mix-Content Errors

Part two of this process involves in doing a quick bit of troubleshooting.  You can actually do this before getting the TLS certificate as well, but, if you’ve missed any, this next tutorial will show you how to fix the errors.

We use Chrome for this step.  It’s really the best browser for troubleshooting issues like this.  So, if you don’t have Chrome, be sure to go get it.

So, let’s get started.  You can also watch the video at the end of this step-by-step set of instructions to see how I do it for a website running one of our templates.

  1. Load up your website
  2. Look to the to the address bar — it should say “Secure” to the left of the address bar, and then if you have any mixed content errors, there will be a little “shield” with an X on it to the right of the address bar field.  If you don’t have the shield-with-x icon, then there is nothing further you need to do
  3. Press CTRL-SHIFT-I on your keyboard to bring up the developer interface.
  4. Select the “Network” tab
  5. Reload your page
  6. Detach the developer interface from the sidebar (if it’s docked) to view the loaded resource list better
  7. Scroll through the list to find resources that are highlighted in red, with a status of “Blocked Mixed-Content”
  8. Find those references within your web page’s HTML code and change the protocol to HTTPS
    • you may have had to update your global template DWT file in order to have some of the changes cascade across your entire site
    • you also may have to do a global find and replace, if the resources are within an “editable” region in your page, which would not get updated if you made the change in the master DWT file
  9. Repeat Step 7 & 8 until there are no more blocked resources.
  10. Save your pages
  11. Upload all of your changed web pages
  12. Return to step 1 above to confirm the shield-with-x icon no longer shows, otherwise you may need to investigate the page again with steps 7 & 8.
    • Sometimes there are external resources loaded via import statements in your stylesheets.  The stylesheet will appear secure, but the load of the externally loaded imported stylesheet reference will not.  This typically happens in stylesheets such as “fonts.css” which may include references to “Google Fonts”

After you have confirmed that there are no more blocked mix-content errors on your page, you pages are then fully secured.  Of course, check more than your home page, but generally speaking once you get your home page done (and you’ve made your updates site-wide) you should have solved the security warnings across your entire site.

Secured in Less Than 10 Minutes

The total of both of my videos was about 10 minutes — that included both getting the TLS certificate, and troubleshooting any mixed  content warnings.   If you do run into any problems identifying the resources causing mixed-content warnings, when you go to secure a website, let me know via the comments.

A Note About WordPress

Okay, so at the tail end of my video, I mentioned that WordPress is a different animal and is more technical to change any hard coded HTTP references.  I’ll follow up with another article on how to secure a website if  you have a site running WordPress, next week.