What Is SSL And Why Should I Care?

In short, SSL is the “S” in HTTPS. It adds a layer of encryption to HTTP that ensures that the recipient is actually who they claim to be and that only authorized recipients can decrypt the message to see its contents.

You should always protect all of your websites with HTTPS, even if they don’t handle sensitive communications. Aside from providing critical security and data integrity for both your websites and your users' personal information, HTTPS is a requirement for many new browser features, particularly those required for progressive web apps.

HTTPS doesn't just block misuse of your website. It's also a requirement for many cutting-edge features and an enabling technology for app-like capabilities such as service workers.

Having your site on and redirecting to HTTPS will significantly boost you Web Apps Google Lighthouse PWA score and make using push notifications with WordPress Mobile Pack a breeze.

Setting up HTTPS on your private hosting server

The fastest, simplest and FREE way of setting up an SSL certificate on your personal server is by following the tutorial at letsencrypt.org.​

Setting up HTTPS with CloudFlare

I. Configuring CloudFlare

1. If you don't have a CloudFlare sign up for one at cloudflare.com/a/sign-up and follow the instructions to add the WordPress site of your Web App.

2. In order to set up HTTPS on CloudFlare you must go to your CloudFlare dashboard corresponding to your WordPress site. In the crypto tab, activate "flexible SSL".

   ​​

   Choosing the “flexible SSL” setting is important because it doesn’t require you to buy and install your own SSL certificate on your WordPress site's server.

   As you can see in the diagram below, CloudFlare is acting as the middleman to secure traffic between your website and the client.

   ​​

II. Configuring WordPress

In order for your WordPress site to function properly with https we need to change a few things.

1. First you should change your URLs by going into the WordPress dashboard and clicking the Settings > General tab where you must add https:// to your "WordPress Address" and "Site Address". ​

   Before making any changes make sure your website is properly configured for HTTPS and the changes have taken effect on CloudFlare. Otherwise if you change these settings you could cause a redirect loop that will prevent you from accessing the dashboard.

2. The next step we have to take is update the legacy content on your WordPress site. WordPress stores links to pages and images as absoute URLs, meaning that the full URL, including the protocol, is saved in the database. To ensure that the entire website is consistently served via HTTPS (without spitting up warnings about mixed content), you will need to update them.

   If your host provides phpMyAdmin or some other interface to run MySQL queries, you could do this pretty easily with a few queries in the SQL tab.

   Replace yourdomain.com in the following queries with your actual domain and if you've customized WordPress' table prefix, replace wp_ with the relevant prefix. Run the following set of queries:

   UPDATE wp_postmeta SET meta_value = REPLACE(meta_value,'http://yourdomain.com', 'https://yourdomain.com')

   UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://yourdomain.com', 'https://yourdomain.com')

3. After running these queries, you will want to refresh your permalinks by going to Settings > Permalinks. Simply change the setting back to the default, and then set it back to whatever setting you were originally using. ​

If you don't have access to an interface you can follow the instructions at thecustomizewindows.com to run the queries from the command line.

Warning! If following the instructions at thecustomizewindows.com do not execute the querie to change the POST GUID, see codex.wordpress.com for explanations as to why.

In case you get mixed-content warnings cause by your other plugins and themes, make sure they properly enqueue JavaScript and CSS files and don't hardcode URLs that begin with HTTP. Most browsers will let you expand the warning to show the specific requests that are causing the error. You could also try one of the free plugins that can attempt to correct third-party plugins that have failed to do this, like SSL Insecure Content Fixer.

At this point you should see a green padlock in your browser when accessing your Web App.

Redirecting HTTP Requests To HTTPS

Just because you've setup HTTPS for your Web App doesn't mean all requests will actually use the protocol. If your website has been around for a while, users might have already bookmarked it with HTTP. By adding the following snippet to the top of the .htaccess file in the root of your website, you can redirect all HTTP requests to the new protocol.

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP:X-Forwarded-Proto} !https
    RewriteRule (.*) https://yourdomain.com/$1 [R=301,L]
</IfModule>

If the file does not exist, you can safely add it. If an.htaccessfile already exists, be careful not to change anything between the # BEGIN WordPress and # END WordPress lines in that file.