How to serve a Vue application over HTTPS for local development

Question

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

Sanity

Visit https://192.168.0.71:8080/ in your browser and add an exemption for the invalid cert. – Booty

I used minica (also available via brew on mac), generated the cert via minica --domains '*.foo.com' (in my case i needed the wildcard), and added it to my keychain. – Dingle

Answer 1

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!

Sanity

Answer 2

Go to your network tab in the Chrome console.

Double click on the failing https://192.168.0.71:8080/sockjs-node/info?t=1564339649757 (Opens in new tab)

Accept exemption for the invalid cert

Vinita

Answer 3

Not too sure what your webpack configuration is, but mine has a dev-server.js file inside the build folder. To make https work on the local machine, I had to replace the line const server = app.listen(port) with the following code:

const https = require('https');
const fs = require('fs');
const options = {
  key: fs.readFileSync('./certs/server.key'),
  cert: fs.readFileSync('./certs/server.cert')
}
const server = https.createServer(options, app).listen(port);

Note that you might need to change the path to your certificates.

Also change const uri = 'http://localhost:' + port to const uri = 'https://localhost:' + port

Ser

Answer 4

As long as you have, at least, self signed certificates and keys then all you would have to do is run the command "npm run serve --https"

Eratosthenes

Answer 5

LEts Encrypt solved it for me. I just generated a certificate for my localhost, added that to gitignore and snap. Error gone. Try this: https://letsencrypt.org/docs/certificates-for-localhost/

Foreandafter

Answer 6

You can use mkcert https://github.com/FiloSottile/mkcert

It will create a fake CA certificate for your localhost and you can configure your local server to use it

Rationale

Answer 7

simply add this into your vue.config.js

module.exports = {
  ...
  devServer: {
    https: true
  }
}

Aorangi