HTTPS für die lokale Entwicklung verwenden

Manchmal müssen Sie Ihre lokale Entwicklungswebsite mit HTTPS ausführen. Tools und Tipps, um dies sicher und schnell zu tun.

Maud Nalpas
Maud Nalpas

In diesem Beitrag gelten die Aussagen über localhost auch für 127.0.0.1 und [::1], da sie beide die lokale Computeradresse beschreiben, die auch als „Loopback-Adresse“ bezeichnet wird. Außerdem wird der Einfachheit halber keine Portnummer angegeben. Wenn du http://localhost siehst, solltest du es als http://localhost:{PORT} oder http://127.0.0.1:{PORT} lesen.

Wenn Ihre Produktionswebsite HTTPS verwendet, soll sich Ihre lokale Entwicklungswebsite wie eine HTTPS-Website verhalten. Wenn Ihre Produktionswebsite kein HTTPS verwendet, sollten Sie die Umstellung auf HTTPS priorisieren. In den meisten Fällen kannst du darauf vertrauen, dass sich http://localhost wie eine HTTPS-Website verhält. In einigen Fällen müssen Sie Ihre Website jedoch lokal mit HTTPS ausführen. Sehen wir uns an, wie das funktioniert.

⏩ Suchen Sie nach einer kurzen Anleitung oder waren Sie schon einmal hier? Zum Cheatsheet

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. Browser betrachten jedoch nicht jedes Zertifikat als gültig: Das Zertifikat muss von einer Entität signiert werden, die von Ihrem Browser als vertrauenswürdig eingestuft wird und als vertrauenswürdige Zertifizierungsstelle bezeichnet wird.

Sie müssen ein Zertifikat erstellen und bei einer Zertifizierungsstelle signieren, die von Ihrem Gerät und Ihrem Browser lokal als vertrauenswürdig eingestuft wird. Das Tool mkcert kann Ihnen dabei in einigen Befehlen helfen. So funktionierts:

  • Wenn Sie Ihre lokal ausgeführte Website in Ihrem Browser über HTTPS öffnen, prüft Ihr Browser das Zertifikat Ihres lokalen Entwicklungsservers.
  • Der Browser sieht, dass das Zertifikat von der von mkcert generierten Zertifizierungsstelle signiert wurde, und prüft dann, ob es als vertrauenswürdige Zertifizierungsstelle registriert ist.
  • „mkcert“ wird als vertrauenswürdige Zertifizierungsstelle aufgeführt, sodass Ihr Browser dem Zertifikat vertraut und eine HTTPS-Verbindung herstellt.
Diagramm zur Funktionsweise von mkcert.
Diagramm zur Funktionsweise von „mkcert“

mkcert und ähnliche Tools bieten mehrere Vorteile:

  • mkcert ist auf die Erstellung von Zertifikaten spezialisiert, die den Browsern entsprechen, die als gültige Zertifikate betrachtet werden. Sie wird laufend aktualisiert, um den Anforderungen und Best Practices gerecht zu werden. Daher müssen Sie keine mkcert-Befehle mit komplexen Konfigurationen oder Argumenten ausführen, um die richtigen Zertifikate zu generieren.
  • mkcert ist ein plattformübergreifendes Tool. Jeder in Ihrem Team kann sie verwenden.

Wir empfehlen das Tool „mkcert“ zum Erstellen eines TLS-Zertifikats für die lokale Entwicklung. Weitere Optionen

Viele Betriebssysteme enthalten Bibliotheken zur Erzeugung von Zertifikaten, z. B. openssl. Im Gegensatz zu mkcert und ähnlichen Tools erzeugen solche Bibliotheken möglicherweise nicht konsistent korrekte Zertifikate, erfordern möglicherweise komplexe Befehle und sind nicht unbedingt plattformübergreifend.

Achtung

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 die Zertifikate gespeichert werden sollen.

    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
    

    Der obige Befehl führt zwei Schritte aus:

    • Generiert ein Zertifikat für den von Ihnen angegebenen Hostnamen
    • Damit kann mkcert, die Sie in Schritt 2 als lokale Zertifizierungsstelle hinzugefügt haben, dieses Zertifikat signieren.

    Jetzt ist Ihr Zertifikat bereit und von einer Zertifizierungsstelle signiert, die Ihr Browser lokal als vertrauenswürdig einstuft. Sie sind fast fertig, aber Ihr Server kennt Ihr Zertifikat noch nicht.

  4. Konfigurieren Sie Ihren Server.

    Sie müssen Ihrem Server nun mitteilen, dass er HTTPS verwenden soll, da Entwicklungsserver standardmäßig HTTP verwenden und das soeben erstellte TLS-Zertifikat verwenden soll.

    Die genaue Vorgehensweise hängt von Ihrem Server ab. 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"
    

    Angenommen, Sie haben ein Zertifikat für localhost erstellt, das sich wie folgt im Stammverzeichnis Ihrer Website befindet:

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

  5. ✨ Fertig! Öffnen Sie https://localhost oder https://mysite.example in Ihrem Browser, da Ihre Website lokal über HTTPS ausgeführt wird. Es werden keine Browserwarnungen angezeigt, da Ihr Browser mkcert als lokale Zertifizierungsstelle vertraut.

