Safari does not connect to aliased hostname on localhost via https

Question

Since the most recent Safari update I cannot connect to my local React apps via https on localhost via local domain aliases anymore. However, I can access them via https://localhost:<someport> but domain aliases result in a

Can't connect to the server

error. It used to work flawlessly in the past... → Safari.

My Setup

// hosts

# The classic
127.0.0.1 localhost
255.255.255.255 broadcasthost
::1 localhost

# Local dev aliases
127.0.0.1 some.local.com
::1 some.local.com

I've also created certs via mkcert

$ mkcert -install
$ mkcert "*.local.com" localhost 127.0.0.1 ::1

This seemed to work, since I do not get any https security warnings on Chrome or FF anymore.

// webpack.config -> devServer

...
server: {
  type: "https",
  options: {
    key: readFileSync(resolve(__dirname, "../certs/_wildcard.local.com+3-key.pem")),
    cert: readFileSync(resolve(__dirname, "../certs/_wildcard.local.com+3.pem")),
    ca: readFileSync("<output of mkcert -CAROOT>/rootCA.pem"),
    requestCert: true,
  },
},
...

Summary

• I do not think it has something to do with the certs since it works perfectly on Chrome and FF.
• It did work BEFORE updating Safari recently...
• In Safari: I can connect to my app via https using localhost instead of the domain alias but unfortunately this is not an option

Any ideas? Any tips much appreciated! 🙌

Answer 1

Alright, found an answer even though not very satisfying.

Apple has shipped the new Safari Version (17.0) with http/3 automatically activated for "some" users. So it seems that I was one of the chosen ones but could also not find any option to disable http/3 in order to run some proper tests.

However, it seems that http/3 ignores lookups for domains listed in /etx/hosts and thus no custom domain aliases for localhost will work.

So my solution is running all my apps via http://localhost.