The following outlines how to setup Heroku + Cloudflare with a full SSL certificate. What this means is that communication between the browser and the Cloudflare CDN is encrypted as well as communication between Cloudflare and Heroku’s origin server. Follow these steps exactly and the setup is a breeze.
First you want to add the root domain and the www domain to heroku. You do this by clicking into your production application, then going to settings and then scrolling down to Domains and certificates.
Here you will add <your_domain>.com and www.<your_domain>.com. This will give you two CNAME records. They will look something like <your_domain>.com.herokudns.com and www.<your_domain>.com.herokudns.com.
Now we can head over to Cloudflare and under DNS we are going to add two CNAME records. The first is going to be for the apex domain and the second for the www.
For the first enter the @ symbol for the Name field and then enter the /non-www/ Heroku DNS record that looks something like <your_domain>.com.herokudns.com. Where you entered the @ symbol should change to the root domain name when you save the record automatically.
For the second record enter www for Name field and then enter the /root/ domain Heroku DNS record that looks something like www.<your_domain>.com.herokudns.com.
When complete make sure that the cloud on the right of the record is orange, meaning traffic to these domains will go through cloudflare.
We can now go into the Crypto tab of the Cloudflare interface. Here we are first going to make sure that the SSL setting is set to Full as well as that the Always Use HTTPS is set to On.
Under Origin Certificates we will click on Create to create an origin certificate. The default settings should be Let Cloudflare generate private key and CSR with hostnames being *.<your_domain>.com and <your_domain.com and a Certificate Validity of 15 years.
Cloudflare will then generate a public and private key for you. Do not close this just yet. For the next step we will go back to Heroku in a new browser tab to add these.
Now we can head back over to our Heroku application in a new tab and add these keys.
Under Settings scroll back down to Domains and certificates and click Configure SSl.
When you first add a domain to Heroku, an SSL is automatically created by Heroku. We are going to remove this certificate first by checking Remove SSL if it is visible and then continue. We can then click Configure SSL again and choose Manually. Here we can follow the prompts to paste the public and private keys into the Heroku interface. On the third step to set the DNS records you can click ok since we already did this in step 2.
After saving the SSL certificate everything should be all set and the application should load on the domain with HTTPS enabled.
Can confirm, this still works. @BMorearty nailed the updates above. I feel like I just got back an hour or two.