http://localhost
verhält sich zu Entwicklungszwecken meistens wie HTTPS. Es gibt jedoch Sonderfälle wie benutzerdefinierte Hostnamen oder die Verwendung sicherer Cookies in verschiedenen Browsern, in denen du deine Entwicklungswebsite explizit so einrichten musst, dass sie sich wie HTTPS verhalten, um die Funktionsweise deiner Website in der Produktion genau darzustellen. Wenn Ihre Produktionswebsite kein HTTPS verwendet, sollten Sie den Wechsel zu HTTPS priorisieren.
Auf dieser Seite wird erläutert, wie Sie Ihre Website lokal mit HTTPS ausführen.
Eine kurze Anleitung finden Sie in der Kurzanleitung zu mkcert.**
Website lokal mit HTTPS mit mkcert ausführen (empfohlen)
Wenn Sie HTTPS mit Ihrer lokalen Entwicklungswebsite verwenden und auf https://localhost
oder https://mysite.example
(benutzerdefinierter Hostname) zugreifen möchten, benötigen Sie ein TLS-Zertifikat, das von einer Entität signiert ist, die Ihr Gerät und Ihr Browser als vertrauenswürdige Entität bezeichnet und als vertrauenswürdige Zertifizierungsstelle (CA) bezeichnet wird.
Der Browser prüft, ob das Zertifikat Ihres Entwicklungsservers von einer vertrauenswürdigen Zertifizierungsstelle signiert ist, bevor eine HTTPS-Verbindung hergestellt wird.
Wir empfehlen, zum Erstellen und Signieren Ihres Zertifikats die plattformübergreifende Zertifizierungsstelle mkcert zu verwenden. Weitere hilfreiche Optionen finden Sie unter Website lokal mit HTTPS ausführen: weitere Optionen.
Viele Betriebssysteme enthalten Bibliotheken zum Erstellen von Zertifikaten, z. B. openssl. Sie sind jedoch komplexer und weniger zuverlässiger als mkcert. Außerdem sind sie nicht unbedingt plattformübergreifend, sodass größere Entwicklerteams weniger darauf zugreifen können.
Einrichtung
Installieren Sie mkcert (nur einmal).
Folgen Sie der instructions zur Installation von mkcert auf Ihrem Betriebssystem. Zum Beispiel unter macOS:
brew install mkcert brew install nss # if you use Firefox
Fügen Sie Ihren lokalen Root-Zertifizierungsstellen das mkcert hinzu.
Führen Sie im Terminal den folgenden Befehl aus:
mkcert -install
Dadurch wird eine lokale Zertifizierungsstelle generiert. Die mit mkcert generierte lokale Zertifizierungsstelle wird nur lokal auf Ihrem Gerät als vertrauenswürdig eingestuft.
Generiere ein von mkcert signiertes Zertifikat für deine Website.
Rufen Sie in Ihrem Terminal das Stammverzeichnis Ihrer Website oder das Verzeichnis auf, in dem Sie das Zertifikat speichern möchten.
Führen Sie dann diesen Befehl aus:
mkcert localhost
Wenn Sie einen benutzerdefinierten Hostnamen wie
mysite.example
verwenden, führen Sie folgenden Befehl aus:mkcert mysite.example
Dieser Befehl hat zwei Funktionen:
- Generiert ein Zertifikat für den von Ihnen angegebenen Hostnamen.
- Lassen Sie mkcert das Zertifikat signieren.
Das Zertifikat ist jetzt bereit und wird von einer Zertifizierungsstelle signiert, die Ihr Browser lokal als vertrauenswürdig einstuft.
Konfigurieren Sie Ihren Server so, dass das soeben erstellte TLS-Zertifikat HTTPS verwendet.
Die genaue Vorgehensweise hängt von Ihrem Server ab. Hier einige Beispiele:
🌎 💀 Mit Knoten:
server.js
({PATH/TO/CERTIFICATE...}
und{PORT}
ersetzen):const https = require('https'); const fs = require('fs'); const options = { key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'), cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'), }; https .createServer(options, function (req, res) { // server code }) .listen({PORT});
🎁 🎃 Mit http-server:
Starten Sie den Server wie folgt (ersetzen Sie
{PATH/TO/CERTIFICATE...}
):http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
-S
führt deinen Server mit HTTPS aus, während-C
das Zertifikat und-K
den Schlüssel festlegt.GoDaddy 🎃 Mit einem React-Entwicklungsserver:
Bearbeiten Sie
package.json
wie folgt und ersetzen Sie{PATH/TO/CERTIFICATE...}
:"scripts": { "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
Wenn Sie beispielsweise ein Zertifikat für
localhost
im Stammverzeichnis Ihrer Website erstellt haben:|-- my-react-app |-- package.json |-- localhost.pem |-- localhost-key.pem |--...
Dann sollte Ihr
start
-Skript so aussehen:"scripts": { "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
😝 🎃 Weitere Beispiele:
Öffnen Sie
https://localhost
oderhttps://mysite.example
in Ihrem Browser, um zu prüfen, ob Sie Ihre Website lokal mit HTTPS ausführen. Es werden keine Browserwarnungen angezeigt, da Ihr Browser mkcert als lokale Zertifizierungsstelle vertraut.
Kurzanleitung zu mkcert
So führen Sie Ihre lokale Entwicklungswebsite mit HTTPS aus:
-
Richten Sie mkcert ein.
Falls noch nicht geschehen, installieren Sie mkcert, z. B. unter macOS:
brew install mkcert
Anleitung für Windows und Linux unter mkcert installieren
Erstellen Sie dann eine lokale Zertifizierungsstelle:
mkcert -install
-
Erstellen Sie ein vertrauenswürdiges Zertifikat.
mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
Dadurch wird ein gültiges Zertifikat erstellt, das mkcert automatisch signiert.
-
Konfigurieren Sie Ihren Entwicklungsserver für die Verwendung von HTTPS und des in Schritt 2 erstellten Zertifikats.
Sie können jetzt in Ihrem Browser ohne Warnungen auf https://{YOUR HOSTNAME}
zugreifen
</div>
Website lokal mit HTTPS ausführen: weitere Optionen
Es gibt noch weitere Möglichkeiten, Ihr Zertifikat einzurichten. Dies ist in der Regel komplizierter oder riskanter als die Verwendung von mkcert.
Selbst signiertes Zertifikat
Sie können auch keine lokale Zertifizierungsstelle wie mkcert verwenden, sondern Ihr Zertifikat selbst signieren. Dieser Ansatz birgt einige Schwierigkeiten:
- Browser vertrauen Ihnen nicht als Zertifizierungsstelle, sodass Warnungen angezeigt werden, die Sie manuell umgehen müssen. In Chrome können Sie das Flag
#allow-insecure-localhost
verwenden, um diese Warnung beilocalhost
automatisch zu umgehen. - Dies ist unsicher, wenn Sie in einem unsicheren Netzwerk arbeiten.
- Das ist nicht unbedingt einfacher oder schneller als die Verwendung einer lokalen Zertifizierungsstelle wie mkcert.
- Selbst signierte Zertifikate verhalten sich nicht genau wie vertrauenswürdige Zertifikate.
- Wenn Sie dieses Verfahren nicht in einem Browser verwenden, müssen Sie die Zertifikatsüberprüfung für Ihren Server deaktivieren. Wenn Sie sie in der Produktionsumgebung nicht aktivieren, führt das zu Sicherheitsproblemen.
Wenn Sie kein Zertifikat angeben, erstellen die HTTPS-Optionen für den Entwicklungsserver von React und Vue ein selbst signiertes Zertifikat. Dies geht zwar schnell, hat aber die gleichen Browserwarnungen und andere Fallstricke bei selbst signierten Zertifikaten. Glücklicherweise können Sie die integrierte HTTPS-Option von Frontend-Frameworks verwenden und ein lokal vertrauenswürdiges Zertifikat angeben, das mit mkcert oder einem ähnlichen Zertifikat erstellt wurde. Weitere Informationen finden Sie im Beispiel mkcert mit React.
Wenn Sie eine lokal ausgeführte Website in Ihrem Browser über HTTPS öffnen, prüft der Browser das Zertifikat Ihres lokalen Entwicklungsservers. Wenn festgestellt wird, dass Sie das Zertifikat selbst signiert haben, wird geprüft, ob Sie als vertrauenswürdige Zertifizierungsstelle registriert sind. Da dies nicht der Fall ist, kann Ihr Browser dem Zertifikat nicht vertrauen. In diesem Fall wird eine Warnung angezeigt, die Sie darauf hinweist, dass Ihre Verbindung nicht sicher ist. Die HTTPS-Verbindung wird weiterhin erstellt, wenn Sie fortfahren. Dies geschieht jedoch auf eigenes Risiko.
Von einer regulären Zertifizierungsstelle signiertes Zertifikat
Sie können auch ein von einer offiziellen Zertifizierungsstelle signiertes Zertifikat verwenden. Das hat folgende Komplikationen:
- Sie müssen mehr Einrichtungsschritte ausführen als bei der Verwendung einer lokalen Zertifizierungsstelle wie mkcert.
- Sie müssen einen gültigen Domainnamen verwenden, den Sie kontrollieren. Das bedeutet, dass Sie keine offiziellen Zertifizierungsstellen für Folgendes verwenden können:
localhost
und andere reservierte Domainnamen wieexample
odertest
.- Alle Domainnamen, die Sie nicht verwalten
- Ungültige Top-Level-Domains. Weitere Informationen finden Sie in der Liste der gültigen Top-Level-Domains.
Reverse-Proxy
Eine weitere Möglichkeit für den Zugriff auf eine lokal ausgeführte Website mit HTTPS ist die Verwendung eines Reverse-Proxys wie ngrok. Dies birgt folgende Risiken:
- Jede Person, für die Sie die Reverse-Proxy-URL freigeben, kann auf Ihre lokale Entwicklungswebsite zugreifen. Dies kann hilfreich sein, wenn Sie Ihr Projekt Kunden vorführen möchten, aber es kann auch dazu führen, dass Unbefugte vertrauliche Informationen teilen.
- Einige Reverse-Proxy-Dienste berechnen Gebühren für die Nutzung, sodass die Preise ein Faktor bei Ihrer Dienstauswahl sein können.
- Neue Sicherheitsmaßnahmen in Browsern können sich auf die Funktionsweise dieser Tools auswirken.
Flag (nicht empfohlen)
Wenn Sie in Chrome einen benutzerdefinierten Hostnamen wie mysite.example
verwenden, können Sie mit einem Flag erzwingen, dass der Browser mysite.example
als sicher einstuft. Das solltest du jedoch vermeiden. Dies hat folgende Gründe:
- Sie müssen 100% sicher sein, dass
mysite.example
immer in eine lokale Adresse aufgelöst wird. Andernfalls riskieren Sie, dass Anmeldedaten für die Produktionsphase offengelegt werden. - Dieses Flag funktioniert nur in Chrome, Sie können also nicht browserübergreifend debuggen.
Vielen Dank für die Beiträge und das Feedback an alle Rezensenten und Beitragenden, insbesondere an Ryan Sleevi, Filippo Valsorda, Milica Mihajlija und Rowan Merewood. 🙌