webpack-dev-server: Self-signed TLS certs not valid

One convenient way of getting rid of the warning screen is to enable this flag in the browser settings chrome://flags/#allow-insecure-localhost. But the certificate is still invalid and hot-reloading doesn’t work.

I used the Office add-in @creage posted. Worked like a charm and gives you a trusted cert. But I don’t know how to incorporate that into Webpack.

I’ve solved the untrusted cert warning by creating my own root CA (I think I used openssl), adding it to my trusted certs in OS & browsers, then dynamically creating a new client cert signed by my root CA and passing it to webpack-dev-server. It’d be nice if there was an option to point webpack-dev-server at my root CA and have it create the client certs for me, but it’s not hard manually.

In webpack.config.js my config is dynamically built and returned. Here are the pieces you can add to yours to get this to work. This requires the pem module.

Add this somewhere before your config:

const certificates = await getCertificates();

Add this inside your config:

https : {
  key  : certificates.key,
  cert : certificates.cert,
  ca   : certificates.ca,
},

Add this after your config:

function getCertificates() {
  const pem = require('pem');

  const keyFile  = fs.readFileSync(`${__dirname}/../path_to_your_root_ca/ca.key`, 'utf8');
  const certFile = fs.readFileSync(`${__dirname}/../path_to_your_root_ca/ca.crt`, 'utf8');
  const args     = {
    clientKey    : keyFile,
    commonName   : 'localhost',
    organization : 'Your Org',
    locality     : 'Boise',
    state        : 'ID',
    country      : 'US',
  };

  return new Promise((resolve, reject) => {
    pem.createCSR(args, function (error, results) {
      if (error) {
        throw error;
      }

      const args = {
        serviceKey         : keyFile,
        serviceCertificate : certFile,
        csr                : results.csr,
        days               : 30,
      };

      pem.createCertificate(args, function (error, keys) {
        if (error) {
          throw error;
        }

        const data = {
          key  : keys.serviceKey,
          cert : keys.certificate,
          ca   : certFile,
        };

        resolve(data);
      });
    });
  });
}

I guess you are asking if there is a way to create the cert signed by a CA cert to and allow users trust that CA certificate as a one-time operation?

Exactly. That’s how donet/kestrel solves it, you trust a root certificate which is then used by all generated development certificates.

@JohanPetersson did you try with --http2 false?

Unfortunately we are on webpack-dev-server 2.11 and I don’t see this option, but removing h2 from the array here fixed it.