SEC_ERROR_INADEQUATE_KEY_USAGE in firefox for react app with HTTPS=true & HOST=xxx

Question

I have a SEC_ERROR_INADEQUATE_KEY_USAGE error in firefox for a react application created with create-react-app when I specify a custom HOST and SSL=true

To reproduce the issue:

1. create a new react app

   npx create-react-app testssl 
   

2. add a .env file with

   HTTPS=true
   HOST=test.local
   

3. ensure test.local map to 127.0.0.1 in your hosts file

   # "C:\Windows\System32\drivers\etc\hosts"
   127.0.0.1 test.local
   

4. launch the application

   npm run start
   

In chrome I have a security error but I can bypass it

In firefox I have a SEC_ERROR_INADEQUATE_KEY_USAGE and I can't find a way to bypass it :

Is there any way to bypass this error for firefox ?

I have this error with windows environment, not sure about linux.

Answer 1

I ended up adding my own self signed certificate to the project.

To generate the certificates I use the following openssl command :

openssl req -x509 -newkey rsa:4096 -sha256 -keyout test.local.key -out test.local.crt -days 4000 -new -nodes

and in my .env file I added the following line

SSL_CRT_FILE=./test.local.crt
SSL_KEY_FILE=./test.local.key
HTTPS=true
HOST=test.local

but I'm still not sure why firefox doesn't accept the certificate generated by creat-react-app