[SOLVED] Can't get chrome to trust my self signed ssl certificate

Can't get chrome to trust my self signed ssl certificate

Context

I try to develop a ServiceWorker for my Website
The ServiceWorker registration fails because of my untrusted (self signed) cert
The url I use locally is https://mypage.local

What I tryed to let my browser trust my cert

starting chrome with flags like --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=https://mypage.local/ --allow-insecure-localhost
create a root CA and install it as trusted CA in my OS (windows)
create a new server cert with that root CA and use it for the local website (the new cert is delivered)
Firefox tells me SSL_ERROR_BAD_CERT_DOMAIN. I added SAN entries in addition to the CN to the cert
I verified my cert via https://www.sslshopper.com/csr-decoder.html and the fields are correct

The cert is still not trusted, I still get the SSL_ERROR_BAD_CERT_DOMAIN in Firefox

Any idea what I still do wrong or how I can debug my issue further?

Solution

In my case, the problem was that my certificate had no SAN entries (Subject Alternative Name) but only a CN (Common Name), which is deprecated (see for example here).

I wrote that I added SAN entries in chapter ‘What I tried’ in the question but @steffen-ullrich pointed out to me (comment on my question) that people often forget to copy these SAN entries from the CSR when creating the certificate. And that was exactly the problem.

So if you have such a problem, make sure that you add SAN entries and that they find their way into the certificate.

In the course of this bug research I realised that the process of creating a certificate with root CA and SAN entries has become easier since OpenSSL v1.1.1 and again with OpenSSL v3. The sources I have found and used have unfortunately explained the old process which I have now gone through.

Here are sources that describe the modern approach

And here are sources that helped me create the Root CA and Cert (legacy process)