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

Answer 1

If you are using NextJS, just start the server like this:

next dev --experimental-https

From: https://vercel.com/guides/access-nextjs-localhost-https-certificate-self-signed

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

A very simple way is using local-ssl-proxy

    npm i -g local-ssl-proxy

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

Answer 7

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.

Answer 8

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

Answer 9

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

Answer 10

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"

Answer 11

I use Caddyserver with config like this:

:443
tls self_signed

Answer 12

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.