SSL (HTTPS): How to Secure Your Site, and Why

Hi everyone! My name is Corey Adkins, I’m a junior developer working for Press Up and will be publishing new content here from time to time. Here’s something I wrote originally for my site, GoodPress Development. Enjoy!

On July 1st, Google Chrome began marking all sites that are not running on HTTPS as “Not secure.”  This is a positive change for the internet as a whole: it will contribute towards the web being a much more secure place for all of us.

chrome ssl not secure message

The first horseman of the SSLpocalypse, or what your website might look like starting July 1st.

But if you own a site that is suddenly displaying a “Not secure” message, you may feel concerned. Don’t panic! Getting your site running through HTTPS should be simple, and your visitors will appreciate the peace of mind it will give them, knowing your site is safe to use.

In this article, I’m going to explain a bit more about what HTTPS is, explain which sites might and might not need to worry about this change, and finally get into how you might be able to get HTTPS working on your site.

What is HTTPS?

To start off an explanation of HTTPS, we need to first talk about its namesake, one of the most integral frameworks of the internet: HTTP.

What is HTTP?

HTTP stands for Hypertext Transfer Protocol. You don’t need to understand what those words mean to understand HTTP. Instead, let’s use an analogy.

The internet is, basically, computers communicating with each other. Specifically, clients—programs that connect to the internet, like your web browser—are continually making requests for information from servers, which are the computers that all websites’ data lives on.

These requests from clients, and the responses that servers send back, are a bit like the normal, physical mail system: a client mails in a request for information, and a server sends back the information.

So what is HTTP? HTTP is like a “standard-sized envelope” for the internet. It structures requests and responses in a way that is mutually understandable for everyone. Each time you type in something into your search bar, your browser sends an HTTP request to the server associated with that address, and the server sends back an HTTP response that gives your browser the necessary information to display the site.

So HTTP is built off a system of requests and responses, and it’s the language of how browsers and servers talk to each other. It’s simple, it’s how the internet works, and it works quite well!

The issue with HTTP

The problems with HTTP come from the same simplicity that caused it to be chosen as the framework of the web in the first place.

hacker http not secure encrypted

Because apparently all hackers wear hoodies.

That simplicity means it’s very easy for bad guys to “eavesdrop” into your connection. In some cases, like just navigating to a website, this may not be an issue. You may not care if somebody else knows that you asked Google “how to tie a tie.” But you might start caring when you’re sending websites passwords, social security numbers, bank account information, credit card numbers, and countless other things that you’d prefer nobody else see.

This is where HTTPS comes to the rescue!

SSL & Keeping Bad Guys from Seeing Sensitive Data

SSL is a protocol that allows clients and servers to converse in a way that’s encrypted.

SSL stands for Secure Sockets Layer. Once again, the details of those terms aren’t important. What you need to know about SSL is that it it’s a protocol that allows clients and servers to converse in a way that’s encrypted, so that it’s a whole lot harder to steal useful information from the connection.

Sites that are running under SSL use the aforementioned extension of HTTP, called HTTPS. The S stands for “secure,” and that’s what it’s meant to do: add a layer of security to HTTP.

In order to take advantage of that security, you need an SSL Certificate: a little packet of data that gets associated with your site, which contains an encryption key, and which allows you access into the more secure channel of communication known as HTTPS. For most of us, that’s something that we will need to get from our web hosting service.

Do I really Need to Secure My Site?

Is an SSL certificate important for your site? In general, yes, for a few reasons.

Why You Would Want to Use HTTPS/SSL:

  • If your site handles sensitive data. If your site uses log-in features, has a web store, or any other case where users are entering data that they wouldn’t want strangers to see, you must switch to SSL/HTTPS. Not doing so puts your users at risk.
  • It might boost your search rankings. Having a secure site that uses HTTPS causes a moderate boost in search engine rankings. And as adoption grows, if you’re not on HTTPS, your site might be punished more and more in search rankings.
  • You want your users to feel secure. Ultimately, regardless of whether your site is handling sensitive data, you want your users to feel like browsing your site doesn’t put them at any unnecessary risk. The benefits here may be largely psychological, but the peace of mind alone is probably worth the bill.
  • You want your website to be part of the future of the web. HTTPS is the direction the web is headed, and the web’s leaders (like Google, Mozilla, and others) are steadily increasing the pressure on website owners to adopt it. Now’s a good time.

Why you might not want to use HTTPS/SSL:

  • Your site is small, and you don’t handle sensitive data. If you’re currently running a small site, like a blog, which has a low amount of traffic, and you don’t plan on expanding it or adding anything like a web store, or a login function, then it’s probably all right you stay unsecured. But know that in a few years this may no longer be a viable option.

How to Get Your Site Secured

Hopefully you’re thinking, “Let’s secure my site!” Here’s how you can get started on that.

Get an SSL Certificate

First things first, you’re going to need to get an SSL Certificate. This is something you’re going to have to do through your web host. If you don’t remember what a web host is, this is the site you’re paying to give you a server on the web. This may be separate from your domain hosting, who holds the specific domains, or addresses, of your sites.

ssl secured status wikipedia

The Holy Grail we’re working for: Secured status.

To get your SSL Certificate, you’re going to need to log in to your hosting account, and look around. Each host has their own way of doing this, but if you’re having troubles, just Google “your host name SSL Certificate” and you’ll get pointed in the right direction.

Depending on your host, you’ll either get your certificate for free, or you’ll have to pay for it. Prices for those vary by host, but seem to average around $50-$70 USD a year.

