IF you want to create your own certificate and add to the trusted keychain in MAC
We’ll be using OpenSSL to generate all of our certificates.
Step 1: Root SSL certificate
Step 2: Trust the root SSL certificate
Step 3: Domain SSL certificate
Step 4: Use your new SSL certificate
# Step 1: Root SSL certificate
openssl genrsa -des3 -out rootCA.key 2048
openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem
# Step 2: Trust the root SSL certificate
Before you can use the newly created Root SSL certificate to start issuing domain certificates, there’s one more step. You need to to tell your Mac to trust your root certificate so all individual certificates issued by it are also trusted.
Keychain Access on your Mac and go to the Certificates category in your System keychain. Once there, import the rootCA.pem using File > Import Items. Double click the imported certificate and change the “When using this certificate:” dropdown to Always Trust in the Trust section.
Your certificate should look something like this inside Keychain Access if you’ve correctly followed the instructions till now.
# Step 3: Domain SSL certificate
The root SSL certificate can now be used to issue a certificate specifically for your local development environment located at localhost.
Create a new OpenSSL configuration file server.csr.cnf so you can import these settings when creating a certificate instead of entering them on the command line.
[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
Create a v3.ext file in order to create a X509 v3 certificate. Notice how we’re specifying subjectAltName here.
authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
Create a certificate key for localhost using the configuration settings stored in server.csr.cnf. This key is stored in server.key.
openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )
A certificate signing request is issued via the root SSL certificate we created earlier to create a domain certificate for localhost. The output is a certificate file called server.crt.
openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext
# Step 4 Use your new SSL certificate
You’re now ready to secure your localhost with HTTPS. Move the server.key and server.crt files to an accessible location on your server and include them when starting your server.
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "project-falcon:build",
"ssl": true,
"sslKey": "src/assets/sslcertificate/server.key",
"sslCert": "src/assets/sslcertificate/server.crt"
}
}
Clear the cache in Google chrome and restart the browser, also delete the cache and temp files in mac
Now we can use ng serve -o
Reference
https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/