How to create a https server on localhost

Question

I followed the tutorial below to create a https server https://docs.nodejitsu.com/articles/HTTP/servers/how-to-create-a-HTTPS-server/

and the program runs without errors

but when I can not open https://localhost:8000 in my chrome

it always get a ERR_SSL_PROTOCOL_ERROR

Bettis

Checking that https works is part of developing a website these days. Humble developers use localhost. I think the question is a good one. – Maryn

It may be a somewhat better fit to Webmaster.SE, since it is more about setting up the environment, rather than coding as such. – Guay

Link to tutorial now broken. – Choe

Answer 1

Well one quick way to do this is with ngrok.

It's really easy to use and only takes few seconds to run. It is as simple as downloading the correct ngrok agent for your system version. Unzip and run ngrok.exe. It will open a command line type of window. Make sure your Apache server or the one you use is running.

Then to only listen on an HTTPS tunnel endpoint run the following

ngrok http -bind-tls=true site.dev:80

or on whatever port you need https to be installed.

Open browser and type https://localhost/myApp you will see it works.

And if you type http://localhost/myApp it also works.

Shikoku

This doesn't work. Error: You may only specify one port to tunnel to on the command line, got 3: [http -bind-tls=true site.dev:80] – Stake

what's site.dev here? – Manutius

@Manutius It looks like that is referring to, and I'm quoting from the ngrok --help docs, "forward traffic to example.com:8000". Or in this case, "to site.dev:80". I instead used ngrok http 3000 -subdomain=custom -bind-tls=true, then went to https://custom.ngrok.io on my local. – Pilcher

It has solved my problems, I was trying in other ways and finally found a way to go forward locally... – Hatcher

Running this command on Windows gives unknown flag: --bind-tls, anyone know how to get past this? – Peggypegma

@EricHasegawa without checking the ngrok docs I can imagine that running https is not free anymore, so you have to pay/subscribe. – Sosthenna

PM from ngrok here. The default for the ngrok agent is https, so you don't need the --bind-tls flag. Also, https is free for ngrok. – Schweiz

Answer 2

I use Caddyserver with config like this:

:443
tls self_signed

Tillotson

Answer 3

You need to do two things:

• generate a self-signed SSL certificate and
• add it to the trusted certificates

Managed to do this on a macOS like so:

• In order to generate the SSL certificate, run the follosing command in a terminal (according to the instructions from Let's Encrypt):

openssl req -x509 -out localhost.crt -keyout localhost.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=localhost' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

• And to add the certificate to the trusted certificates, ran the following command (suggested on this blog):

sudo security add-trusted-cert -d -r trustRoot -k "/Library/Keychains/System.keychain" "/private/tmp/certs/certname.cer"

Garrick

Sorry, is the downvote due to the macOS specific solution? I thought it would be straight forward to find the way to achieve that on other OSs, having an example. Should I make the response OS-independent? – Garrick

If it's not about that, please let me know if I'm wrong so that I won't make the same mistake... – Garrick

I get an error: Error reading file /private/tmp/certs/certname.cer - I don't seem to have a certs folder ? – Sheeree

The first command does not generate the /private/tmp/certs/certname.cer file expected by the second. – Revelation

@StanJames and Matt I get the same error on Mac: ***Error reading file /private/tmp/certs/certname.cer Error reading file /private/tmp/certs/certname.cer – Sosthenna

This does not cure SSL_PROTOCOL_ERROR. – Choe

Answer 4

A very simple way is using local-ssl-proxy

    npm i -g local-ssl-proxy

    local-ssl-proxy --source 3001 --target 3000

Insecticide

Is the idea here to run two processes in parallel? The simple HTTP server, and also the local-ssl-proxy? – Maxima

Works fine, you just need to use sudo for installation. > sudo npm i -g local-ssl-proxy – Heredes

Chrome 126 says Not Secure – Disafforest

Answer 5

If this is meant for testing and you don't need a valid cert (which seems to be the case since you're using "localhost") you can use a "self-signed" cert, just make sure to configure nginx to point to those.

I could explain the details, but there's actually a great post about that on Digital Ocean community tutorials:

https://www.digitalocean.com/community/tutorials/how-to-create-a-self-signed-ssl-certificate-for-nginx-in-ubuntu-16-04

just be sure to adapt the port (443) if you want to listen on 8000.

Fortepiano

