Usare HTTPS in locale con Angular

Angular viene avviato in genere su http://localhost:4200.

Ogni tanto il discorso di stare in HTTP mi ha dato problemi.

Volendo è possibile usare HTTPS con un certificato self-signed.

In questo articolo vediamo come fare.

Prima di tutto ho creato una cartella ssl per mettere i vari files dentro; ovviamente potete anche cambiare nome, o mettere tutto nella root.

Qui dentro ho creato un file cert.conf:

[req]
default_bits = 2048
prompt = no
default_md = sha256
x509_extensions = v3_req
distinguished_name = dn

[dn]
C = IT ##
ST = IT ##
L = Roma ##
O = Mattepuffo ##
OU = Mattepuffo dev ##
emailAddress = email@email.it ##
CN = localhost

[v3_req]
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

Vi ho messo il doppio cancelletto (##) sulle righe che dovete modificare.

A questo punto creiamo il certificato:

openssl req -new -x509 -newkey rsa:2048 -sha256 -nodes -keyout localhost.key -days 3560 -out localhost.crt -config ssl/cert.config

Verranno creato due files.

A questo dovete avviare il progetto così (potete anche modificare il comando che sta nel package.json):

ng serve --ssl --ssl-key ssl/ocalhost.key --ssl-cert ssl/localhost.crt

Andate su https://localhost:4200 e indicate al browser di procedere.

Enjoy!