Configure Cloudflare and Heroku over HTTPS

Heroku is a cloud PaaS which supports several pre-configured programming languages. Heroku deals with all your infrastructure so you can focus on your application without grunting at the command line.

This article describes how to configure Heroku with Cloudflare to serve your traffic over HTTPS. We'll assume for this article that you already have an active domain on Cloudflare, as well as a running Heroku app.

Add a custom domain to your Heroku app

  1. Log in to Heroku, select your app, and go to Settings

    Capto_Capture_2018-01-23_10-09-10_AM_copy.png

  2. Scroll down to Domains and certificates and click Add Domain
    Capto_Capture_2018-01-23_10-09-10_AM.png

  3. You're done!

If you are managing Heroku via CLI you can also add a domain with this command:

heroku domain:add [yourdomain]

Configure your Cloudflare DNS

IMPORTANT: Disregard the recommended Heroku CNAME created in the previous step (example.com.herokudns.com). Cloudflare's security and speed features cannot be used with this record. Instead, use the default Heroku domain name provisioned for your app (usually formatted like this cf-solutions.herokuapp.com)

Adding a subdomain

To start, simply log in to your Cloudflare account, navigate to the DNS panel and add the CNAME entry for your Heroku app.

Screen_Shot_2018-01-23_at_2.58.16_PM.png

Adding your root domain

Adding a root or apex domain on Heroku requires using a CNAME record pointed from your root. You cannot use A records on Heroku because no IP addresses are exposed for Heroku users to use.

Fortunately, Cloudflare offers CNAME flattening to resolve requests for your root domain. Simply add a CNAME record for your root (e.g. kingkong.com) and point it to the same server name (cf-solutions.herokuapp.com)

 

Confirming that your domain is routed through Cloudflare

The easiest way to confirm that Cloudflare is working for your domain is to use cURL.

╰─➤  curl -I www.kingkong.solutions
HTTP/1.1 200 OK
Date: Tue, 23 Jan 2018 18:51:30 GMT
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
Set-Cookie: __cfduid=daeef1c4f83da8dd3ae5745d5e869b78e1516733490; expires=Wed, 23-Jan-19 18:51:30 GMT; path=/; domain=.www.kingkong.solutions; HttpOnly
Cache-Control: public, max-age=0
Last-Modified: Mon, 31 Dec 1979 04:08:00 GMT
X-Powered-By: Express
Server: cloudflare
CF-RAY: 3e1cf1d936f28c52-SFO-DOG

You can identify Cloudflare-proxied requests by either the ‘__cfuid’ cookie or the ‘CF-Ray’ response header. If either of these two are present, your requests are being proxied by Cloudflare accordingly.

You can repeat the above cURL command for any of your sub domains that you have configured within your DNS settings.

Configuring your domain for SSL

  1. Cloudflare provides a SANs wildcard certificate with all paid plans, and a SNI wildcard certificate with the Free plan. Full details on SSL can be found here.
  2. If you don't know what this means – no big deal. Just navigate to the Crypto app within your Cloudflare Dashboard. Select 'Flexible' mode to serve your site over HTTPS to all public visitors:

Screen_Shot_2018-01-23_at_2.58.16_PM.png

Once the certificate status changes to • Active Certificate, incoming traffic will be served to your site over HTTPS (e.g., visitors will see HTTPS prefixed to your domain name in the browser bar)

 

Forcing all traffic over HTTPS

To force all traffic over HTTPS we’ll be using the Page Rules functionality found in the Cloudflare Dashboard:

Screen_Shot_2018-01-23_at_2.58.16_PM.png

 

Once you've navigated to the Page Rules app you can start adding a new rule that covers your entire domain:

Capto_Capture_2018-01-23_03-17-19_PM.png

Type in your Page Rule according (i.e. 'http://*yourdomain.com/*) and click Save and Deploy.

We can then use a similar cURL command as before to verify that all requests are being forced over HTTPS.

╰─➤  curl -I -L kingkong.solutions
HTTP/1.1 301 Moved Permanently
Date: Tue, 23 Jan 2018 23:17:44 GMT
Connection: keep-alive
Cache-Control: max-age=3600
Expires: Wed, 24 Jan 2018 00:17:44 GMT
Location: https://kingkong.solutions/
Server: cloudflare
CF-RAY: 3e1e77d5c42b8c52-SFO-DOG

If SSL was not working for your domain (e.g. your SSL certificate has not yet been issued), you would see a 525 or 526 HTTP response after the redirect.

Please note that the issuing of a Universal SSL certificate typically takes up to 24 hours. Our paid SSL certificates issue within 10-15 minutes. 

Still not finding what you need?

The Cloudflare team is here to help. 95% of questions can be answered using the search tool, but if you can’t find what you need, submit a support request.

Powered by Zendesk