Watertight Always on HTTPS and AutoSSL

This article is our officially supported process for enabling Always On HTTPS and forcing visitors to the "www" URL.  There are many alternatives to enable HTTPS and direct visitors to "www," but this one is depth-tested and water-tight and it is the only technique for which we provide support.

In three steps:

1
Prepare your domain for HTTPS.
2
Add your domain to CloudFlare.
3
Enable HTTP Strict Transport Security.

1
Step one can be the most challenging.  
Our servers issue an SSL certificate to all eligible domains hosted on each server through cPanel's AutoSSL feature.  To ensure an SSL certificate is issued, you should first remove all redirects in htaccess and any redirects in any website code.  (Appropriate redirects will be enabled in Step 2.)
Within 24 hours after adding a live domain -- or after fixing any problems that prevented certificate issuance -- you should be able to open your websites using HTTPS (e.g., https://www.yourdomain.com)  If you experience any difficulties with this step, your support team can help troubleshoot.
Open your website with HTTPS and look at the 'lock' in the address bar.  If the lock is green, you're golden.  

Anything else means you have some more work to do.

The Chrome browser displays an "insecure" page like this:

Firefox is a little more direct -- the lock has a warning superimposed, like this:

Typically, these symbols indicate that you have "mixed content."  That is, some elements on the page are not served from the secure server.  Two very common items where "insecure" content sneaks in are CSS files imported into the page and images that point to "http://" rather than "https://"

For example, you might see something ike this in your code:

	<img src=”http://mysite.com/image.png”>
	

You can avoid a mixed content warning by changing "http" in the example above to "https."  You may also use a  protocol relative URL by leaving out "http" or "https" entirely.  A relative URL would look like this:

	<img src=”//mysite.com/image.png”>
	

Once you find and fix all references to "http://" in your code, the mixed content warning will magically disappear.

When your website displays without any errors or warnings while using HTTPS, you are ready for Step 2.

2
Add your domain to CloudFlare.

1.  Add your domain to CloudFlare in cPanel

Log into your cPanel and click on the CloudFlare icon.

If you have a CloudFlare account, click on the "Sign in   here" link and enter your credentials.  

Otherwise, click on the green "Create Your Free Account" link.  After you fill in your email and a password, check "I agree ..." and click on the green Create Account button, the window will be replaced with a "Getting Started" window that asks you to "Add a website."

Do not add your website at this time.  Close the window by clicking on the red dot at the top of the window.  (Why?  Due to a bug in the CloudFlare plugin, the domain cannot be provisioned correctly from this window.)

After you close the "Add a website" window, you will be back to the "Sign-up \ Sign-in" page in cPanel.  Sign in with the credentials you created for your new account.  Select the domain you want to add to CloudFlare (if you have more then one domain in your account) and click on the green "Provision Domain with CNAME Setup" button.

Why Full (Strict)?  CloudFlare Full SSL provides an authenticated connection between the browser and CloudFlare.  The connection is encrypted, but not authenticated, between CloudFlare and the server.  CloudFlare Full (Strict) also provides an authenticated connection between CloudFlare and the server.  ( Reference)

The cPanel CloudFlare interface is sufficient to manage most of your domain's needs, but you also have a CloudFlare dashboard:

https://www.cloudflare.com/a/login

2.  Pause CloudFlare (CloudFlare Dashboard)

Next, go back to your Overview page and click on the "Advanced" link under Status.  Click on the blue "Pause" button.

3.  Request a CloudFlare SSL certificate in cPanel by enabling CloudFlare's FullSSL (strict)

On the same page in the Domain Summary, right below the Pause, click on the Flexible link next to SSL.

Select Full (Strict) from the flyout menu to the right.

Why Full (Strict)?  CloudFlare Full SSL provides an authenticated connection between the browser and CloudFlare.  The connection is encrypted, but not authenticated, between CloudFlare and the server.  CloudFlare Full (Strict) also provides an authenticated connection between CloudFlare and the server.  ( Reference)

 Almost done in the CloudFlare dashboard!  The last item in the CloudFlare dashboard today is ...

4.  Add CloudFlare's CA certificate to the domain in cPanel (CloudFlare Dashboard)

One the same Crypto page where you requested the SSL certificate, scroll down to "Origin Certificates."  Click on "Create Certificate."  The default settings are fine.  After you generate the certificate, copy and paste the Certificate and Private Key to a text file.  You will install the Certificate and Private Key in cPanel.

Log into cPanel and navigate to the SSL/TLS page.

Open the Private Key page and the Certificate page and paste the respective certificate in the "upload" box.

Do not change any certificates that may already exist on the Private Key and Certificate pages.

OK!  We're done for today.

After 24 hours, go back to the same page where you requested the SSL certificate in Step 3 and look for an Active Status.  If the certificate is active, proceed with step 5.

5.  Resume CloudFlare (only after the certificate requested in Step 4 shows "Active")

6.  Test again.  If your website is working without error or warnings, you're ready for Always-on HTTPS.

7.  Enable "Always Use HTTPS" on Crypto page

https://support.cloudflare.com/hc/en-us/articles/200170536-How-do-I-redirect-all-visitors-to-HTTPS-SSL-

8.  Add a redirect page rule for "www"

You're done!  Your domain will direct all visitors to HTTPS and it will only display as "www.<your domain>."  

Since we asked you to remove all redirects, you might wonder if you lose your Always on HTTPS if CloudFlare is paused.  The final step accounts for this.

3
Enable HTTP Strict Transport Security.
The last, but very important step, is to enable HTTP Strict Transport Security (HSTS).  The HSTS protocol is a long-period cookie that tells browsers they should only access the website using HTTPS rather than HTTP.

With HSTS enabled you do not need to add redirect rules.  Maybe most importantly, with HSTS enabled attackers cannot bypass HTTPS to attack your website.

The simplest way to enable HSTS is through your CloudFlare dashboard.

https://support.cloudflare.com/hc/en-us/articles/204183088-Does-Cloudflare-offer-HSTS-HTTP-Strict-Transport-Security-

Finally, Google maintains an  HSTS preload service.  After your domain is accepted, browsers will never connect to your domain using an insecure connection.  Though the preload service is hosted by Google, all web browser authors have stated an intent to use the preload list.

HSTS Caveat

Before enabling HSTS, you should be aware of some intricacies in HSTS behavior.   HSTS is a long-term setting that is hard to claw back.  The benefits are well worth it as HTTPS becomes second nature for webmasters, but you might consider easing into HSTS with a short max-age. Slowly increase the max-age as you gain confidence. Once you're comfortable, submit the domain name for HSTS preloading.

Still need help? Contact Us Contact Us