DEV Community

MichaelPaulKunz
MichaelPaulKunz

Posted on

HTTPS

Most websites have a url that starts with https://. To the left of the url, there's a padlock icon that opens up an info box when you click it.

Alt Text

The info box lets you know that the site's connection is secure. You can send your credit card number through the site, and your information will be safe.

Some older sites are missing the 's'. They have urls that start with http:// and instead of the lock, they have a triangle with an 'i' inside. Clicking it brings up a different info box.

Alt Text

It tells you that your connection to the site is insecure, and advises against divulging any private information like credit card numbers or passwords.

Security

On July 24, 2018, Chrome started labeling any sites that didn't use https:// with the insecure tag you see now[1]. At the time, many prominent sites including BBC.com and Hilton.com were still using the insecure http://. Early developers will notice that their localhost projects start with an http url, as do their first deployed projects. But you'd be hard-pressed to find a major site these days with an http instead of an https url. This could probably be attributed to the stigma of having a big "insecure" thumb-print at the top of your page. Also, most news sites are looking for subscribers now, and they need to securely handle credit-card information so that users can sign up. It's weird to think that as recently as three years ago, prominent sites were still hosting insecure connections, but now any serious website needs to use https. In this blog, I'll try to explain how https works and lay out some starting points for adding the S to your url.

HTTP Requests

HTTP stands for HyperText Transfer Protocol. It uses Transmission Control Protocol (TLS) and User Datagram Protocol (UDP) to send information from one computer to another[2].

The entire internet runs on http requests. If you have Postman, open it up and do a get request on the url for any website.

Alt Text

You'll receive the html for that website. When you visit a page, your computer sends a get request to that page, which sends back the html, and your browser processes it to display the website.

HTTPS

HTTPS requests are in essence the same as HTTP requests, but with an added layer of security. While HTTP runs on port 80, HTTPS runs on port 443, and encrypts the request in Transport Layer Security (TCP)[2]. HTTPS stands for HyperText Transfer Protocol Secure or HTTP over TLS / HTTP over SSL.

HTTPS requests are encrypted by a method called public key cryptography. When your browser sends the get request to a url, the url first sends back a certification from some Certificate Authority (CA) that your browser trusts. The Certificate Authority also has a public key that your browser knows and can use to encrypt the information in the get request so that any third party listeners will receive an untranslatable jumble of characters instead of your request's exact text. The site's server can then decrypt the encoded message with a private key that only it has. For the duration of your https session, all communication is sent back and forth encrypted with these private and public keys. The kind folks over at kubucation created this info-graphic that breaks down a request to youtube.com. [3]. In youtube's case, the Certificate Authority comes from Google.

Alt Text

Converting to HTTPS

Michal O'neal has a great article about converting your site from HTTP to HTTPS[4]. It involves four main steps :

  1. Buying an SSL Certificate (preferably from your web hosting service)
  2. Installing the web hosting certificate on your account
  3. Switching all internal linking to HTTPS
  4. Notifying search engines with 301 redirects.

The final step can be automated with a CMS plugin. Notifying search engines is important. Especially since one extra advantage of using HTTPS is that you get an SEO boost.

Citations:

1: You'll Never Believe the Sites Still on HTTP

2: Difference Between HTTP and HTTPS

3: How Does HTTPS Work?

4: How To Convert HTTP to HTTPS

Top comments (0)