HTTPS für die lokale Entwicklung verwenden

Maud Nalpas

Meistens 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 verschiedenen Browsern, bei denen Sie Ihre Entwicklungswebsite explizit so einrichten müssen, dass sie sich wie HTTPS verhält, um die Funktionsweise Ihrer Website in der Produktion genau darzustellen. Wenn Ihre Produktionswebsite kein HTTPS verwendet, sollten Sie so schnell wie möglich auf HTTPS umstellen.

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

Eine kurze Anleitung finden Sie in der mkcert-Kurzübersicht.**

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

Wir empfehlen, mkcert, eine plattformübergreifende Zertifizierungsstelle, zu verwenden, 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, was sie für größere Entwicklerteams weniger zugänglich macht.

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 zu Ihren lokalen Root-CAs hinzu.

    Führen Sie im Terminal den folgenden Befehl aus:

    mkcert -install

    Dadurch wird eine lokale Zertifizierungsstelle (CA) generiert. Ihrer von mkcert generierten lokalen Zertifizierungsstelle wird nur lokal auf Ihrem Gerät vertraut.

  3. Generieren Sie ein von mkcert signiertes Zertifikat für Ihre Website.

    Öffnen Sie in Ihrem Terminal das Stammverzeichnis Ihrer Website oder das 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 Folgendes aus:

    mkcert mysite.example

    Dieser Befehl bewirkt Folgendes:

    • Generiert ein Zertifikat für den von Ihnen angegebenen Hostnamen.
    • Lässt mkcert das Zertifikat signieren.

    Ihr Zertifikat ist jetzt bereit und von einer Zertifizierungsstelle signiert, der Ihr Browser lokal vertraut.

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

    Die genaue Vorgehensweise hängt von Ihrem Server ab. Hier einige Beispiele:

    👩🏻‍💻 Mit Node:

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

    Ihr start-Skript sollte dann so aussehen:

    "scripts": {
    "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"

    👩🏻‍💻 Weitere Beispiele:

  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.

mkcert-Kurzreferenz

mkcert-Kurzreferenz

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

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

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

</div>

Website lokal mit HTTPS ausführen: andere Optionen

Im Folgenden finden Sie weitere Möglichkeiten, Ihr Zertifikat einzurichten. Diese sind im Allgemeinen komplizierter oder riskanter als die Verwendung von mkcert.

Selbst signiertes Zertifikat

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

  • 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 auf 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 wie vertrauenswürdige Zertifikate.
  • Wenn Sie diese Technik nicht in einem Browserkontext verwenden, müssen Sie die Zertifikatsprüfung für Ihren Server deaktivieren. Wenn Sie vergessen, sie in der Produktion wieder zu aktivieren, führt dies zu Sicherheitsproblemen.
Screenshots der Warnungen, die Browser anzeigen, wenn ein selbst signiertes Zertifikat verwendet wird.
Die Warnungen, die Browser anzeigen, wenn ein selbst signiertes Zertifikat verwendet wird.

Wenn Sie kein Zertifikat angeben, erstellen die HTTPS-Optionen des Entwicklungsservers von React und Vue im Hintergrund ein selbst signiertes Zertifikat. Das geht schnell, birgt aber dieselben Browserwarnungen und andere Fallstricke wie selbst signierte Zertifikate. 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 Ihr Browser das Zertifikat Ihres lokalen Entwicklungsservers. Wenn es feststellt, 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 und zeigt eine Warnung an, dass Ihre Verbindung nicht sicher ist. Wenn Sie fortfahren, wird die HTTPS-Verbindung trotzdem erstellt, aber auf Ihr eigenes Risiko.

Diagramm: Warum Browser selbst signierten Zertifikaten nicht vertrauen
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. Dies bringt die folgenden Komplikationen mit sich:

  • Sie müssen mehr Einrichtungsarbeiten erledigen als bei Verwendung einer lokalen CA-Technik wie mkcert.
  • Sie müssen einen gültigen Domainnamen verwenden, den Sie kontrollieren. Das bedeutet, dass Sie offizielle Zertifizierungsstellen für Folgendes nicht verwenden können:

Reverse-Proxy

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

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

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. 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 die Gefahr, dass Produktionsanmeldedaten preisgegeben werden.
  • Dieses Flag funktioniert nur in Chrome. Sie können also nicht browserübergreifend debuggen.

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

Zurück
Wann sollte HTTPS für die lokale Entwicklung verwendet werden?