How to use SSL with Vue CLI for local development?

Question

I understand to use https with Vue CLI I can set "https: true" under devServer in a vue.config.js file, but I also need a self signed certificate.

I've tried generating a self signed one using OpenSSL and using the following in my vue.config.js file to target:

const fs = require('fs');

module.exports = {
    devServer: {
        port: '8081',
        https: {
            key: fs.readFileSync('./certs/server.key'),
            cert: fs.readFileSync('./certs/server.cert'),
        },
    },
};

Chrome confirms it's using my certificate but still shows https as "Not secure"

How can I make chrome assess my self signed certificate as secure when providing it via Vue CLI?

Are you trying to use a cert with the subject name of 'localhost'? Cuz...........that'll have to be self signed. If you want to use a public cert to protect your site, you need to get a cert for "vue-gui.mydomain.com" (or whatever the URL is), a wildcard cert would also work... but in no way would a public cert provider give you a cert for 'localhost'.. — Matt Oestreich, Apr 23 '19 at 14:22
For what URL are you trying to generate a cert for? Do you have a local cert authority? [Please see this link for more info](https://letsencrypt.org/docs/certificates-for-localhost/) - typically generating a cert for 'localhost' is not a good thing.. — Matt Oestreich, Apr 23 '19 at 14:45
[mkcert](https://github.com/FiloSottile/mkcert) makes it this trivial. It will generate a root CA and install the cert into the trusted stores for Chrome and Firefox. — Brian Lee, Apr 23 '19 at 15:43
if on Chrome see this answer: https://stackoverflow.com/a/31900210/3660269 — Godsayah, Oct 01 '19 at 20:27

score 8 · Answer 1 · answered Nov 06 '19 at 08:36

8

Simply enter this in your Chrome

chrome://flags/#allow-insecure-localhost

Set to Enabled, restart Chrome, and you're good to go.

answered Nov 06 '19 at 08:36

ssten

1,848
1
16
28

1

Not if you are using a virtual host. – digout Jun 14 '20 at 18:04

score 6 · Answer 2 · answered Nov 27 '20 at 13:22

My problem was that everybody talks about putting the cert properties in the "https" child configuration node, but this doesn't work, you hve to put it in the devServer config node:

module.exports = {
devServer: {
    port: '8081',
    https: {
       key: fs.readFileSync('./certs/server.key'),
          --> this is WRONG

This is the correct way:

module.exports = {
  devServer: {
    disableHostCheck: true,
    port:8080,
    host: 'xxxxxx',
    https: true,
    //key: fs.readFileSync('./certs/xxxxxx.pem'),
    //cert: fs.readFileSync('./certs/xxxxxx.pem'),
    pfx: fs.readFileSync('./certs/xxxxxx.pfx'),
    pfxPassphrase: "xxxxxx",
    public: 'https://xxxxxx:9000/',
    https: true,
    hotOnly: false,
   }
}

Yeah, that is interesting. Official documentation for Webpack.JS states otherwise; but this solution works. Thanks. — Muhammed Kadir, May 02 '21 at 14:39

score 4 · Answer 3 · answered Jun 02 '20 at 20:52

4

Use the network path rather than loopback or localhost. For example

https://192.168.2.210:8080/

works fine, while

https://localhost:8080/ and https://127.0.0.1:8080 balk at the certificate problem.

answered Jun 02 '20 at 20:52

Andy

41
3

This simply works, thanks I also needed to change my Java API address (.env.dev) to 127.0.0.1:8081 to stop the HTTP 307 redirection to HTTPS – Alexandre Dec 02 '21 at 19:27

score 1 · Answer 4 · answered Dec 22 '20 at 22:54

You are doing right, but you also have to add the self-signed cert inside certification authorities of your browser, as it is self-signed.

Instead of using a self-signed certificate, you can also create a root certificate, and then generate a localhost or other server identifier certificate. I recommend this solution because this way you can generate certificates for all non production environments and import only one custom certification authority.

There are many sites where you can find how to do it, one of them I think it's very clear is How to create an HTTPS certificate for localhost domains. Basically you have to follow these steps described in that link:

Generate certification authority key:

openssl req -x509 -nodes -new -sha256 -days 1024 -newkey rsa:2048 -keyout RootCA.key -out RootCA.pem -subj "/C=US/CN=Example-Root-CA"

Here we have to change the parameters as we wish, mainly -sub parameter.

Generate certificate for certification authority

openssl x509 -outform pem -in RootCA.pem -out RootCA.crt
Generate key for localhost

openssl req -new -nodes -newkey rsa:2048 -keyout localhost.key -out localhost.csr -subj "/C=US/ST=YourState/L=YourCity/O=Example-Certificates/CN=localhost.local"

Where you have to change -subj as you need or leave it that way.

Generate localhost certificate by creating a certificate config file and request openssl to generate it.

This is the certificate config file:

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

And this is the command to generate the certificate:

openssl x509 -req -sha256 -days 1024 -in localhost.csr -CA RootCA.pem -CAkey RootCA.key -CAcreateserial -extfile domains.ext -out localhost.crt

Once you have the certificate, you have to import the certification authority on your preferred browser. You can, also, follow 3 and 4 steps for every server or virtual machine you need for development and use them without needing to import new certification authorities in your browser.

score 1 · Answer 5 · answered Feb 04 '21 at 18:40

If you have legit certificates Chad Carter gives a good explanation here: https://stackoverflow.com/a/57226788/2363056

The steps are as follows:

create vue.config.js in your projects root (if not there already)
add the following code to it:

const fs = require('fs')

module.exports = {
    devServer: {
    port:8080,
    host: 'example.com',
    https: true,
    key: fs.readFileSync('/etc/ssl/keys/example.com.pem'),
    cert: fs.readFileSync('/etc/ssl/keys/example.com/cert.pem'),
    https: true,
    hotOnly: false,
    }
}

when serving your project, ensure https is enabled (ie. $ vue-cli-service serve --https true)

score 0 · Answer 6 · answered Mar 26 '21 at 01:01

0

I use the mkcert to create trusted https cert on windows OS. mkcert.

Last thing you should do is openning your OS explorer, click the install.bat file

answered Mar 26 '21 at 01:01

kevin Sue

41
3

How to use SSL with Vue CLI for local development?

6 Answers6