How to serve a Vue application over HTTPS for local development

I need to serve a vue application over HTTPS while doing local development.

The application is being served with: npm run serve which runs: vue-cli-service serve

I have tried to create a vue.config.js file and add the following to it:

module.exports = {
    devServer: {
        port: 8080,
        https: true,
    }
}

This results in console errors in Chrome v75 such as the following: GET https://192.168.0.71:8080/sockjs-node/info?t=1564339649757 net::ERR_CERT_AUTHORITY_INVALID I'm guessing this is Chrome saying that the certificate being used when setting https to true isn't from a valid CA (maybe it's some sort of self signed thing going on in the background?)

How can I get around this? Is generating certificates via "Let's Encrypt" probably the way to go?

On another note, I have also generated a root CA private key using openssl genrsa -des3 -out rootCA.key 2048 and a self signed certificate using openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem, but I'm not sure how to tell the vue-cli-service to try and use these. However, if self signed certificates result in ERR_CERT_AUTHORITY_INVALID errors in Chrome, then there isn't much point pursuing this route

Solution

What I ended up doing was creating a shell script with this in it:

echo "Started local certificate setup script."
openssl genrsa -des3 -out rootCA.key 2048
openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 825 -out rootCA.pem
openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config server.csr.cnf
openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 825 -sha256 -extfile v3.ext
echo "Trust the certificate (add it to the system keychain): "
sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain rootCA.pem

Basically you create a root CA and have it sign your cert.

Note: the "security add-trusted-cert" step will have to be modified if you aren't on macOS. This step adds it to the macOS keychain.

v3.ext contains:

authorityKeyIdentifier = keyid, issuer
basicConstraints = CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost

server.csr.cnf contains:

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

[dn]
C=CA
ST=RandomProvince
L=RandomCity
O=RandomOrg
OU=RandomOrgUnit
[email protected]
CN = localhost

If you're including this in your project, then you'll probably also want to add the following entries to .gitignore:

*.key
*.srl
*.csr
*.pem
*.crt

In my config file (I'm using nuxt.js now) I have the following:

server: {
  port: 7000,
  host: 'localhost',
  timing: false,
  https: {
    // these files are generated by running the above shell script
    key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
    cert: fs.readFileSync(path.resolve(__dirname, 'server.crt')),
  },
},

Having a script do this is nice so that team members that might not be familiar with this sort of crypto stuff don't have to dig into the details too much and can just start writing code!