CA Signed Certificate: Localhost & App

TL;DR

This guide shows you how to create a CA-signed certificate for your localhost development environment and production application, avoiding browser warnings. We’ll cover generating a key/CSR, getting it signed by a Certificate Authority (CA), installing the certificate, and configuring your web server.

Generating a Key & CSR

1. OpenSSL Installation: Ensure OpenSSL is installed on your system. On most Linux distributions:

   sudo apt-get install openssl

   On macOS (using Homebrew):

   brew install openssl

2. Create a Private Key: This is the core of your security. Keep it safe!

   openssl genrsa -out localhost.key 2048

3. Create a Certificate Signing Request (CSR): The CSR contains information about your application and domain.

   openssl req -new -key localhost.key -out localhost.csr

   You’ll be prompted for details like Country Name, State/Province, Locality, Organization Name, Common Name (this should be localhost for development or your actual domain name for production), and email address. Fill these in accurately.

Getting the Certificate Signed

1. Choose a CA: Several CAs offer certificates, both free (Let’s Encrypt) and paid (DigiCert, Sectigo). For development, ZeroSSL is a good option for free certificates.
2. Submit your CSR: Go to the CA’s website and follow their instructions to submit your localhost.csr file. They will usually provide a web form or require you to paste the contents of the CSR into a text box.
3. Download the Certificate: Once validated, the CA will issue your certificate (usually in .crt or .pem format). Download it.

   Some CAs also provide intermediate certificates. You’ll likely need these too – download them if offered.

Installing the Certificate

1. For Localhost (Browsers): Most browsers don’t trust self-signed or even CA-signed localhost certificates by default. You’ll need to manually add the root certificate of your CA to your browser’s trusted store.
   • Chrome/Edge: Settings > Privacy and security > Security > Manage device certificates > Import.
   • Firefox: Settings > Privacy & Security > Certificates > View Certificates > Authorities > Import.
2. Web Server Configuration (Apache):
   1. Edit your Apache virtual host configuration file (e.g., /etc/apache2/sites-available/your_site.conf).
   2. Add or modify the following lines, replacing paths with your actual file locations:

      <VirtualHost *:443>
          ServerName localhost
          DocumentRoot /var/www/your_app
      
          SSLEngine on
          SSLCertificateFile /path/to/localhost.crt
          SSLCertificateKeyFile /path/to/localhost.key
          SSLCACertificateFile /path/to/intermediate.crt <-- If provided by CA
      </VirtualHost>

   3. Restart Apache:

      sudo systemctl restart apache2

3. Web Server Configuration (Nginx):
   1. Edit your Nginx configuration file (e.g., /etc/nginx/sites-available/your_site).
   2. Add or modify the following lines, replacing paths with your actual file locations:

      server {
          listen 443 ssl;
          server_name localhost;
          root /var/www/your_app;
      
          ssl_certificate /path/to/localhost.crt;
          ssl_certificate_key /path/to/localhost.key;
          ssl_trusted_certificate /path/to/intermediate.crt; <-- If provided by CA
      }

   3. Restart Nginx:

      sudo systemctl restart nginx

Testing

Visit https://localhost in your browser. If configured correctly, you should no longer see any certificate warnings.