How To Add SelfSigned Certificate to Chrome / Mozilla

Question

First of all please ignore this question if its too simple or useless.

I am new to TLS and am trying to implement the SSL for my secure data transmission between my client and server. My backend is in Springboot and my front end is in Angular 4.

For Springboot i have used the below this to makes it https:

server.port=8443
server.ssl.key-alias=secure-server
server.ssl.key-store-password=secret
server.ssl.key-store=classpath:server-keystore.jks
server.ssl.key-store-provider=SUN
server.ssl.key-store-type=JKS
server.ssl.trust-store= classpath:server-truststore.jks
server.ssl.trust-store-password: secret
server.ssl.enabled= true 

And, for angular 4 i have created ssl folder inside project and place two files i.e:

• ssl/server-public.cer
• ssl/server.key

and configured this command inside package.json inside scripts,

scripts: {
"start": "ng serve --ssl true --ssl-cert 'ssl/server-public.cer' --ssl-key 'ssl/server.key' --live-reload false",
}

Now after doing all these my fronted and my backed is https enabled,

But, when i try to open the UI in browser and put the credientials to login to my application i am getting below error in mozilla

An error occurred during a connection to localhost:8443.

SSL peer cannot verify your certificate.

Error code: SSL_ERROR_BAD_CERT_ALERT

Also , the below error in chrome,

Request URL: https://localhost:8443/url
Referrer Policy: no-referrer-when-downgrade
Provisional headers are shown
Access-Control-Request-Headers: authorization
Access-Control-Request-Method: GET
Origin: https://localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

So, as an quick fix what i did ??

• I open chrome browser.
• Then i put my backed url in chrome browser and i asked me to add exception for the untrusted certificate.
• After this i opened my UI and try to login its calling the backed apis without any issue.
• But, still problem exists in mozilla.

NOTE: I am using self signed certificate.

Distinctly

Firefox uses their own certificate store, whereas chrome uses the OS' store. So you also need to add the certificates to the mozilla's store – Woolly

@Woolly yes i got to know this wiki.mozilla.org/… but can you guide me like in real world how i will add the certificate because there my client will access the backend using the webui. So, again it will be a problem there . Because client will not put the backend url in the browser. – Distinctly

If you use a valid certificate in production, this should not be an issue – Woolly

@Distinctly I am using a similar front end backend configuration; could you point me to the link where you have configured your front end to make the secure calls to te backend. I have made changes to spring boot. I am using self-signed certificate too. – Vidda