Today, I had the necessity to embed an iframe on an HTTPS web page and most browsers now won't allow you to embed an HTTP resource on an HTTPS page raising the mixed content warning. Since the code was quite experimental, I didn't want to deploy it out of localhost. So I setup a self-signed TLS certificate for localhost that was accepted by Google Chrome browser.

Create a config.cnf file pre-filled with parameters (replacing example.com with whatever hostname you wish):

[ req ]
default_bits        = 2048
distinguished_name  = req_distinguished_name
req_extensions      = san
extensions          = san
[ req_distinguished_name ]
countryName         = US
stateOrProvinceName = NY
localityName        = NYC
organizationName    = OrgName
commonName          = example.com
[ san ]
subjectAltName      = DNS:example.com

First, we need to create a key that will be used to sign our certificate. You will be prompted for a password, which you can enter for now:

sudo openssl req \
-x509 \
-nodes \
-days 3650 \
-newkey rsa:2048 \
-keyout /etc/ssl/private/self-signed.key \
-out /etc/ssl/certs/self-signed.crt \
-subj /CN=example.com \
-reqexts san \
-extensions san \
-config config.cnf \
-sha256

Create a single file with the certificate and private key to be added into the store:

cat self-signed.key self-signed.crt > localhost.pem

Finally, add this certificate into our trusted store so that Chrome doesn't complain:

certutil -d sql:$HOME/.pki/nssdb -A -t "C,," -n "localhost" -i localhost.pem

Your browser shouldn't complain any more with your self-signed certificate successfully added into the store.