Set up CloudFlare's free SSL on Heroku

On September 29, 2014, CloudFlare introduced Universal SSL for the public. To be able to offer TLS certificates for free, they are using the extension to TLS protocol called Server Name Indication. This allows them to be able to serve a certificate for multiple domains using only one IP address, reducing the hosting cost. Since Heroku offers a piggyback TLS certificate via *.herokuapp.com, you can easily take advantage of this free TLS certificate offer and add TLS support (which commonly called SSL) to your website for free.

Add your domain name to CloudFlare

To set up, you can head over to CloudFlare and sign up for a new account and add your website information.

Enter your domain name, such as thoughtbot.com, to CloudFlare

Edit your DNS records

If you already have your domain name hosted somewhere, CloudFlare will display your current DNS configuration (aka zone configuration). You can customize those settings to your needs, such as retaining Google Apps configuration.

The important part here is the value for your apex and the www subdomain. You will need to change or create those two as CNAME records pointing to your .herokuapp.com address. You may also add another CNAME record for your staging site, pointing to another Heroku app.

Enter your DNS setting by pointing both www and apex to your-app-name.herokuapp.com

Choose a plan

On the next page, it will asks you which plan you want to use. Pick the free plan and make sure that SSL is on. I usually turn off everything else as well. After changing the plan, you may see a warning saying that it will take up to 24 hours until the SSL is active. As HTTP requests will continue to work, I suggest that you do not force your app to redirect to HTTPS until the SSL endpoint is fully set up.

Selecting free plan, turn off security, turn off SmartErrors

Update name server

Now it will tell you to update your NS record on your domain name. You will then need to go to your domain name registrar and update this information. This can take up to 48 hours before everything is in place.

List of domains with green checkmark next to it

After a day or so, come back to check if the NS record has been updated. You will notice a green checkmark after your domain name.

Turn on Full SSL

There is one last step to make sure that your connetion between your users and your website is secure. Click on the gear button, then click CloudFlare settings. Now, scroll down to SSL section, then make sure that “Full SSL” is selected.

Dropdown box with Full SSL selected

Congratulations. You now have secured the connection between your users and your server.

Using your own certificate for production

While this Universal SSL works perfectly in most cases, there are some caveats:

  • Users with legacy browsers (Internet Explorer on Windows XP, and Android phone pre-Ice Cream Sandwich) will see a bad certificate warning.
  • If a user inspects certificate information, they will not see your domain name in the common name section. Your domain name will instead appear in DNS Name Section.

SNI certificate provided by CloudFlare

Those caveats are probably fine for staging website. However, it may not be appropriate in production. In that case, you can actually tell CloudFlare to bypass the traffic, and you need to point your DNS record to Heroku SSL endpoint.

First, setup a Heroku SSL endpoint as usual. After that is done, you will get an endpoint domain (such as pankeki-8572.herokussl.com) that you need to point to. Then, back on CloudFlare, change both www and apex record to point to that domain. Also, turn off CloudFlare by clicking on the cloud button. It should look something like this:

Point www and apex to Heroku SSL endpoint and turn off CloudFlare

Save your changes, and it should be in effect almost immediately. Now, try to go to your website, and you should see your own certificate:

thoughtbot's wildcard certificate

Now you have secure production, staging, and any other subdomains you may have without having to buy a wildcard SSL cetificate.

What’s next