Adding SSL when using Heroku and Namecheap

I have fought a few hours to try to get SSL working when using a Heroku Dyno together with a domain bought on Namecheap. I didn’t want to use any Namecheap paid SSL solution, because Heroku offers SSL for free.

My goal is simple: Every user should end up on https://example.com regardless whether they visit the website with https/http or www/non-www.

To make it more clear:

• http://example.com => https://example.com
• http://www.example.com => https://example.com
• https://www.example.com => https://example.com
• https://example.com => https://example.com

In the beginning I wanted to achieve everything using the Namecheap DNS settings. And even though Namecheap introduced ALIAS records last July and me reading a lot of articles on that topic I could not get it to work. Sometimes the redirects from www to non-www did not work, sometimes the https website did not respond. The issue is, that Namecheap does the DNS resolution, but it does not have the SSL certificates (Heroku has them).

The (in my eyes not most elegant solution, but it works flawlessly) is to use application-level redirects. That means in your application you issue an redirect to the https URL when an incoming request was using http.

Heroku (and most other platforms) deal with the whole SSL problem (they do the SSL termination), so your application only receives http requests. In order for you to know whether a request was originally using http or https you have to look into the x-forwarded-proto header (Heroku documenation on that).

Using the header value to redirect to https when you have encountered an http request (I am using fastify and Node.js here):

import fast from 'fastify'
const fastify = fast({ logger: true })

fastify.addHook('onRequest', async (request, reply) => {
    if (request.headers['x-forwarded-proto']) {
        if (request.headers['x-forwarded-proto'] === 'http') {
            return reply.redirect(`https://${request.headers.host}${request.raw.url}`)
        }
    }
})

fastify.listen(port, '0.0.0.0')

In addition to the implementation at the application level, you have to setup your two Heroku domains: One for the root domain and one for the www subdomain:

And now for the last part, the Namecheap DNS settings! These are the only two settings I have for that domain:

I hope this helps some of you out there! Stay safe :)