HTTPS für die lokale Entwicklung verwenden

Maud Nalpas

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.

Hinweis :In diesem Beitrag gelten die Aussagen zu localhost auch für 127.0.0.1 und [::1], da sie beide die lokale Computeradresse (auch Loopback-Adresse genannt) beschreiben. Der Einfachheit halber sind in dieser Anleitung keine Portnummern angegeben. Wenn Sie http://localhost sehen, sollten Sie es als http://localhost:{PORT} oder http://127.0.0.1:{PORT} lesen.

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.

Achtung:

• Exportieren oder teilen Sie niemals die Datei rootCA-key.pem, die von mkcert automatisch erstellt wird, wenn Sie mkcert -install ausführen. Wenn ein Angreifer Zugriff auf diese Datei erhält, kann er On-Path-Angriffe auf jede Website ausführen, die Sie besuchen. Sie könnten sichere Anfragen von Ihrem Computer an jede Website abfangen, z. B. bei Ihrer Bank, Ihrem Gesundheitsdienstleister oder bei sozialen Netzwerken. Wenn du wissen möchtest, wo sich rootCA-key.pem befindet, um sicherzugehen, dass es sicher ist, führe mkcert -CAROOT aus.
• Verwenden Sie „mkcert“ nur für Entwicklungszwecke. Bitten Sie Endnutzer außerdem nie, „mkcert“-Befehle auszuführen.
• Entwicklungsteams: Alle Mitglieder Ihres Teams sollten mkcert separat installieren und ausführen (die Zertifizierungsstelle und das Zertifikat dürfen nicht gespeichert und freigegeben werden).

Einrichtung

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

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

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

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

   • Angular-Entwicklungsserver
   • Python

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

Kurzanleitung zu mkcert

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

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

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

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

Achtung : Tun Sie dies nur für Entwicklungszwecke und exportieren oder teilen Sie die Datei rootCA-key.pem niemals. Wenn Sie wissen möchten, wo sich diese Datei befindet, um zu prüfen, ob sie sicher ist, führen Sie mkcert -CAROOT aus.

</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 bei localhost 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.

Die Browserwarnungen werden angezeigt, wenn ein selbst signiertes Zertifikat verwendet wird.

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.

Warum vertrauen Browser nicht vertrauenswürdigen Zertifikaten?

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.

Warum Browser selbst signierten Zertifikaten nicht vertrauen

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

Hero-Image-Hintergrund von @anandu auf Unsplash, bearbeitet