Add Self-Signed SSL To Google Chrome on Ubuntu 16.04

Self-Signed SSLThere are plenty of times when you are working on a website that uses SSL and you need to work on that site locally in your own development environment. Usually you just set things up not to run on SSL locally because it’s generally less trouble than getting SSL working on your local web server. Sometimes, however, you really need a local development environment that supports SSL. Here is how to do it for free with a self-signed SSL certificate.

UPDATED: April 22, 2017 – SubjectAltName

Chrome released an update recently that requires the SSL certificate to list the various domains you are using for your wildcard certificate under the Subject Alt Names section of your certificate. So, I’m updating this post to show you how to do that.

The Big Picture

I’m setting up a wildcard SSL certificate to use for local development with my wildcard virtual host configuration on nginx. This will let you spin up new sites using an SSL certificate without ever having to mess with /etc/hosts file or server configurations. I’m going to be using the local development domain lee.dev. After completing this, to create a new development site, Just create a new directory and your site will be available at https://<dir_name>.lee.dev.

openssl Configuration

The trick to this whole thing lies in the openssl.cnf file. Set up a temporary directory to work in at ~/tmp/ssl just too keep all these files together. Then, after generating the cert and key files, we’ll move them to where they need to be.

So… make a copy of your main openssl.cnf file to work with:

Now, open the copy of openssl.cnf and add (or uncomment) this line from the [v3_req] section of the file:

Then, add this section to the end of the [v3_req] section:

Generate Self-Signed SSL Certificate

I am going to generate a key file and certificate for my local development domain lee.dev. You would replace lee.dev with whatever your domain is, or you could just use file names like server.key and server.crt – whatever fits your needs. The names of the files aren’t really very important other than for your own organizational needs.

The end result of all of this is your lee.key file and your lee.crt file which you will use in your nginx (or Apache) virtual host configuration. If you are creating a self-signed SSL certificate for a wildcard subdomain (like I am doing) then you will want to be sure to enter *.lee.dev when asked for your fully qualified domain name (FQDN) when creating your SSL certificate.

Here is what my nginx server block looks like. The key things to note, with regard to the SSL certificate, are:

  • listen 443;
  • ssl on;
  • ssl_certificate /etc/ssl/lee.crt;
  • ssl_certificate_key /etc/ssl/lee.key;

Be sure to restart nginx to load your new configuration.

Getting Google Chrome To Accept Your Self-Signed Certificate on Ubuntu 16.04

This is done differently on different platforms. I am working on Ubuntu 16.04. If you are using any linux based setup you will need to use the certutil command line tool for this. If you don’t have that command line tool, run this:

Now, navigate to your development website in your Google Chrome browser. You will see that the https: part of the URL is all red-X-ed out. Now we want to add our self-signed SSL certificate to Google Chrome so we can trust ourselves and not see the annoying security warnings for our local development.

Here’s what to do:

  • click the lock icon with an X,
  • choose Certificate Information
  • go to Details tab
  • Click on Export… (save as a file)

For me, the file saved as -.lee.dev because I created a wildcard SSL certificate for the domain lee.dev. It doesn’t matter what the file name is, just make note of what the file name is so you can use it in the next command.

The following command will add the certificate (where YOUR_FILE is your exported file):

To see if it actually worked, you can list all of your certificates with this command:

Now, when you go to your site you should see that Google Chrome trusts your self-signed SSL certificate.

Removing A Certificate

If you need to delete a certificate do the following:

where -.lee.dev is the name of your certificate. To see a list of all your certificates and their names use this command:

Resources

I learned this series of steps from the following sources:

2 thoughts on “Add Self-Signed SSL To Google Chrome on Ubuntu 16.04

  1. Very easy to follow instructions. Worked first time!

    On CentOS the configuration file is here: “/etc/pki/tls/openssl.cnf”.

  2. Mark Alexa says:

    Getting error line saying: “certutil: function failed: SEC_ERROR_BAD_DATABASE: security library: bad database.”

Leave a Reply

Your email address will not be published. Required fields are marked *