HTTPS für die lokale Entwicklung verwenden

Maud Nalpas

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

1. 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
   

2. 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.

3. 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.

4. 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:

   • Angular-Entwicklungsserver
   • Python

5. Öffnen Sie https://localhost oder https://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

Kurzanleitung zu mkcert

So führen Sie Ihre lokale Entwicklungswebsite mit HTTPS aus:

1. 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

2. 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.

3. 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 umgehen localhost.
• 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.

<ph type="x-smartling-placeholder">

</ph>

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.

Warum vertrauen Browser selbst signierten Zertifikaten nicht?

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">

</ph>

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 wie example oder test.
  • 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.