Lokales HTTPS für die Entwicklung aktivieren

Die meisten Frontend-Entwickler gehen davon aus, dass sie HTTPS lokal benötigen, um Browser-APIs wie Service Worker oder Geolocation zu nutzen. Das ist allerdings ein Missverständnis – Browser behandeln localhost bereits als sicheren Kontext, sodass diese APIs problemlos über einfaches HTTP funktionieren. Es gibt jedoch echte Situationen, in denen Sie tatsächlich lokales HTTPS benötigen: Testen von OAuth-Callback-URLs, Arbeiten mit Cookies in einer produktionsähnlichen Umgebung, Entwicklung mit einem benutzerdefinierten Hostnamen oder präzise Nachbildung des Produktionsverhaltens. Dieser Artikel zeigt Ihnen, wie Sie es sauber einrichten.

Wann Sie tatsächlich lokales HTTPS benötigen

Bevor Sie nach einem Zertifikat greifen, fragen Sie sich, ob Sie tatsächlich eines benötigen. http://localhost wird von allen gängigen Browsern als potenziell vertrauenswürdiger Ursprung behandelt. Service Worker, Kamerazugriff und die meisten Secure-Context-APIs funktionieren ohne jegliche HTTPS-Einrichtung. Sie können dieses Verhalten in den Browser-Kompatibilitätsdaten auf webstatus.dev überprüfen.

Sie benötigen möglicherweise dennoch echtes lokales HTTPS, wenn:

• Sie Cookie-Verhalten unter Bedingungen testen, die der Produktion entsprechen, insbesondere mit Secure-Cookies auf Nicht-Localhost-Hostnamen
• Sie OAuth- oder OIDC-Flows mit Callback-URLs testen, die mit einem registrierten HTTPS-Ursprung übereinstimmen müssen
• Sie mit einem benutzerdefinierten Hostnamen wie app.localhost anstelle von localhost entwickeln
• Sie auf einem mobilen Gerät im selben Netzwerk testen müssen
• Ihr Frontend und Backend beide lokal laufen und über HTTPS kommunizieren müssen, um das Produktionsverhalten zu replizieren

Wenn nichts davon zutrifft, überspringen Sie die Einrichtung und halten Sie die Dinge einfach.

Warum selbstsignierte Zertifikate nicht gut funktionieren

Der naheliegende erste Instinkt ist, ein selbstsigniertes Zertifikat zu generieren. Das Problem: Browser vertrauen Zertifikaten nur, wenn sie von einer bekannten Zertifizierungsstelle signiert sind. Ein selbstsigniertes Zertifikat löst die Warnung „Ihre Verbindung ist nicht privat” aus, und Sie müssen jedes Mal durchklicken – oder die Zertifikatsüberprüfung vollständig deaktivieren, was schlechte Gewohnheiten schafft.

Der richtige Ansatz besteht darin, eine lokale Zertifizierungsstelle zu erstellen, der Ihr System und Ihre Browser vertrauen, und dann von dieser CA signierte Zertifikate auszustellen. Genau das macht mkcert.

Einrichten vertrauenswürdiger lokaler Zertifikate mit mkcert

mkcert ist ein konfigurationsfreies Tool, das eine lokale CA erstellt, sie im Vertrauensspeicher Ihres Systems registriert und von ihr signierte Zertifikate ausstellt. Browser vertrauen diesen Zertifikaten ohne Warnungen.

Schritt 1: mkcert installieren

Auf macOS:

brew install mkcert
brew install nss  # required for Firefox

Unter Linux verwenden Sie Ihren Paketmanager oder folgen der mkcert-Installationsanleitung. Unter Windows verwenden Sie Chocolatey oder Scoop.

Schritt 2: Die lokale CA registrieren

mkcert -install

Dies erstellt eine Root-CA und fügt sie dem Vertrauensspeicher Ihres Systems hinzu. Sie müssen dies nur einmal pro Rechner durchführen.

Schritt 3: Ein Zertifikat für Ihren Hostnamen generieren

mkcert localhost
# oder für einen benutzerdefinierten Hostnamen:
mkcert app.localhost

Dies erzeugt zwei Dateien: ein Zertifikat (.pem) und einen privaten Schlüssel (-key.pem). Halten Sie diese aus der Versionskontrolle heraus – fügen Sie sie zu Ihrer .gitignore hinzu.

Konfigurieren Ihres Dev-Servers für die Verwendung von HTTPS

Wie Sie das Zertifikat an Ihren Dev-Server übergeben, hängt von Ihren Tools ab.

Vite – der einfachste Weg, mit vite-plugin-mkcert:

import mkcert from 'vite-plugin-mkcert'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [mkcert()]
})

Das Plugin übernimmt automatisch die Zertifikatsgenerierung und Server-Konfiguration.

Vite (manuell):

import fs from 'fs'
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('./localhost-key.pem'),
      cert: fs.readFileSync('./localhost.pem'),
    }
  }
})

Next.js – verwenden Sie das Flag next dev --experimental-https, das in neueren Versionen verfügbar ist, oder konfigurieren Sie manuell einen benutzerdefinierten Node.js-HTTPS-Server mit denselben Zertifikatsdateien.

Node.js (beliebiges Framework):

const https = require('https')
const fs = require('fs')

https.createServer({
  key: fs.readFileSync('localhost-key.pem'),
  cert: fs.readFileSync('localhost.pem'),
}, app).listen(3000)

Wichtig: Teilen oder committen Sie niemals die Datei rootCA-key.pem, die mkcert generiert. Wenn jemand diese Datei erhält, kann er vertrauenswürdige Zertifikate für jede Domain auf Ihrem Rechner ausstellen. Führen Sie mkcert -CAROOT aus, um herauszufinden, wo sie gespeichert ist.

Ein Sicherheitshinweis zu Node.js

Wenn Ihr lokales Backend HTTPS-Anfragen an andere lokale Dienste stellt, vertraut Node.js Ihrer mkcert-CA nicht automatisch – es verwendet seine eigene gebündelte Liste vertrauenswürdiger Autoritäten anstelle des System-Vertrauensspeichers. Beheben Sie dies, indem Sie eine Umgebungsvariable setzen:

export NODE_EXTRA_CA_CERTS="$(mkcert -CAROOT)/rootCA.pem"

Fügen Sie dies zu Ihrem Shell-Profil (.bashrc, .zshrc, etc.) hinzu, damit es über Sitzungen hinweg bestehen bleibt.

Fazit

HTTPS lokal zu aktivieren ist nicht etwas, das jedes Projekt benötigt – aber wenn Sie es benötigen, reicht ein selbstsigniertes Zertifikat nicht aus. mkcert gibt Ihnen in wenigen Minuten ordnungsgemäß vertrauenswürdige Localhost-Zertifikate, ohne Browser-Warnungen oder Workarounds. Richten Sie es einmal ein, verweisen Sie Ihren Dev-Server auf die generierten Dateien, und Ihre lokale Umgebung verhält sich genau wie die Produktion.

FAQs

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.