Heroku Namecheap SSL Certificate

We recently setup SSL on Resumonk.com which is a Rails 3 application running on Heroku. Here is a quick summary of the entire process and hope it saves you some time when you are looking to enable SSL for your Rails application on Heroku.

What is SSL and why do you need it?

SSL or Secure Sockets Layer is protocol for establishing a secure (encrypted) link between server and the browser. If your app or website is using a database for storing and retrieving user generated information, you need to get SSL to ensure that the data is transmitted securely and to ensure that it is less vulnerable to tampering or forgery.
Also, displaying SSL Seal helps improve trust and it tells your customers that their data is protected.

Adding SSL certificate to your Heroku application

To use SSL for an app hosted on Heroku, you’ll need to enable SSL add-on that Heroku provides. This add-on costs $20/month. Please keep in mind that this is a recurring expense and it does not include the cost of the SSL certificate itself. You’ll need to buy that separately.

Note: If you don’t plan to use a custom domain then you can use the free SSL that Heroku provides – (https://myapp.herokuapp.com).

Here are the steps that you need to follow to add an SSL certificate to you app –

  1. Purchase SSL certificate
  2. Generate private key and CSR
  3. Provision the Heroku SSL add-on
  4. Upload the key and certificate to Heroku
  5. Update your DNS settings
  6. Update your app code to redirect https instead of http

STEP 1: Purchase SSL certificate

We bought a RapidSSL certificate from Namecheap.

Note: RapidSSL certificate ($10/year) is only valid for the root domain. If you need to secure all your subdomains (blog.domain.com or labs.domain.com), you’ll need to buy a wildcard SSL certificate.

STEP 2: Generate Private key and CSR

Before you can activate your SSL certificate, you’ll need to provide a CSR (Certificate Signing Request) to the SSL provider.

The first step to generating a CSR is to create a private key. You can use openssl for generating a private key.

On a Mac (install Homebrew first if you don’t have it installed), open up Terminal.app and use the following command.

brew install openssl

On Ubuntu, you can do –

sudo apt-get install openssl

Once you’ve installed openssl, use this command to generate a private key –

openssl genrsa -des3 -out server.pass.key 2048

You’ll be asked to enter a password.

Enter pass phrase for server.pass.key:
Verifying - Enter pass phrase for server.pass.key:

Then run this command –

openssl rsa -in server.pass.key -out server.key

The above command will create a file called server.key in your working directory. We’ll need this key to generate the CSR.

openssl req -nodes -new -key server.key -out server.csr

This is the command that will generate a CSR for you. You’ll be prompted to enter the following details –

  • Country Name: 2 Digit code. This link has a list of all accepted country codes – http://www.ssl.com/csrs/country_codes
  • State and Locality (e.g.: California, New Delhi etc)
  • Organization name (Legal/Registered Name of your company e.g.: Abhayam Software Solutions Pvt. Ltd)
  • Organizational Unit is whichever branch of your company is ordering the certificate (e.g. Marketing Department, Product Development, Software Lab)
  • Common Name – This is the most important part so be extra careful. Common Name is the domain name that you want the CSR (and the SSL certificate) for. Please note that you need to specify which URL you want – www or non-www. You cannot set the common name to example.com and expect it to secure www.example.com.
    For Resumonk, our main URL has www in it and the root url (non-www) redirects to the www url, So the common name we specified was www.resumonk.com

The previous command would have generated a file name server.csr. Open up that file in a text editor and copy everything inside the BEGIN/END block.

NOTE: The following step is only applicable for Namecheap and may vary for other SSL providers.

Login to your Namecheap account (or any other SSL provider) and navigate to your SSL dashboard – Your Account -> Manage SSL Certificates and click the “Activate” link next to your SSL certificate.

Paste the CSR code that you copied into the text box and fill in the rest of your details. For server name, choose Apache 2.

Important Note: You will have to choose an approver email from the list that is shown. You’ll have options like admin@mydomain.com, postmaster@mydomain.com, webmaster@mydomain.com etc. If you don’t have any of these email addresses created, you’ll need to do that before proceeding since Namecheap will send our a verification email to the approver email address.

Once you save all the details, you’ll receive a verification email from Namecheap (to the approver email that you specified earlier) asking you to verify that you want to active the SSL certificate.

After you verify, Namecheap will send you an email with 2 certificates – WEB SERVER CERTIFICATE and INTERMEDIATE CA. Copy both these certificates one after the other into a separate file and save it as server.crt.

Important Note: INCLUDE the BEGIN CERTIFICATE/END CERTIFICATE lines and ensure that there are 5 dashes to either side of BEGIN CERTIFICATE and END CERTIFICATE. Do not add any extra whitespaces or line breaks.

The final file should look something like this –

—–BEGIN CERTIFICATE—–
[encoded data]
—–END CERTIFICATE—–
—–BEGIN CERTIFICATE—–
[encoded data]
—–END CERTIFICATE—–

STEP 3: Provision the Heroku add-on

Now you need to provision Heroku’s add-on. Open up your terminal and cd to your project directory. Then give this command –

heroku addons:add ssl:endpoint

STEP 4: Upload the key and certificate to Heroku

Now add the certificate and private key to Heroku

heroku certs:add server.crt server.key

Here the server.crt file is the certificate we created in the last step and server.key is the private key we generated in Step 1.

If everything worked as it should, you’ll see a screen like

Adding SSL Endpoint to example... done
example now served by fuscia-1212.herokussl.com.

This is the new endpoint URL at which your domain should point.

STEP 5: Update your DNS settings

Login to your domain management panel.

If you already have a CNAME record pointing to myapp.heroku.com, change it to the new URL endpoint (fuscia-1212.herokussl.com).

If you don’t have a CNAME record, you’ll need to add your custom domain to Heroku first. To do that, follow this guide.

Now once the DNS change has propagated (this can take a while), you’ll have SSL activated on your website. Navigate to https://mydomain.com and you’ll see that the address bar turns green and shows a lock symbol.

Additional Step for Rails apps –

STEP 6: Tell Rails to use the https URL.

You’ll notice that right now, although you have got your SSL certificate to work, you can still access your app without SSL (http://mydomain.com). You need to tell Rails to use the SSL version by default.

Doing this is really easy, open up production.rb file and add this line –

config.force_ssl = true

That’s it. Now if you try access your website without ssl (http://mydomain.com), Rails will do a 301 (permanent redirect) to the https version.

One final thing to keep in mind is that if you are using social sign-in (omniauth), you might need to change the callback URL (especially for Google+).

Also check your code for places where you have referenced the absolute URL and change it to https (This usually happens in transactional emails (welcome, password-reset etc) that you send out).

That’s all there is to adding a SSL certificate to your Heroku-hosted app. Let me know if you have any questions.

PS: Resumonk can help you create a beautiful and professional resume in minutes. Try it out and do let me know how we can improve it further.

Published by Bharani Muthukumaraswamy

Bharani is a web designer/developer who specializes in front-end development.
He is currently working on his startup, Resumonk – an online resume builder