Certificates created locally don't use subjectAltName for setting the DNS and fail to authenticate when running BrowserSync

[GeoffDusome]

When using BrowserSync for local development (and the https feature), using the Lando certs causes NET::ERR_CERT_COMMON_NAME_INVALID errors on Chromium browsers (Chrome, Arc, etc.). We were able to generate a new certificate using the openssl library for MacOS (see code snippet below) which includes the additional subjectAltName parameter that properly generates the DNS fields within the certificate, which allows Chromium browsers to properly recognize that the certificate is valid when using a port on the URL (testsite.lndo.site:3000).

openssl req -x509 -newkey rsa:4096 -sha256 -days 3650 \
  -nodes -keyout test.lndo.key -out test.lndo.crt -subj "/CN=Test Lando CA" \
  -addext "subjectAltName=DNS:lndo.site,DNS:*.lndo.site"

I should note that the current Lando local certificate works perfectly if you're not running BrowserSync, but only fails when adding the BrowserSync port. I'm hoping to get the certificate generation within Lando updated to include the subjectAltName so that we can continue to use the built-in Lando cert, instead of having to generate our own to get around the post issues.

I wasn't sure quite where this issue should go so please let me know if it's in the wrong place and I'll gladly move, thank you!

[reynoldsalec]

@GeoffDusome what does your Landofile look like for setting up BrowserSync?

[GeoffDusome]

@GeoffDusome what does your Landofile look like for setting up BrowserSync?

Hi @reynoldsalec, apologies that I'm going to bombard you with a link dump, but it's easiest if I provide links to our files in our theme.

Here's our .lando.yml file: https://github.com/moderntribe/moose/blob/main/.lando.yml
Note that we do not use this file to configure anything for BrowserSync.

Here's our webpack.config.js file that starts BrowserSync: https://github.com/moderntribe/moose/blob/main/webpack.config.js

And lastly, here's our browsersync.config.js file, which actually controls the options: https://github.com/moderntribe/moose/blob/main/browsersync.config.js

Let me know if this is helpful or if you need any other information. Feel free to pull down the repo and check things for yourself as well.