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!
The SSLpocalypse has come.
Not really, but on July 1st, Google Chrome began marking all sites that are not running on HTTPS as “Not secure.” This is actually a really positive thing for the internet, as this change has been long overdue, and it will contribute towards the web being a much more secure place for all of us.
But if you own a site that is suddenly displaying a “Not secure” message, you may not feel as grateful for this change. Don’t panic! Getting your site running through HTTPS should be pretty 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 little more about what HTTPS is, explain what sites might and might not need to worry about this change, and finally get into how you might be able to get it working on your site. If you don’t care about what’s going on and just want to know how to get it fixed, feel free to skip to the bottom.
What is HTTPS?
To start off an explanation of HTTPS, we need to first talk about it’s namesake, one of the most integral frameworks of the internet, HTTP.
Okay, then 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:
Taking a trip back to the analog world, let’s imagine that the Internet was a physical library. When you need to get information, you head to the library, which is roughly similar to connecting to the internet and opening your browser.
However this particular library is enormous, and in order to get the right information you need there needs to be some kind of system of delivering that information in a way that you, or more accurately, your browser, and the library of the Internet, can speak to each other. That form of communication is HTTP.
It’s sort of like the “Dewey decimal system” of the Internet, it structures requests in a way that is mutually understandable for everyone. Each time you type in something into your search bar, your browser sends a ‘request’ to the server associated with that address (or to your search engine’s address), and the server sends back a ‘response’ which gives your browser the necessary information to display the site.
There are different kinds of ‘requests’ and ‘responses,’ which we don’t really need to get into here. Some of them, like the infamous ‘404 error,’ would probably sound familiar to you.
Just know that HTTP is built off a system of requests and responses, and that it’s the language of how browsers and servers talk to each other. It’s simple, and it’s how the internet works. And it works quite well! Well enough that it’s allowed us to build the largest hub of information in human history. But it’s not perfect, and understanding that explains why we need HTTPS.
The issue with HTTP
The problems with HTTP come from the very same simplicity that caused it to be chosen as the framework of the web in the first place.
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” (the #4 most asked question on Google according to this list). 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 & HTTPS: Keeping Bad Guys from seeing your Passwords (or memes)
SSL stands for Secure Sockets Layer. Once again, that doesn’t need to make sense. What you need to know about SSL is that it it’s a protocol that allows browsers 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. It’s like getting in the fast line on a roller coaster.
But in order to enter the fast line, you’ve got to have your pass. In this case, that’s an SSL Certificate. An SSL Certificate is a little packet of data that gets associated with your site, which contains an encryption key. That 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, which I’ll talk about more below.
Do I really need to secure my site?
Okay, great, we’ve learned all of this about HTTP, SSL, and HTTPS. But is it really important for me to buy this “pass” to make my site secure for my site? Especially knowing that a few of the most popular websites in the world, like wikia.com (#56 in global traffic), at the time of writing this, are still not running on HTTPS.
Well in response to that, I’d say you probably want to secure your site anyway. But let’s unpack the reasons a bit.
Why you would want to use HTTPS/SSL:
- 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, it’s time to switch to SSL/HTTPS.
- It might boost your search rankings. The evidence isn’t conclusive, but there’s some data that shows that 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 completely psychological, as you may not be exposing any data that matters, but the peace of mind alone is probably worth the bill.
- You want your website to be part of the future of the web. The reality is, HTTPS is the direction the web is headed. And it’s quite possible, even likely, that in 5-6 years if your site isn’t running on this protocol it will be effectively shunned: plummeting in the search rankings, and getting all sorts of warning alarms from browsers before someone enters it. Plus, perhaps worst of all, it will be totally uncool.
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 alright you stay unsecured. But know that in a few years this may no longer be a viable option.
How to get your site secured
After reading all of that, hopefully the majority of you will respond with “I really need to secure my site then!” If that’s you, here’s how you can get started on that.
Buying an SSL Certificate
First things first, you’re going to need to buy 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 your 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. Very popular web hosts include GoDaddy, Bluehost and HostGator.
To get your SSL Certificate, you’re going to need to log in to your account with them, 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
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.
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 wikia.com, 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 http://, not our desired https://.
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?
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:
- http://www.yoursite.com to https://www.yoursite.com
- http://yoursite.com to https://yoursite.com
- http://www.yoursite.com/* to https://www.yoursite.com/*
- http://yoursite.com/* to https://yoursite.com/*
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.
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.