setup_local_ssl.md

This guide is based on https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/

1. Generate rootCA.key:

openssl genrsa -des3 -out rootCA.key 2048

2. Generate rootCA.pem root certificate:

openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

3. Trust the root certificate: Using OSX (need to research the equivalent in Linux), Keychain Access > Certificates > File > Import Items, import the rootCA.pem certificate. Double click the imported certificate, open the "Trust" section and change the "When using this certificate:" dropdown to "Always Trust".

4. Generate certificate for localhost:

   • 4.1. Save OpenSSL configuration file below as 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
   

   • 4.2. Create v3.ext configuration file:

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

   • 4.3. Generate server.key:

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

   • 4.4. Generate server.crt:

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

5. Enable Chrome to accept invalid certificates for localhost (don't know why but only accepting the root certificate didn't work for me):

Open chrome://flags/#allow-insecure-localhost and enable Allow invalid certificates for resources loaded from localhost.

6. Enable api2 to use https:

In src/js/http-server/get.js, replace return app; with:

const https = require('https');
const fs = require('fs');
const path = require('path');


const certOptions = {
key: fs.readFileSync(path.resolve('path/to/server.key')),
cert: fs.readFileSync(path.resolve('path/to/server.crt'))
};

return https.createServer(certOptions, app);

7. Enable api1 to use https:

In app/app.js replace

var server = require('http');
// ...
server = server.createServer(app);

With:

var server = require('https'); // Notice the change from 'http' to 'https'
// ...
const fs = require('fs');
const path = require('path');


const certOptions = {
key: fs.readFileSync(path.resolve('path/to/server.key')),
cert: fs.readFileSync(path.resolve('path/to/server.crt'))
};

server = server.createServer(certOptions, app);

8. Enable frontend to use https:

Run webpack-dev-server with:

NODE_ENV=development webpack-dev-server --history-api-fallback --config webpack.config.v1.js --https --key='path/to/server.key' --cert='path/to/server.crt' --cacert='path/to/rootCA.pem'

Everyting should be set now!