If you’re getting it for free, it’s probably because of a fantastic non-profit service called Let’s Encrypt which provides free SSL Certificates. However in order to benefit from this, your host needs to actually support the use of Let’s Encrypt, and not all hosts do. I won’t speculate why those hosts choose not to support it, but I’m sure it has nothing to do with being able to rake in more cash selling the certificates themselves.

If you don’t want to pay your host for SSL, then it might be worth considering making a switch of hosts. Here’s a list of hosts supporting Let’s Encrypt. I especially recommend SiteGround as a host, as I’ve had nothing but a positive experience with them. Here’s a great review from Fred at WPShout that will give you more reasons to switch to them. I’m not even getting paid, I just think they’re that good (and some of the other hosts are that bad).

Okay, I’ve bought my SSL Certificate, why am I still not secure?

Buying the SSL Certificate is the first step, but often not the only one to get your site running smoothly through HTTPS.

If you still are finding your site with that pesky “Not secure” message, you probably need to do some additional cleanup on the site itself. Often sites, especially more complex ones, are pulling in resources from various places in the web. Some examples of resources you might be pulling in:

  • Custom fonts
  • Embedded videos
  • Images not hosted on your site
  • Social media widgets
  • Etc.

If any of the links to those resources are not running on HTTPS, that can be enough to rob you of your own secure status.

matrix code

I promise the Web Inspector isn’t this.

One way of figuring out if this is an issue on your site: head to your site, and click F12 (or right click any part of the site and hit “Inspect”). That should open up the Chrome Web Inspector, something developers use every day, but if you’re not a developer, probably looks like something from the Matrix to you.

All you need to do from here is hit the “Console” tab, and if your site is anything like the aforementioned, you’re going to see all sorts of red messages, showing you requests your site is making to unsecured websites. You can see in the image below that each of those requests has an address that starts with //, not our desired //.

devtools console errors https

If you want your site to be secure, this is a problem.

How you fix that depends on a few things. I’m going to show the solution for those who are running their site on WordPress, and talk about a few ways that non-WordPress users might be able to solve this issue.

A WordPress Solution

Fixing this on WordPress is usually pretty simple. Typically, you just need to install a plugin that is going to force all links to use their HTTPS versions. There’s quite a few that do this, one that’s worked for me is Really Simple SSL. It also does a few other nifty things, like forcing all content on your site (images, and the like) to use their secure versions. Another plugin that we’ve covered over on WPShout is WP Force SSL, which works great too!

If that didn’t work, you might need to try out the solution I’ve listed below for non WordPress users, or it might be time to talk to a developer to get things straightened out.

If you’re not using WordPress

Since there’s a whole load of other ways you might have built your website besides WordPress, I can only speak in generalities, but basically, you need to look for any links content, like images, or to outside resources in your site, and make sure they’re using HTTPS versions.

If you’re site is just built on simple HTML, this is easy: just do a simple search for “http”, and edit all of those instances.

If you’re using another kind of CMS or site builder, it might be a little more difficult: you’ll need to make sense of the aforementioned Developer Tools console messages, and track down in your site where each of those requests is coming from. If it’s an embed code (it’ll look like html, which tends to start like “<div….”), you can change any URLs you find inside it from http to https. If it’s getting pulled in a different way, by some service that your site is handling for you, you might need to recreate whatever element is generating it.

It’s worth saying that some of the resources you’re using might suddenly become unavailable after this change, either because they don’t support HTTPS, or they have a different address in their secure versions. If that’s the case, I’d recommend trying to search something like “name of the service https” and see if there’s any documentation available.

If none of this gives you the much desired “Secure” status, or some necessary resources for your site are not working, it’s probably time to call a developer.

Success! My site is Secure. What’s next?

secure status chrome browser

Sweet victory.

If you followed those steps, and the web gods are in your favor, you should get the beautiful green lock that signifies your site is secure, meaning it is using the HTTPS protocol. Now your site can reap all of the benefits of being part of the secure web.

However, there’s probably one more step you’d want to take to ensure everyone is accessing the secure version of your site, which is to set up 301 redirects from the http to the https version, so that if someone tries to access your domain via http, perhaps by an old link embedded on another site, they will be automatically be forwarded to the secure version of the site.

A redirect is essentially a rule that you can set up in your site so that whenever someone accesses a particular location, the site sends them somewhere else you’d like them to go. We’ve all probably seen this happen when we navigate to a page that doesn’t exist (the classic 404 error), and get sent to the “Page not found” page. A 301 redirect is a specific kind of redirect, and all you need to know is that it’s the best kind to not mess with your search engine rankings (you can learn more about them here).

Getting this setup on WordPress is once again quite simple. First, install a 301 redirect plugin (the industry standard seems to be Simple 301 Redirects) onto your site. Then, following the documentation, add your redirects. The main ones you’ll probably want to add will be these, substituting in your domain:

  • // to //
  • // to //
  • //* to //*
  • //* to //*

If you’re using Simple 301 Redirects, make sure to check “Use Wildcards?” when you add these.

If you’re not using WordPress, you’ll probably need to do it via the server/hosting site. Rather than trying to guide you through that, I’d recommend you do a search for 301 redirects and add the name of your host.

relaxation beach

A job well done.

Once you’ve completed all that, you’re done! You can relax, knowing that your work has created a more a secure and modern browsing experience for all of the visitors on your site.

Leave a Reply

Your email address will not be published. Required fields are marked *