HTTPS für die lokale Entwicklung verwenden

Maud Nalpas

In den meisten Fällen verhält sich http://localhost für Entwicklungszwecke wie HTTPS. Es gibt jedoch einige Sonderfälle, z. B. bei benutzerdefinierten Hostnamen oder bei der Verwendung sicherer Cookies in verschiedenen Browsern, in denen Sie Ihre Entwicklerwebsite explizit so einrichten müssen, dass sie sich wie HTTPS verhält, um genau darzustellen, wie Ihre Website in der Produktion funktioniert. Wenn Ihre Produktionswebsite kein HTTPS verwendet, sollten Sie so schnell wie möglich auf HTTPS umstellen.

Auf dieser Seite wird erklärt, wie Sie Ihre Website lokal mit HTTPS ausführen.

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

Eine Kurzanleitung finden Sie unter mkcert-Kurzreferenz.**

Website lokal mit HTTPS ausführen – mit mkcert (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 wurde, der Ihr Gerät und Ihr Browser vertrauen. Diese Entität wird als vertrauenswürdige Zertifizierungsstelle (CA) bezeichnet. Der Browser prüft, ob das Zertifikat Ihres Entwicklungsservers von einer vertrauenswürdigen Zertifizierungsstelle signiert wurde, bevor er eine HTTPS-Verbindung herstellt.

Wir empfehlen, mkcert, eine plattformübergreifende Zertifizierungsstelle, zum Erstellen und Signieren Ihres Zertifikats zu verwenden. Weitere hilfreiche Optionen finden Sie unter Website lokal mit HTTPS ausführen – andere Optionen.

Viele Betriebssysteme enthalten Bibliotheken zum Erstellen von Zertifikaten, z. B. openssl. Sie sind jedoch komplexer und weniger zuverlässig als mkcert und nicht unbedingt plattformübergreifend, was sie für größere Entwicklerteams weniger zugänglich macht.

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 diese Datei in die Hände bekommt, kann er On-Path-Angriffe auf jede Website durchführen, die Sie besuchen. Er könnte sichere Anfragen von Ihrem Computer an jede Website abfangen, z. B. an Ihre Bank, Ihren Gesundheitsdienstleister oder soziale Netzwerke. Wenn Sie wissen müssen, wo sich rootCA-key.pem befindet, um sicherzustellen, dass sie sicher ist, führen Sie mkcert -CAROOT aus.
• Verwenden Sie mkcert nur für Entwicklungszwecke und bitten Sie Endnutzer daher niemals, mkcert-Befehle auszuführen.
• Entwicklungsteams: Alle Mitglieder Ihres Teams sollten mkcert separat installieren und ausführen (die Zertifizierungsstelle und das Zertifikat nicht speichern und teilen).

Einrichtung

1. Installieren Sie mkcert (nur einmal).

   Folgen Sie der Anleitung zum Installieren von mkcert auf Ihrem Betriebssystem. Beispiel für macOS:

   brew install mkcert
   brew install nss # if you use Firefox
   

2. Fügen Sie mkcert Ihren lokalen Stammzertifizierungsstellen hinzu.

   Führen Sie im Terminal den folgenden Befehl aus:

   mkcert -install
   

   Dadurch wird eine lokale Zertifizierungsstelle erstellt. Die von mkcert generierte lokale Zertifizierungsstelle wird nur lokal auf Ihrem Gerät als vertrauenswürdig eingestuft.

3. Generieren Sie ein Zertifikat für Ihre Website, das von mkcert signiert wurde.

   Öffnen Sie im Terminal das Stammverzeichnis Ihrer Website oder ein beliebiges Verzeichnis, in dem Sie Ihr 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 führt zwei Aktionen aus:

   • Er generiert ein Zertifikat für den von Ihnen angegebenen Hostnamen.
   • Er lässt das Zertifikat von mkcert signieren.

   Ihr Zertifikat ist jetzt fertig und von einer Zertifizierungsstelle signiert, die Ihr Browser lokal als vertrauenswürdig einstuft.

4. Konfigurieren Sie Ihren Server so, dass er HTTPS und das gerade erstellte TLS-Zertifikat verwendet.

   Wie Sie das tun, hängt von Ihrem Server ab. Hier einige Beispiele:

   👩🏻‍💻 Mit Node.js:

   server.js (ersetzen Sie {PATH/TO/CERTIFICATE...} und {PORT}):

   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 so (ersetzen Sie {PATH/TO/CERTIFICATE...}):

   http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
   

   -S führt Ihren Server mit HTTPS aus, während -C das Zertifikat und -K den Schlüssel festlegt.

   👩🏻‍💻 Mit einem React-Entwicklungsserver:

   Bearbeiten Sie package.json so 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. Sie sehen keine Browserwarnungen, da Ihr Browser mkcert als lokale Zertifizierungsstelle als vertrauenswürdig einstuft.

mkcert-Kurzreferenz

mkcert-Kurzreferenz

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

1. Richten Sie mkcert ein.

   Installieren Sie mkcert, falls noch nicht geschehen, z. B. unter macOS:

   brew install mkcert
   
   
   

   Eine Anleitung zur Installation von mkcert unter Windows und Linux finden Sie hier.

   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. Konfigurieren Sie Ihren Entwicklungsserver so, dass er HTTPS und das in Schritt 2 erstellte Zertifikat verwendet.

Sie können jetzt ohne Warnungen in Ihrem Browser auf https://{YOUR HOSTNAME} zugreifen.

Achtung: Führen Sie diese Schritte nur für Entwicklungszwecke aus und exportieren oder teilen Sie niemals die Datei rootCA-key.pem. Wenn Sie wissen müssen, wo sich diese Datei befindet, um sicherzustellen, dass sie sicher ist, führen Sie mkcert -CAROOT aus.

</div>

Website lokal mit HTTPS ausführen – andere Optionen

Es gibt auch andere Möglichkeiten, Ihr Zertifikat einzurichten. Diese sind in der Regel komplizierter oder riskanter als die Verwendung von mkcert.

Selbst signiertes Zertifikat

Sie können auch auf eine lokale Zertifizierungsstelle wie mkcert verzichten und stattdessen Ihr Zertifikat selbst signieren. Dieser Ansatz birgt einige Stolperfallen:

• Browser vertrauen Ihnen nicht als Zertifizierungsstelle. Daher werden Warnungen angezeigt, die Sie manuell umgehen müssen. In Chrome können Sie das Flag #allow-insecure-localhost verwenden, um diese Warnung für localhost automatisch zu umgehen.
• Das ist unsicher, wenn Sie in einem unsicheren Netzwerk arbeiten.
• Es 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.
• Wenn Sie diese Methode nicht im Browserkontext verwenden, müssen Sie die Zertifikatsüberprüfung für Ihren Server deaktivieren. Wenn Sie sie in der Produktion nicht wieder aktivieren, entstehen Sicherheitsprobleme.

Die Warnungen, die in Browsern angezeigt werden, wenn ein selbst signiertes Zertifikat verwendet wird.

Wenn Sie kein Zertifikat angeben, erstellen die HTTPS-Optionen des React- und Vue-Entwicklungsservers im Hintergrund ein selbst signiertes Zertifikat. Das geht schnell, aber es werden dieselben Browserwarnungen und andere Stolperfallen wie bei selbst signierten Zertifikaten angezeigt. Glücklicherweise können Sie die integrierte HTTPS-Option von Frontend-Frameworks verwenden und ein lokal vertrauenswürdiges Zertifikat angeben, das mit mkcert oder einer ähnlichen Methode erstellt wurde. Weitere Informationen finden Sie im Beispiel für mkcert mit React.

Warum vertrauen Browser selbst signierten Zertifikaten nicht?

Wenn Sie Ihre lokal ausgeführte Website in Ihrem Browser mit HTTPS öffnen, prüft der Browser das Zertifikat Ihres lokalen Entwicklungsservers. Wenn er feststellt, dass Sie das Zertifikat selbst signiert haben, prüft er, ob Sie als vertrauenswürdige Zertifizierungsstelle registriert sind. Da Sie das nicht sind, kann Ihr Browser dem Zertifikat nicht vertrauen und zeigt eine Warnung an, dass Ihre Verbindung nicht sicher ist. Wenn Sie fortfahren, wird trotzdem eine HTTPS Verbindung hergestellt, aber das geschieht auf eigenes Risiko.

Warum Browser selbst signierten Zertifikaten nicht vertrauen.

Zertifikat, das von einer regulären Zertifizierungsstelle signiert wurde

Sie können auch ein Zertifikat verwenden, das von einer offiziellen Zertifizierungsstelle signiert wurde. Das bringt folgende Komplikationen mit sich:

• Sie haben mehr Einrichtungsarbeit als bei der Verwendung einer lokalen Zertifizierungsstelle wie mkcert.
• Sie müssen einen gültigen Domainnamen verwenden, den Sie kontrollieren. Das bedeutet, dass Sie offizielle Zertifizierungsstellen nicht für Folgendes verwenden können:
  • localhost und andere reservierte Domainnamen wie example oder test.
  • Alle Domainnamen, die Sie nicht kontrollieren.
  • Ungültige Top-Level-Domains. Weitere Informationen finden Sie in der Liste der gültigen Top-Level-Domains.

Reverse-Proxy

Eine weitere Möglichkeit, mit HTTPS auf eine lokal ausgeführte Website zuzugreifen, ist die Verwendung eines Reverse-Proxys wie ngrok. Das birgt folgende Risiken:

• Jeder, mit dem Sie die Reverse-Proxy-URL teilen, kann auf Ihre lokale Entwicklungswebsite zugreifen. Das kann hilfreich sein, um Kunden Ihr Projekt zu präsentieren, aber es kann auch dazu führen, dass unbefugte Personen vertrauliche Informationen teilen.
• Einige Reverse-Proxy-Dienste sind kostenpflichtig. Die Preise können also ein Faktor bei der Auswahl des Dienstes sein.
• Neue Sicherheitsmaßnahmen in Browsern können die Funktionsweise dieser Tools beeinträchtigen.

Flag (nicht empfohlen)

Wenn Sie in Chrome einen benutzerdefinierten Hostnamen wie mysite.example verwenden, können Sie ein Flag verwenden, um den Browser zu zwingen, mysite.example als sicher zu betrachten. Das sollten Sie aus folgenden Gründen vermeiden:

• Sie müssen zu 100% sicher sein, dass mysite.example immer in eine lokale Adresse aufgelöst wird. Andernfalls riskieren Sie, Produktionsanmeldedaten preiszugeben.
• Dieses Flag funktioniert nur in Chrome. Sie können also nicht browserübergreifend debuggen.

Vielen Dank an alle Reviewer und Mitwirkenden für ihre Beiträge und ihr Feedback, insbesondere an Ryan Sleevi, Filippo Valsorda, Milica Mihajlija und Rowan Merewood. 🙌

Hintergrund des Hero-Images von @anandu auf Unsplash, bearbeitet.