Mit mkcert: Spickzettel

mkcert in Kürze

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

    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 automatisch von mkcert signiert wird.

  3. Konfigurieren Sie Ihren Entwicklungsserver für die Verwendung von HTTPS und des in Schritt 2 erstellten Zertifikats.

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

Website lokal mit HTTPS ausführen: weitere Optionen

Selbst signiertes Zertifikat

Sie können auch keine lokale Zertifizierungsstelle wie mkcert verwenden, sondern Ihr Zertifikat selbst signieren.

Achten Sie bei diesem Ansatz auf einige Fallstricke:

  • Browser vertrauen Ihnen nicht als Zertifizierungsstelle und zeigen Warnungen an, die Sie manuell umgehen müssen. In Chrome kannst du das Flag #allow-insecure-localhost verwenden, um diese Warnung bei localhost automatisch zu umgehen. Es fühlt sich ein bisschen hackig an, weil es so ist.
  • Dies ist unsicher, wenn Sie in einem unsicheren Netzwerk arbeiten.
  • Selbst signierte Zertifikate verhalten sich nicht genau wie vertrauenswürdige Zertifikate.
  • Das ist nicht unbedingt einfacher oder schneller als die Verwendung einer lokalen Zertifizierungsstelle wie mkcert.
  • Wenn Sie diese Technik nicht in einem Browser verwenden, müssen Sie möglicherweise die Zertifikatsüberprüfung für Ihren Server deaktivieren. Es wäre gefährlich, wenn es nicht in der Produktionsumgebung wieder aktiviert wird.
Screenshots der Warnungen, die Browser bei der Verwendung eines selbst signierten Zertifikats anzeigen.
Die Browserwarnungen werden angezeigt, wenn ein selbst signiertes Zertifikat verwendet wird.
Warum vertrauen Browser nicht vertrauenswürdigen Zertifikaten?

Wenn Sie eine lokal ausgeführte Website in Ihrem Browser über HTTPS öffnen, prüft Ihr Browser das Zertifikat Ihres lokalen Entwicklungsservers. Wird festgestellt, dass das Zertifikat von Ihnen selbst signiert wurde, wird überprüft, ob Sie als vertrauenswürdige Zertifizierungsstelle registriert sind. Da dies nicht der Fall ist, kann Ihr Browser dem Zertifikat nicht vertrauen. Es wird eine Warnung angezeigt, die Sie darauf hinweist, dass Ihre Verbindung nicht sicher ist. Sie können auf eigenes Risiko fortfahren – in diesem Fall wird eine HTTPS-Verbindung erstellt.

Diagramm: Warum Browser selbst signierten Zertifikaten nicht vertrauen
Warum Browser selbst signierten Zertifikaten nicht vertrauen

Von einer regulären Zertifizierungsstelle signiertes Zertifikat

Möglicherweise finden Sie auch Methoden, die darauf basieren, dass Ihr Zertifikat von einer echten Zertifizierungsstelle – nicht von einer lokalen – signiert wurde.

Beachten Sie die folgenden Punkte, wenn Sie die Verwendung dieser Techniken in Betracht ziehen:

  • Sie müssen mehr einrichten als mit einer lokalen Zertifizierungsstelle wie „mkcert“.
  • Sie müssen einen gültigen Domainnamen verwenden, der Ihnen gehört. Das bedeutet, dass Sie tatsächliche Zertifizierungsstellen nicht verwenden können, um:

Reverse-Proxy

Eine weitere Möglichkeit für den Zugriff auf eine lokal laufende Website mit HTTPS ist die Verwendung eines Reverse-Proxys wie ngrok.

Beachten Sie folgende Punkte:

  • Jeder kann auf Ihre lokale Entwicklungswebsite zugreifen, sobald Sie ihm eine mit einem Reverse-Proxy erstellte URL bereitstellen. Das kann sehr praktisch sein, wenn Sie der Kundschaft Ihr Projekt demonstrieren. Wenn Ihr Projekt vertraulich ist, kann dies auch ein Nachteil sein.
  • Möglicherweise müssen Sie den Preis berücksichtigen.
  • Neue Sicherheitsmaßnahmen in Browsern können sich auf die Funktionsweise dieser Tools auswirken.

Wenn Sie einen benutzerdefinierten Hostnamen wie mysite.example nutzen, können Sie mithilfe eines Flags in Chrome festlegen, dass mysite.example als sicher eingestuft wird. Das sollten Sie vermeiden, denn:

  • Sie müssen 100% sicher sein, dass mysite.example immer zu einer lokalen Adresse aufgelöst wird, da Sie andernfalls Produktionsanmeldedaten verlieren könnten.
  • Mit diesem Trick 🙀 lässt sich die Fehlerbehebung nicht in mehreren Browsern ausführen.

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