Getting Self Signed Certificate to be accepted by browsers when running Angular SPA in Express on Windows

Question

Despite many attempts to run my Angular SPA on localhost, I cannot get Chrome or Edge to accept my self signed certificate.

Create and Install certificate:

These articles on Medium by Philipp Bauknecht and Richard Russell (See edit below) describe the steps to create and install the cert and serve using SSL, but still Chrome and Edge warn that the site is not secure.

openssl genrsa -out server.key
openssl req -new -key server.key -out csr1.pem -config server.cnf
openssl x509 -req -days 9999 -in csr1.pem -signkey server.key -out server.crt -extensions req_ext -extfile server.cnf
rm csr1.pem

Ignore or bypass:

Other articles suggest the warning can be ignored or bypassed (cybercafe, stackoverflow), but I'm getting an error on a callback from Auth0 authentication provider, so must resolve the issue rather than ignore or bypass the warning.

Export and install untrusted certificate:

Pico Knowledgebase provides a process to export and install the untrusted certificate, but this hasn't worked.

Clear SSL State:

Process to clear SSL State from SSL2Buy doesn't work for me either.

Delete duplicate certificates for localhost:

The issue may relate to multiple certificates for localhost (superuser). I've deleted all certificates for localhost in Certificate Manager*, and then I've first recreated those I need for my API running locally in Visual Studio (stackoverflow), before looking again at the cert I need for the SPA.

• Run MMC, Add/Remove Snap-In, My User Account (stackoverflow)

Does cert NEED to be installed?

The command to serve the SPA indicates that it may not be necessary to install the certificate in certificate manager - the crt and key files are explicit

ng serve --host localhost --ssl --ssl-key C:\ssl\server.key --ssl-cert C:\ssl\server.crt

Cert must be installed:

However that doesn't work alone, the cert has to be installed as well as being referenced in ng serve.

However, I'm still stuck! What else?

Is there another key step to get the cert to be accepted by the browser?

PS

I've also created the cert for the SPA after deleting those for the API to be sure this isn't an issue with multiple certs for localhost.

Edit In response to comment below: If you follow the steps correctly here: Richard Russell, then you may avoid the oversight I made. More info here: phcomp.co.uk

Answer 1

The key to resolving this was in the server.cnf file used to generate the cert.

"Replace commonName and subjectAltName with your IP or localhost"

When using localhost, the subjectAltName in server.cnf must be DNS:localhost (not IP:localhost or IP:127.0.0.1)

server.cnf:

[ req ]
default_bits       = 4096
distinguished_name = req_distinguished_name
req_extensions     = req_ext
prompt             = no

[ req_distinguished_name ]
commonName         = localhost

[ req_ext ]
subjectAltName = DNS:localhost

Connection is now secure

multiple certs can co-exist to run a .NET Core API and an Angular SPA on the same machine