Skip to content

Instantly share code, notes, and snippets.

@pgilad
Last active March 27, 2024 12:59
Show Gist options
  • Save pgilad/63ddb94e0691eebd502deee207ff62bd to your computer and use it in GitHub Desktop.
Save pgilad/63ddb94e0691eebd502deee207ff62bd to your computer and use it in GitHub Desktop.
Generate SSL Certificate for use with Webpack Dev Server (OSX)
#!/usr/bin/env bash
# openssl req \
# -newkey rsa:4096 \
# -x509 \
# -nodes \
# -keyout private.pem \
# -new \
# -out private.crt \
# -subj /CN=localhost \
# -reqexts SAN \
# -extensions SAN \
# -config <(cat /System/Library/OpenSSL/openssl.cnf \
# <(printf '[SAN]\nsubjectAltName=DNS:localhost')) \
# -sha512 \
# -days 365
openssl req -config ssl.conf -new -sha256 -newkey rsa:2048 -nodes -keyout private.key -x509 -days 3650 -out private.crt
sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain private.crt

Generate private key

$ openssl genrsa -out private.key 4096

Generate a Certificate Signing Request

openssl req -new -sha256 \
    -out private.csr \
    -key private.key \
    -config ssl.conf 

Generate the certificate

openssl x509 -req \
    -days 3650 \
    -in private.csr \
    -signkey private.key \
    -out private.crt \
    -extensions req_ext \
    -extfile ssl.conf

Add the certificate to keychain and trust it:

sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain private.crt

Create a pem file from crt

openssl x509 -in private.crt -out private.pem -outform PEM

Run webpack dev server

npm run webpack-dev-server -- --open --https --cert private.pem --key private.key

PROFIT $$

[ req ]
default_bits = 4096
distinguished_name = req_distinguished_name
req_extensions = req_ext
[ req_distinguished_name ]
countryName = IL
countryName_default = GB
stateOrProvinceName = Center
stateOrProvinceName_default = England
localityName = Tel Aviv
localityName_default = Brighton
organizationName = CA
organizationName_default = Hallmarkdesign
organizationalUnitName = BlazeMeter
commonName = localhost
commonName_max = 64
commonName_default = localhost
[ req_ext ]
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
Copy link

ghost commented Dec 5, 2018

Generate a Certificate Signing Request
doesn't work. Mojave.

@arasmussen
Copy link

arasmussen commented Mar 19, 2019

@atilkan: Make sure you save an ssl.conf file in the current directory.

@aranair
Copy link

aranair commented May 3, 2019

I don't think you need to convert it into PEM format before giving it to webpack-dev-server

@matrunchyk
Copy link

matrunchyk commented May 15, 2019

@pgilad Thank you! I agree that PEM is not required. In fact, they are totally identical here :)

@imhvost
Copy link

imhvost commented Jun 4, 2019

Add the certificate to keychain and trust it (Windows):
certutil -addstore -f "ROOT" private.crt

@sureshvv
Copy link

sureshvv commented Nov 12, 2019

sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain private.crt

security: command not found

on ubuntu 18..04

https://askubuntu.com/questions/645818/how-to-install-certificates-for-command-line/859887

@pgilad
Copy link
Author

pgilad commented Nov 12, 2019

sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain private.crt

security: command not found

on ubuntu 18..04

It's only tested/working on OSX

@nelson6e65
Copy link

nelson6e65 commented Nov 17, 2019

There is an excellent package to achieve this automagically:

https://github.com/FiloSottile/mkcert

@anandchakru
Copy link

I just had to do the following with mkcert:

brew install mkcert
mkcert -install
# cd to code directory
mkcert localhost
webpack-dev-server --cert ./localhost.pem --key ./localhost-key.pem

@Hillsie
Copy link

Hillsie commented Jan 31, 2020

sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain private.crt

Prefer this version [https://askubuntu.com/questions/73287/how-do-i-install-a-root-certificate]

@marcoarruda
Copy link

sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain private.crt

security: command not found

on ubuntu 18..04

https://askubuntu.com/questions/645818/how-to-install-certificates-for-command-line/859887

What about Ubuntu 16.04?

@robquinn
Copy link

robquinn commented Aug 4, 2020

I would add one more thing to this gist in order to make it perfect...


Windows support.


specifically:

how to import the certificate into the Windows Trusted Root Store.


Here, I even got what you need:

Add the certificate to the Windows Trusted Root Store:

Open up PowerShell with Administrative Privileges and then...

Import-Certificate -FilePath "C:\Users\<your_username>\<path_to_cert>\private.crt" -CertStoreLocation Cert:\LocalMachine\Root

Here's The Docs on Import-Certificate

@xaddict
Copy link

xaddict commented Jul 30, 2021

Late to the party but would love a way to make stronger certificates as Firefox has started complaining that "This site makes use of a SHA-1 Certificate; it’s recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1."

@Twiggeh
Copy link

Twiggeh commented May 4, 2022

Unfortunately following this results in

localhost uses an unsupported protocol.
ERR_SSL_VERSION_OR_CIPHER_MISMATCH

@ErikGMatos
Copy link

I just had to do the following with mkcert:

brew install mkcert
mkcert -install
# cd to code directory
mkcert localhost
webpack-dev-server --cert ./localhost.pem --key ./localhost-key.pem

it worked perfectly for me, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment