HTTPS für die lokale Entwicklung verwenden

Maud Nalpas

In den meisten Fällen verhält sich http://localhost zu Entwicklungszwecken wie HTTPS. Es gibt jedoch einige Sonderfälle, z. B. benutzerdefinierte Hostnamen oder die Verwendung sicherer Cookies in Browsern, in denen du deine Entwicklungswebsite explizit so einrichten musst, dass sie sich wie HTTPS verhält, damit die Funktionsweise deiner Website in der Produktion genau wiedergegeben wird. Wenn Ihre Produktionswebsite nicht HTTPS verwendet, sollten Sie sie so schnell wie möglich auf HTTPS umstellen.

Auf dieser Seite wird erläutert, wie du deine Website lokal mit HTTPS ausführst.

Eine kurze Anleitung finden Sie in der mkcert-Kurzanleitung.**

Website lokal mit HTTPS und 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 wurde, der Ihr Gerät und Browser vertrauen. Diese Entität wird als vertrauenswürdige Zertifizierungsstelle (CA) bezeichnet. Der Browser prüft vor dem Erstellen einer HTTPS-Verbindung, ob das Zertifikat Ihres Anwendungsservers von einer vertrauenswürdigen Zertifizierungsstelle signiert ist.

Wir empfehlen die Verwendung von mkcert, einer plattformübergreifenden Zertifizierungsstelle, um Ihr Zertifikat zu erstellen und zu signieren. 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ässig als mkcert und nicht unbedingt plattformübergreifend. Daher sind sie für größere Entwicklerteams weniger zugänglich.

Einrichtung

1. Installieren Sie mkcert (nur einmal).

   Folgen Sie der 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 generiert. Die von mkcert generierte lokale Zertifizierungsstelle ist nur lokal auf Ihrem Gerät vertrauenswürdig.

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

   Rufen Sie in Ihrem Terminal das Stammverzeichnis Ihrer Website oder ein anderes Verzeichnis auf, 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 Folgendes aus:

   mkcert mysite.example
   

   Mit diesem Befehl werden zwei Dinge ausgeführt:

   • Generiert ein Zertifikat für den angegebenen Hostnamen.
   • Mit „mkcert“ wird das Zertifikat signiert.

   Ihr Zertifikat ist jetzt fertig und wurde von einer Zertifizierungsstelle signiert, die von Ihrem Browser lokal als vertrauenswürdig eingestuft wird.

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

   Die Details dazu hängen von deinem Server ab. Hier einige Beispiele:

   💻 💻 Mit Knoten:

   server.js (ersetzt {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 den 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
       |--...
   

   Das start-Script sollte dann 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 Ihre Website lokal mit HTTPS ausgeführt wird. Sie sehen keine Browserwarnungen, da Ihr Browser mkcert als lokale Zertifizierungsstelle vertraut.

Kurzreferenz für mkcert

Kurzreferenz für mkcert

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 für Windows und Linux finden Sie 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 von mkcert automatisch signiert wird.

3. Konfigurieren Sie Ihren Entwicklungsteam so, dass HTTPS und das in Schritt 2 erstellte Zertifikat verwendet werden.

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 komplizierter oder riskanter als die Verwendung von mkcert.

Selbst signiertes Zertifikat

Sie können auch entscheiden, keine lokale Zertifizierungsstelle wie mkcert zu verwenden, und stattdessen Ihr Zertifikat selbst signieren. Dieser Ansatz birgt einige Stolperfallen:

• Da Sie von Browsern nicht als Zertifizierungsstelle vertraut werden, werden Warnungen angezeigt, die Sie manuell überspringen müssen. In Chrome können Sie das Flag #allow-insecure-localhost verwenden, um diese Warnung auf localhost automatisch zu umgehen.
• Das ist unsicher, wenn Sie in einem unsicheren Netzwerk arbeiten.
• Die Verwendung einer öffentlichen Zertifizierungsstelle 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 in einem Browserkontext verwenden, müssen Sie die Zertifikatsüberprüfung für Ihren Server deaktivieren. Wenn Sie vergessen, die Funktion in der Produktion wieder zu aktivieren, kann das zu Sicherheitsproblemen führen.

Wenn Sie kein Zertifikat angeben, wird in den HTTPS-Optionen des React- und Vue-Entwicklungsservers ein selbst signiertes Zertifikat erstellt. Das geht zwar schnell, aber es sind dieselben Browserwarnungen und andere Fallstricke von selbst signierten Zertifikaten zu beachten. 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 Tool erstellt wurde. Weitere Informationen finden Sie im Beispiel mkcert mit React.

Warum vertrauen Browser selbst signierten Zertifikaten nicht?

Wenn Sie Ihre 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 Sie das nicht sind, kann Ihr Browser dem Zertifikat nicht vertrauen und zeigt eine Warnung an, dass Ihre Verbindung nicht sicher ist. Die HTTPS-Verbindung wird trotzdem hergestellt, wenn Sie fortfahren. Dies geschieht jedoch auf eigenes Risiko.

Zertifikat, das von einer regulären Zertifizierungsstelle signiert wurde

Sie können auch ein von einer offiziellen Zertifizierungsstelle signiertes Zertifikat verwenden. Dies hat folgende Nachteile:

• Sie haben mehr Einrichtungsaufwand als bei der Verwendung eines lokalen CA-Verfahrens wie mkcert.
• Sie müssen einen gültigen Domainnamen verwenden, den Sie verwalten. Das bedeutet, dass Sie für Folgendes keine offiziellen Zertifizierungsstellen verwenden können:
  • localhost und andere reservierte Domainnamen wie example oder test
  • Alle Domainnamen, die nicht Ihnen gehören.
  • Ungültige Top-Level-Domains. Weitere Informationen finden Sie in der Liste gültiger Top-Level-Domains.

Reverse-Proxy

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

• Jeder, mit dem Sie die Reverse-Proxy-URL teilen, kann auf Ihre lokale Entwicklungswebsite zugreifen. Das kann hilfreich sein, um Ihr Projekt Kunden zu präsentieren, aber auch dazu führen, dass Unbefugte vertrauliche Informationen weitergeben.
• Da einige Reverse-Proxy-Dienste Gebühren für die Nutzung erheben, können die Preise bei der Wahl des Dienstes eine Rolle spielen.
• Neue Sicherheitsmaßnahmen in Browsern können sich auf die Funktionsweise dieser Tools auswirken.

Melden (nicht empfohlen)

Wenn Sie in Chrome einen benutzerdefinierten Hostnamen wie mysite.example verwenden, können Sie mit einem Flag festlegen, dass der Browser mysite.example als sicher betrachten soll. Vermeiden Sie dies aus folgenden Gründen:

• Sie müssen sich zu 100% sicher sein, dass mysite.example immer in eine lokale Adresse aufgelöst wird. Andernfalls besteht das Risiko, dass Produktionsanmeldedaten preisgegeben werden.
• Dieses Flag funktioniert nur in Chrome. Sie können also nicht plattformübergreifend debuggen.

Vielen Dank für die Beiträge und das Feedback an alle Rezensenten und Mitwirkenden – insbesondere an Ryan Sleevi, Filippo Valsorda, Milica Mihajlija und Rowan Merewood. 🙌

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