• Published:

Some projects only behave correctly over HTTPS, so a local trusted certificate is useful on macOS. The setup has two stages: create a local certificate authority and make macOS trust it, then issue a development certificate for localhost and plug it into the dev server.

Create and trust a local CA

macOS ships with openssl; if it is missing, install it through Homebrew. Start by creating a working directory and generating the CA key and certificate:

mkdir sslout
cd sslout
openssl genrsa -des3 -out rootCA.key 2048
openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

When openssl asks for details, pay attention to Common Name (eg, fully qualified host name) []:. Enter the domain you will bind to the certificate. Two key files will appear. Add rootCA.pem to the System keychain in Keychain Access, open its trust settings, and set it to Always Trust.

Prepare the server certificate

To avoid typing the same identity details for every command, create an OpenSSL config file named server.csr.cnf:

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
[email protected]
CN = localhost

Then create v3.ext for the x509 v3 extensions:

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

Generate server.key with:

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <(cat server.csr.cnf)

And sign it to produce server.crt:

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

At this point the SSL certificate files are ready.

Use it with vue-cli

In vue-cli the setting is passed through to webpack-dev-server. Point the dev server at the generated files:

devServer: {
  https: {
    key: fs.readFileSync('./ssl/server.key'),
    cert: fs.readFileSync('./ssl/server.crt'),
    ca: fs.readFileSync('./ssl/rootCA.pem')
  },
  disableHostCheck: true
}

With those paths in place, the dev server can serve over HTTPS using the locally trusted certificate.

Related Posts