mkcert

mkcert copied to clipboard

To generate a certificate for localhost, I ran the following commands:

brew install mkcert
mkcert --install
mkcert localhost

This created the .crt and .key files, which I then used in my applications (https://localhost:4300).

However, I've noticed that when I open an application that doesn't require HTTPS, it automatically redirects to HTTPS (http://localhost:4200).

How can I prevent this automatic redirection from HTTP to HTTPS?

Its not the certificate

This redirect could be because of several things.

1. some web and proxy servers have rules to redirect http to https e.g apache has .htaccess url files
2. web browsers have started to have a builtin features to redirect http to https you can disable in the browser's config. however, the browser normally checks if the https version of the site exists if not, it stays with the http version of the site.
3. some browser plugins/extensions offer the same feature as no 2
4. if developing software it is possible that some libraries or project code can also redirect.

so it could be one or more of these. It current sounds like 1 or 4 Its also depend on what you are using in your dev environment.

I've been experiencing the same, and it's driving me nuts as well.

My setup:

• mkcert localhost, mkcert -install
• certificate is used on localhost:3000, localhost:3001 and localhost:3010.

Now, the certificate is fine and there are no errors on localhost:3000, 3001 and 3010 (in Chrome)

However, other things i run locally, such as Sanity studio (on localhost:3333) or webpack bundle analyser (on localhost:8888), will get a ERR_SSL_PROTOCOL_ERROR from Chrome.

Chrome is expecting HTTPS for all localhost connections because of the certificate. Chrome therefore redirects from http to https. https://stackoverflow.com/questions/25277457/google-chrome-redirecting-localhost-to-https

Preventing this redirect, can be done from chrome://net-internals/#hsts, by deleting localhost.

After deleting localhost from chrome://net-internals/#hsts, http://localhost:3333 will work! Yay!

However, the joy if this finally working was short lived. After visiting https://localhost:3000/ again, Chrome would re-add localhost to the HSTS set. localhost:3333 would now show a certificate error, again.

So I cant really keep deleting localhost from Chrome's HSTS cache everytime i visit my site...

I undertand this is not really a mkcert problem, but do you have any ideas to make this work? I cannot use the certificates on :3333 or :8888.

One solution that might work, is to add "whatever.yes" to my hosts file, and generate certificates for "whatever.yes", leaving localhost untouched and unharmed.

Might be a silly question but why do you want HTTP access in your app? Ultimately, you should want all data over HTTPS.

Might be a silly question but why do you want HTTP access in your app?

I really don't... I try to use certificate where possible. My issue at hand here, is that creating and trusting certificates with localhost as domain, will break any other server running on localhost, because of Chrome and HSTS.

I do not control other tools I have now, or might have in the future, that also runs on localhost... If I could configure the other tools to use my certs, that would be great, but it's not always an option...

Where did you get that

It was a question for the OP but I left it open to the both of you.

I probably don't see this issue when developing because the way I use docker and often I set up domain names for projects on local DNS or HOSTS file.

Where did you get that

It was a question for the OP but I left it open to the both of you.

I probably don't see this issue when developing because the way I use docker and often I set up domain names for projects on local DNS or HOSTS file.

Okay, no worries! Yes, a local DNS and/or hosts file will surely fix this. But it will be a real hassle to migrate my apps away from the localhost domain.

Any fix for this? Currently developing something that needs to do a request to an http backend and the network tab shows the request is also changed to https

Okay, no worries! Yes, a local DNS and/or hosts file will surely fix this. But it will be a real hassle to migrate my apps away from the localhost domain.

Have you considered the reserved .localhost TLD? E.g. test.localhost is a full domain with whatever config you want, but links to your loopback address. This means they can be on and off HSTS however you please!

(on Linux & Firefox, anyway. but I hope it works in any major browser on any major OS...)