Developing modern web applications often means working with features that require a secure context. Your browser, third-party APIs, and security best practices all push you towards using HTTPS, even in your local development environment.
In this comprehensive guide, we’ll explore why you need localhost HTTPS, walk through the traditional methods of setting it up and demonstrate and easy way to set it up using Tunnelmole, a powerful, one-command solution to get a secure, shareable HTTPS URL for your local server quickly.
Why Do You Need HTTPS on Localhost?
Running your local server over HTTPS (Hypertext Transfer Protocol Secure) is no longer a „nice-to-have“; it’s often a necessity for several reasons:
-
Browser Feature Requirements: Many modern browser APIs will only function in a „secure context“. If you try to use them over
http://localhost
, they will fail or be disabled. These features include:- Service Workers: Essential for Progressive Web Apps (PWAs), enabling offline functionality and push notifications.
- WebRTC: For real-time communication (video/audio chat).
- Geolocation API: For accessing a user’s geographical location.
- Secure Cookies: Cookies with the
Secure
flag are only sent over HTTPS. - Web Crypto API: For performing cryptographic operations in the browser.
-
Testing Third-Party Integrations: Many services, especially payment gateways and authentication providers, use webhooks to send real-time updates to your application. These services almost always require the webhook endpoint to be a secure HTTPS URL. They will not send sensitive data to an insecure
http://
address, andlocalhost
isn’t accessible from the internet anyway. -
Achieving Dev/Prod Parity: Your production application runs on HTTPS. Your development environment should mirror production as closely as possible to avoid „it works on my machine“ issues. Running HTTPS locally helps you catch mixed content warnings (loading HTTP assets on an HTTPS page) and other security-related bugs early in the development cycle.
-
Building Trust and Professionalism: When you share a work-in-progress with a client or colleague, sending them a link that throws a big security warning doesn’t inspire confidence. A valid HTTPS URL looks professional and just works.
Method 1: The Hard Way – Creating a Self-Signed Certificate
One of the most common ways to enable localhost HTTPS
is by generating a self-signed SSL certificate. This certificate is created and signed by you, rather than a trusted Certificate Authority (CA) like Let’s Encrypt or DigiCert.
You can use a command-line tool like openssl
to generate the necessary key and certificate files.
# Generate a private key and a self-signed certificate
openssl req -x509 -newkey rsa:2048 -nodes -sha256 -keyout localhost.key -out localhost.crt -days 365
-subj "/C=US/ST=California/L=San Francisco/O=MyProject/OU=Dev/CN=localhost"
You would then configure your local web server (e.g., in Node.js, Python, or Apache) to use these localhost.key
and localhost.crt
files to serve traffic over HTTPS.
The Major Drawback: Browsers do not trust self-signed certificates by default. When you visit https://localhost
, you will be greeted with a prominent security warning like „Your connection is not private“ (NET::ERR_CERT_AUTHORITY_INVALID).
To get around this, you have to manually instruct your browser or operating system to trust your certificate. This process is cumbersome, varies between operating systems and browsers, and needs to be repeated for every new project and on every device you test with. It’s a significant and recurring hassle.
Method 2: A Better Way – Using a Local CA with mkcert
A much better approach for local-only HTTPS is to use a tool like mkcert
. This clever utility simplifies the process by creating your own local Certificate Authority (CA) and, crucially, adding it to your system’s trust stores automatically.
Here’s how it works:
- Install
mkcert
: Follow the installation instructions for your OS. - Create a local CA: Run
mkcert -install
. This command generates a local CA and configures your system and browsers to trust it. You only need to do this once. - Generate a certificate for localhost: Navigate to your project folder and run
mkcert localhost 127.0.0.1 ::1
. This creates a valid certificate (localhost-cert.pem
) and key (localhost-key.pem
) for your local environment. - Configure your server: Update your server configuration to use these new files.
This method is a vast improvement. Since the root CA is trusted by your system, the localhost
certificate it generates is also trusted, and you get a green padlock in your browser with no warnings.
However, this solution is still fundamentally local. The HTTPS URL is only accessible on your machine. You still can’t use it to test webhooks or easily share your work with others.
Anyone who you share your service with (i.e. the rest of your dev team) will need to repeat this process.
Method 3: The Easiest Way – Get an Instant localhost HTTPS
URL with Tunnelmole
What if you could bypass all certificate generation and configuration with a single command? This is where tunneling tools come in, and Tunnelmole is a fantastic open-source option.
Tunnelmole works by creating a secure tunnel from a public, HTTPS-enabled URL to your local web server. When a request hits the public URL, Tunnelmole forwards it through the tunnel to your localhost
application.
This approach gives you a valid, browser-trusted HTTPS URL without you ever having to create, sign, or manage an SSL certificate.
How to Use Tunnelmole
Let’s see how simple it is.
Step 1: Have a Local Server Running
First, make sure your local web application is running. For this example, we’ll use a basic Node.js Express server on port 3000.
// server.js
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello from my secure localhost server!');
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
Run it with node server.js
.
Step 2: Install Tunnelmole
If you have Node.js installed, the quickest way is via npm:
sudo npm install -g tunnelmole
Alternatively, for Linux, Mac, or WSL, you can use the curl script:
curl -O https://install.tunnelmole.com/xD345/install && sudo bash install
Windows users can download the tmole.exe
binary.
Step 3: Run Tunnelmole
Now, open a new terminal and run a single command, telling Tunnelmole which port your server is on:
tmole 3000
Within seconds, you’ll see output like this:
$ tmole 3000
Your Tunnelmole Public URLs are below and are accessible internet wide. Always use HTTPs for the best security
https://cqcu2t-ip-49-185-26-79.tunnelmole.net ⟶ http://localhost:3000
http://cqcu2t-ip-49-185-26-79.tunnelmole.net ⟶ http://localhost:3000
That’s it! You now have a public, secure localhost HTTPS
URL (https://cqcu2t-ip-49-185-26-79.tunnelmole.net
in this case) that securely points to your local server running on http://localhost:3000
.
You can open this URL in any browser, on any device, and you’ll see your application running with a valid SSL certificate and the reassuring padlock icon. No warnings, no configuration.
How Does Tunnelmole Work?
The magic behind Tunnelmole is a persistent WebSocket connection established between the client on your machine and a public Tunnelmole service host.
- Connection: The
tmole
client on your machine connects to the public Tunnelmole server and requests a unique public URL. - Tunneling: When a user makes a request to your public HTTPS URL, the Tunnelmole server receives it.
- Forwarding: The server sends the request down the secure tunnel to the
tmole
client on your machine. - Local Request: The client then makes a standard HTTP request to your local server (e.g.,
localhost:3000
). - Response: The response from your local server travels back along the same path to the user.
Why Tunnelmole is a Superior Solution
Using Tunnelmole for localhost HTTPS
has several distinct advantages:
- Ultimate Simplicity: It’s a single command. There are no certificates to manage, no server configs to edit, and no system trust stores to modify.
- Zero Configuration: It works out of the box with any local web server, regardless of the language or framework you’re using.
- Publicly Accessible: This is the killer feature. You can use your HTTPS URL to test webhooks from services like Stripe, Shopify, or Slack, which is impossible with a purely local setup.
- Easy Collaboration: Share the URL with teammates, designers, or clients to show your work-in-progress without deploying it.
- Real-Device Testing: Open the URL on your phone, tablet, or another computer to test the mobile and cross-browser experience accurately.
- Open Source and Self-Hostable: Trust and security are paramount. Tunnelmole is fully open-source, so you can inspect the code yourself. For maximum control and privacy, you can also self-host the Tunnelmole service on your own server.
Conclusion: Choose the Right Tool for the Job
Securing your local development environment with HTTPS is essential for modern web development. While creating self-signed certificates is a viable but clunky option, and tools like mkcert
offer a great solution for purely local work, Tunnelmole provides the fastest, most flexible, and most powerful way to get a localhost HTTPS
URL.
It not only solves the immediate problem of needing a secure context for browser features but also opens up a world of possibilities by making your local server securely accessible to the internet for webhook testing, collaboration, and real-device debugging.
By abstracting away the complexities of SSL certificates, Tunnelmole lets you focus on what you do best: building great applications. Give it a try for your next project and experience the simplicity of one-command localhost HTTPS
.
Happy (and secure) coding!