Creating Trusted Local SSL Certificates for Development

• By Brendan Scullion

When developing modern web applications, running your local environment over HTTPS is often necessary. Whether you’re integrating third-party APIs, implementing OAuth flows, or testing websocket connections, having proper SSL certificates is crucial. However, dealing with untrusted certificates and constant browser warnings can be frustrating and time-consuming.

This guide will show you how to create and manage trusted SSL certificates for your local development environment, eliminating those annoying browser warnings once and for all.

Prerequisites: This guide assumes you have NGINX and local DNS configured correctly. If not, please refer to our previous guide to get started.

The Problem

Common SSL-related challenges in local development include:

  • Browser warnings about untrusted certificates (NET::ERR_CERT_AUTHORITY_INVALID)
  • Issues connecting to local backend services due to certificate trust
  • Websocket connection problems
  • Time wasted recreating certificates for different projects
  • The constant “Not Secure” warning in your browser’s address bar

The Solution

We’ll solve these issues by:

  1. Creating a local certificate authority (CA)
  2. Creating SSL certificates for each project and signing them with this CA
  3. Adding the CA to your browser’s trusted authorities
  4. Creating additional certificates signed by the same CA for future projects

Quick Setup Using makecrt

I’ve created a convenient bash script to automate this process. You can get it from Github or download it directly:

curl --location -O https://raw.githubusercontent.com/brsc2909/makecrt/main/makecrt && chmod +x makecrt

Using makecrt

The usage is straightforward - run the script as root and specify your domains as arguments. Create separate certificates for each project:

sudo ./makecrt --domains local-app.example.com local-api.example.com

Example output:

Creating extfile
Creating certificate for local-app.example.com
Signature ok
subject=C = IE, ST = Leinster, L = DUBLIN, O = Local CA beast, OU = IT, CN = local-app.example.com
Getting CA Private Key

NGINX config:
ssl_certificate_key  /etc/ssl/private/local-app.example.com.key;
ssl_certificate  /etc/ssl/certs/local-app.example.com.crt;

Adding the CA to Your Browser

Follow these steps to add the CA certificate to Chrome or other Chromium-based browsers (you only need to do this once):

  1. Open Chrome Settings and search for “certificates”
  2. Navigate to Security → Manage Certificates
  3. Go to the “Authorities” tab
  4. Click “Import” and select your CA certificate (default location: /etc/ssl/certs/myLocalRootCA.crt)
  5. Enable “Trust this certificate for identifying websites”
  6. Verify your domain appears in the trusted authorities list

Once completed, you’ll see a proper secure connection indicator instead of security warnings.

Advanced Configuration

The script can be customized in two ways:

  1. Command-line Options
Usage: ./makecrt -d [domain1, domain2...] [options]

options:
-h, --help           show brief help
-d, --domains        specify domains for certificate use
    --days          specify certificate validity period (default: 3650)
    --CA            specify local CA path (default: /etc/ssl/certs/myLocalRootCA.crt)
    --CAkey         specify local CA private key path
-pd, --private-dir   specify private key directory
-cd, --cert-dir      specify certificate directory
-e, --eliptic-curve  specify elliptic curve type (default: prime256v1)
  1. Modifying Default Values Edit these variables in the script to match your environment:
# Default configuration
DAYS=3650
CERT_DIR=/etc/ssl/certs
PRIVATE_KEY_DIR=/etc/ssl/private
e_curve=prime256v1
localRootCA=$CERT_DIR/myLocalRootCA.crt
localRootCAkey=$PRIVATE_KEY_DIR/myLocalRootCA.key
EXTFILE=/tmp/_v3.ext

# Organization details
ORG="Local CA $(hostname)"
ORG_UNIT="IT"
COUNTY="DUBLIN"
STATE="Leinster"
COUNTRY="IE"

With this setup, you’ll have a professional-grade local SSL environment that eliminates security warnings and streamlines your development workflow.

← Back to all posts