Answer 6

I finally set up my create-react-app https dev server

the reason why I'm doing this is to test device motion API on a mobile device.

install mkcert https://github.com/FiloSottile/mkcert

brew install mkcert

mkcert -install

generate cert files.

mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "<LAN_IP_ADDRESS>"

use LAN IP address instead of "localhost", because we will open our https page on a mobile device that has connected to the same WiFi.

create a .env file to set env variables

HTTPS=true
SSL_CRT_FILE=./.cert/cert.pem
SSL_KEY_FILE=./.cert/key.pem

start the dev server

npm start

last but not least, install the cert file on the mobile device, the .pem file generated by mkcert is located in ~/Library/Application Support/mkcert in my case.

install cert file on an Android device

https://support.google.com/pixelphone/answer/2844832?hl=en

install cert file on an iOS device

serve the .pem file on a static server, and open the file address on Safari

Bettis

Answer 7

Assuming you are using node.js, then http-server has -S or --ssl with -C and -K to enable https.

Ptyalism

Just tried this but http-server doesn't support passphrases so not sure how this would even work. – Marino

Keep in mind http-server is good for dev usage, but not necessarily good for production usage. Passphrases is not a must for TLS/SSL mode. – Ptyalism

I wasn't using for production, I had issue creating self-signing certificates without passphrase – Marino

Then it will just work as I have been using it that way for a long time. – Ptyalism

Answer 8

easy way: you can go to chrome://flags/

and search Insecure origins treated as secure

in box below enter you`re domain than you want run without https errors or problems

Cranwell

This does not cure SSL_PROTOCOL_ERROR. – Choe

Answer 9

The solution provided by Balloon Fight is absolutely what I was looking for and it works. But the command mentioned didn't work for me, so here is what worked for me.

I am using Lubuntu 20.04 LTS (64-bit).

Lubuntu is a lightweight Linux flavor using Debian, Ubuntu and LXDE as its base.

Steps for OSX would probably be similar. Steps for Windows and Ubuntu GNOME are also mentioned.

---

1. Go to ngrok and create an account.

2. Download ngrok and install.

For Windows, just unzip the file and open it. It'll run in cmd.

For Ubuntu GNOME, you would probably be able to run the file directly in terminal.

For Lubuntu (or if previous didn't work for you). Move the file as follows:

mv "path/to/ngrok" "/usr/bin/"

3. If the file had directly opened up in terminal or cmd. Copy and paste the command from your profile on ngrok into cmd or terminal. The command looks like this:

   ./ngrok authtoken <your_auth_token>

If you are on Lubuntu, or if the file did not open directly in terminal. Change directory as follows:

cd "/usr/bin/"

And then copy and paste the command from your profile on ngrok into terminal. The command looks like this:

./ngrok authtoken <your_auth_token>

4. Run your server. Nodejs or what you usually use.

5. If you are still in the same directory as 'ngrok' file. Copy and paste the following command into terminal or cmd:

   ngrok http 3000 -host-header="localhost:3000"

Change 3000 to the port you are using for the local server.

If you are out of 'ngrok' file's directory. Open it up in terminal or cmd.

For Lubuntu, use the following command to change directory:

cd "/usr/bin/"

Then run the command:

ngrok http 3000 -host-header="localhost:3000"

Change 3000 to the port you are using for the local server.

I got to know about this command from this video.

6. Copy and paste the HTTPS link, in the second 'Forwarding' row, to your browser.

The link looks something like this: https://12fab5c82c57.ngrok.io

For the next time you are required to do it. Just repeat step 4, 5 and 6.

Blanchette

It would be nice to have a solution that doesn't use ngrok because there is a 2 hour timeout on the dynamically created hostnames, and secondly, to bypass this requires a paid membership which is $20-25/month. – Phytophagous

Answer 10

One more option:

npx https-localhost

The https://www.npmjs.com/package/https-localhost package depends on having npm installed, of course, and takes care of generating the required certificate and trusting it locally.

To serve an arbitrary path on an arbitrary port, you might do something like:

PORT=10000 npx https-localhost ~/my-experiment

Maxima

Answer 11

you can create a virtual host with https. if you are using a Wamp server, open SSL and create a virtual host. you can watch this video as well https://youtu.be/D5IqDcHyXSQ

uncomment and set path openssl.cafile= in php.in

Hydrocellulose