http://localhost
verhält sich in der Entwicklung meist wie HTTPS
zu verstehen. Es gibt jedoch Sonderfälle.
etwa benutzerdefinierte Hostnamen oder die Verwendung sicherer Cookies in Browsern,
Richten Sie Ihre Entwicklungswebsite explizit so ein, dass sie wie HTTPS funktioniert, um
wie Ihre Website in der Produktion funktioniert. Wenn Ihre Produktionswebsite
HTTPS verwenden, sollten Sie den Wechsel zu HTTPS priorisieren.
Auf dieser Seite wird erläutert, wie du deine Website lokal mit HTTPS ausführst.
Eine kurze Anleitung finden Sie in der Kurzanleitung zu mkcert.**
Website lokal mit HTTPS und mkcert ausführen (empfohlen)
Wenn du HTTPS mit deiner lokalen Entwicklungswebsite verwenden und auf https://localhost
zugreifen möchtest, oder
https://mysite.example
(benutzerdefinierter Hostname), benötigen Sie eine
TLS-Zertifikat
die von einer vertrauenswürdigen Entität signiert wurde, die Ihr Gerät und Ihr Browser
Zertifizierungsstelle (CA):
Der Browser prüft, ob das Zertifikat Ihres Anwendungsservers von einem
bevor Sie eine HTTPS-Verbindung herstellen.
Wir empfehlen die Verwendung von mkcert, einem plattformübergreifende Zertifizierungsstelle verwenden, um Ihr Zertifikat zu erstellen und zu signieren. Weitere hilfreiche finden Sie unter Website lokal mit HTTPS ausführen: weitere Optionen.
Viele Betriebssysteme haben Bibliotheken zum Erstellen von Zertifikaten, z. B. openssl. Sie sind jedoch komplexer und zuverlässig als mkcert und nicht unbedingt plattformübergreifend sind. größeren Entwicklungsteams weniger zugänglich sind.
Einrichtung
Installieren Sie mkcert (nur einmal).
Folgen Sie dieser Anleitung. 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 Stamm-CAs mkcert hinzu.
Führen Sie im Terminal den folgenden Befehl aus:
mkcert -install
Dadurch wird eine lokale Zertifizierungsstelle (Certificate Authority, CA) generiert. Die von mkcert generierte lokale Zertifizierungsstelle gilt nur lokal auf Ihrem Gerät als vertrauenswürdig.
Generieren Sie ein von mkcert signiertes Zertifikat für Ihre Website.
Öffnen Sie in Ihrem Terminal das Stammverzeichnis Ihrer Website oder ein anderes in dem Sie Ihr Zertifikat behalten möchten.
Führen Sie dann diesen Befehl aus:
mkcert localhost
Wenn Sie einen benutzerdefinierten Hostnamen wie
mysite.example
verwenden, führen Sie Folgendes aus:mkcert mysite.example
Dieser Befehl bewirkt zwei Dinge:
- Generiert ein Zertifikat für den von Ihnen angegebenen Hostnamen.
- Mit „mkcert“ wird das Zertifikat signiert.
Ihr Zertifikat ist jetzt bereit und wurde von einer Zertifizierungsstelle signiert, dem Browser lokal vertraut.
Konfigurieren Sie Ihren Server so, dass er das gerade erstellte TLS-Zertifikat über 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 Ihren Server wie folgt (ersetzen Sie
{PATH/TO/CERTIFICATE...}
):http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
In
-S
wird Ihr Server mit HTTPS ausgeführt, während-C
das Zertifikat und-K
den Schlüssel festlegt.💻 💻 Mit einem React-Entwicklungsserver:
Bearbeiten Sie die Datei
package.json
wie folgt und ersetzen Sie dabei{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"
Beispiel: Sie haben ein Zertifikat für
localhost
im Stammverzeichnis:|-- my-react-app |-- package.json |-- localhost.pem |-- localhost-key.pem |--...
Dann sollte das
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 sollten Sie überprüfen, ob Sie Ihre Website lokal mit HTTPS ausführen. Es werden keine Browserwarnungen, weil Ihr Browser „mkcert“ als lokales Zertifikat vertraut Befugnis.
Kurzanleitung zu mkcert
So führen Sie Ihre lokale Entwicklungswebsite mit HTTPS aus:
-
mkcert einrichten
Falls noch nicht geschehen, installieren Sie mkcert beispielsweise unter macOS:
brew install mkcert
Klicken Sie auf das Kästchen Mkcert installieren. für Windows und Linux.
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 von mkcert automatisch signiert wird.
-
Entwicklungsteam für die Verwendung von HTTPS und das von Ihnen verwendete Zertifikat konfigurieren die in Schritt 2 erstellt wurden.
Du kannst jetzt in deinem Browser ohne Warnung auf https://{YOUR HOSTNAME}
zugreifen
</div>
Website lokal mit HTTPS ausführen: weitere Optionen
Im Folgenden finden Sie weitere Möglichkeiten, Ihr Zertifikat einzurichten. Diese sind in der Regel komplexer oder riskanter als mkcert.
Selbst signiertes Zertifikat
Sie können auch keine lokale Zertifizierungsstelle wie mkcert verwenden. signieren Sie das Zertifikat stattdessen selbst. Dieser Ansatz birgt ein paar Stolpersteine:
- Browser vertrauen Ihnen als Zertifizierungsstelle nicht, daher werden Warnungen angezeigt
manuell umgangen werden müssen. In Chrome können Sie das Flag
#allow-insecure-localhost
, um diese Warnung automatisch zu umgehenlocalhost
. - 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 so wie vertrauenswürdige Zertifikate. Zertifikate.
- Wenn Sie diese Technik nicht in einem Browser verwenden, müssen Sie die Zertifikatüberprüfung für Ihren Server. Ich habe vergessen, die Funktion wieder zu aktivieren in Produktion verursacht Sicherheitsprobleme.
![Screenshots der Browser, die angezeigt werden, wenn ein selbst signiertes Zertifikat verwendet wird](https://web.developers.google.cn/static/articles/how-to-use-local-https/image/screenshots-the-warnings-953f06ad1aebc.jpg?authuser=8&hl=de)
Wenn Sie kein Zertifikat angeben, wird der Wert von React und Vue's Mit den HTTPS-Optionen für den Entwicklerkonto erstellen Sie ein selbst signiertes Zertifikat unter der Das geht schnell, aber es werden dieselben Browserwarnungen und andere Probleme bei selbst signierten Zertifikaten. Glücklicherweise können Sie mit Frontend Frameworks“ integrierte HTTPS-Option und geben Sie ein lokal vertrauenswürdiges Zertifikat an die mit „mkcert“ oder ähnlich erstellt wurden. Weitere Informationen finden Sie in der mkcert with React-Beispiel.
Wenn Sie Ihre lokal ausgeführte Website in Ihrem Browser über HTTPS öffnen, werden die der Browser das Zertifikat Ihres lokalen Anwendungsservers überprüft. Wenn es dass Sie das Zertifikat selbst signiert haben, Sie als vertrauenswürdige Zertifizierungsstelle registriert sind. Weil Sie nicht, Ihr Browser kann dem Zertifikat nicht vertrauen und es wird eine Warnung angezeigt. teilt dir mit, dass deine Verbindung nicht sicher ist. Es wird trotzdem das HTTPS-Protokoll erstellt, falls Sie fortfahren, dies jedoch auf eigenes Risiko.
<ph type="x-smartling-placeholder">![Diagramm: Warum Browser selbst signierten Zertifikaten nicht vertrauen](https://web.developers.google.cn/static/articles/how-to-use-local-https/image/why-browsers-dont-trust-9aa014d2da64b.jpg?authuser=8&hl=de)
Von einer regulären Zertifizierungsstelle signiertes Zertifikat
Sie können auch ein von einer offiziellen Zertifizierungsstelle signiertes Zertifikat verwenden. Dazu gehört folgende Komplikationen:
- Sie haben mehr Einrichtungsaufwand als mit einer lokalen CA-Technik wie mkcert.
- Sie müssen einen gültigen Domainnamen verwenden, der Ihnen gehört. Das bedeutet, dass Sie
Verwenden Sie offizielle Zertifizierungsstellen für Folgendes:
<ph type="x-smartling-placeholder">
- </ph>
localhost
und andere reserviert Domainnamen wieexample
odertest
.- Alle Domainnamen, die Sie nicht verwalten.
- Ungültige Top-Level-Domains Weitere Informationen finden Sie in der Liste gültiger 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-Proxy wie ngrok. Dies birgt folgende Risiken:
- Jede Person, mit der Sie die Reverse-Proxy-URL teilen, kann auf Ihre lokale Entwicklung zugreifen Website. Dies kann hilfreich sein, um Ihr Projekt gegenüber der Kundschaft zu demonstrieren, aber es kann auch damit Unbefugte sensible Daten weitergeben können.
- Da einige Reverse-Proxy-Dienste Gebühren für die Nutzung erheben, kann die Preisgestaltung eine Rolle spielen. den von Ihnen gewählten Dienst.
- Neue Sicherheitsmaßnahmen in Browsern können Auswirkungen auf die wie diese Tools funktionieren.
Melden (nicht empfohlen)
Wenn du einen benutzerdefinierten Hostnamen wie mysite.example
in Chrome verwendest, kannst du einen
Flag, um den Browser zu zwingen, mysite.example
als sicher zu betrachten. Das sollten Sie vermeiden
aus folgenden Gründen:
- Sie müssen 100% sicher sein, dass
mysite.example
immer zu einem lokalen Standort führt Adresse. Andernfalls besteht die Gefahr, dass Anmeldedaten aus der Produktion offengelegt werden. - Dieses Flag funktioniert nur in Chrome, sodass Sie Fehler nicht browserübergreifend beheben können.
Vielen Dank für die Beiträge und das Feedback an alle Prüfer und Beitragenden, insbesondere an Ryan Sleevi, Filippo Valsorda, Milica Mihajlija und Rowan Merewood. 🙌
Hintergrund mit Hero-Image von @anandu auf Unsplash, bearbeitet.