So bringen Sie HTTPS in 5 Minuten in Ihre lokale Entwicklungsumgebung

Fast jede Website, die Sie heute besuchen, ist durch HTTPS geschützt. Wenn deins noch nicht ist, sollte es sein. Das Sichern Ihres Servers mit HTTPS bedeutet auch, dass Sie keine Anforderungen von einem Server an diesen Server senden können, der nicht durch HTTPS geschützt ist. Dies stellt ein Problem für Entwickler dar, die eine lokale Entwicklungsumgebung verwenden, da alle sofort //localhosteinsatzbereit sind.

Beim Start, an dem ich beteiligt bin, haben wir beschlossen, unsere AWS Elastic Load Balancer-Endpunkte mit HTTPS zu sichern, um die Sicherheit zu verbessern. Ich bin in eine Situation geraten, in der die Anforderungen meiner lokalen Entwicklungsumgebung an den Server abgelehnt wurden.

Eine schnelle Google-Suche später fand ich mehrere Artikel wie diesen, diesen oder jenen mit detaillierten Anweisungen, wie ich HTTPS implementieren könnte localhost. Keine dieser Anweisungen schien zu funktionieren, selbst nachdem ich ihnen religiös gefolgt war. Chrome hat immer einen NET::ERR_CERT_COMMON_NAME_INVALIDFehler auf mich geworfen.

Das Problem

Alle detaillierten Anweisungen, die ich gefunden hatte, waren für die Zeit, in der sie geschrieben wurden, korrekt. Nicht länger.

Nach einer Menge Googeln stellte ich fest, dass der Grund für die Ablehnung meines lokalen Zertifikats darin bestand, dass Chrome die Unterstützung für den CommonName-Abgleich in Zertifikaten abgelehnt hatte und seit Januar 2017 einen subjectAltName benötigte.

Die Lösung

Wir werden OpenSSL verwenden, um alle unsere Zertifikate zu generieren.

Schritt 1: Root-SSL-Zertifikat

Der erste Schritt besteht darin, ein SSL-Zertifikat (Root Secure Sockets Layer) zu erstellen. Dieses Stammzertifikat kann dann verwendet werden, um eine beliebige Anzahl von Zertifikaten zu signieren, die Sie möglicherweise für einzelne Domänen generieren. Wenn Sie mit dem SSL-Ökosystem nicht vertraut sind, können Sie in diesem Artikel von DNSimple Root-SSL-Zertifikate einführen.

Generieren Sie einen RSA-2048-Schlüssel und speichern Sie ihn in einer Datei rootCA.key. Diese Datei wird als Schlüssel zum Generieren des Root-SSL-Zertifikats verwendet. Sie werden aufgefordert, eine Passphrase einzugeben, die Sie jedes Mal eingeben müssen, wenn Sie diesen bestimmten Schlüssel zum Generieren eines Zertifikats verwenden.

openssl genrsa -des3 -out rootCA.key 2048

Mit dem von Ihnen generierten Schlüssel können Sie ein neues Root-SSL-Zertifikat erstellen. Speichern Sie es in einer Datei mit dem Namen rootCA.pem. Dieses Zertifikat hat eine Gültigkeit von 1.024 Tagen. Sie können es jederzeit auf eine beliebige Anzahl von Tagen ändern. Sie werden auch aufgefordert, andere optionale Informationen einzugeben.

openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

Schritt 2: Vertrauen Sie dem Root-SSL-Zertifikat

Bevor Sie das neu erstellte Root-SSL-Zertifikat zum Ausstellen von Domänenzertifikaten verwenden können, müssen Sie noch einen Schritt ausführen. Sie müssen Ihren Mac anweisen, Ihrem Stammzertifikat zu vertrauen, damit auch alle von ihm ausgestellten Einzelzertifikate vertrauenswürdig sind.

Öffnen Sie den Schlüsselbundzugriff auf Ihrem Mac und wechseln Sie in Ihrem Systemschlüsselbund zur Kategorie Zertifikate. Dort importieren Sie die rootCA.pemDatei mit Datei> Elemente importieren . Doppelklicken Sie auf das importierte Zertifikat und ändern Sie die Dropdown-Liste "Bei Verwendung dieses Zertifikats:" im Abschnitt "Vertrauen" in "Immer vertrauenswürdig".

Ihr Zertifikat sollte in Keychain Access ungefähr so ​​aussehen, wenn Sie die Anweisungen bis jetzt korrekt befolgt haben.

Schritt 2: Domain-SSL-Zertifikat

Das Root-SSL-Zertifikat kann jetzt verwendet werden, um ein Zertifikat speziell für Ihre lokale Entwicklungsumgebung unter auszustellen localhost.

Erstellen Sie eine neue OpenSSL-Konfigurationsdatei, server.csr.cnfdamit Sie diese Einstellungen beim Erstellen eines Zertifikats importieren können, anstatt sie in die Befehlszeile einzugeben.

[req] default_bits = 2048 prompt = no default_md = sha256 distinguished_name = dn [dn] C=US ST=RandomState L=RandomCity O=RandomOrganization OU=RandomOrganizationUnit [email protected] CN = localhost

Erstellen Sie eine v3.extDatei, um ein X509 v3-Zertifikat zu erstellen. Beachten Sie, wie wir hier spezifizieren subjectAltName.

authorityKeyIdentifier=keyid,issuer basicConstraints=CA:FALSE keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment subjectAltName = @alt_names [alt_names] DNS.1 = localhost

Erstellen Sie einen Zertifikatschlüssel für die localhostVerwendung der in gespeicherten Konfigurationseinstellungen server.csr.cnf. Dieser Schlüssel ist in gespeichert server.key.

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )

Eine Zertifikatsignierungsanforderung wird über das zuvor erstellte SSL-Stammzertifikat ausgegeben, für das ein Domänenzertifikat erstellt wurde localhost. Die Ausgabe ist eine Zertifikatdatei mit dem Namen server.crt.

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

Verwenden Sie Ihr neues SSL-Zertifikat

Jetzt können Sie Ihre localhostDaten mit HTTPS sichern . Verschieben Sie die Dateien server.keyund server.crtan einen zugänglichen Speicherort auf Ihrem Server und fügen Sie sie beim Starten Ihres Servers hinzu.

In einer in Node.js geschriebenen Express-App gehen Sie wie folgt vor. Stellen Sie sicher, dass Sie dies nur für Ihre lokale Umgebung tun. Verwenden Sie dies nicht in der Produktion .

Ich hoffe, Sie fanden dieses Tutorial hilfreich. Wenn Sie die hier angegebenen Befehle nicht selbst ausführen können, habe ich eine Reihe praktischer Skripte erstellt, die Sie schnell ausführen können, um die Zertifikate für Sie zu generieren. Weitere Details finden Sie im GitHub-Repo.

Ich liebe es, anderen Webentwicklern zu helfen. Folgen Sie mir auf Twitter und lassen Sie mich wissen, wenn Sie Vorschläge oder Feedback haben. Wenn Sie Ihre Wertschätzung für eine meiner Arbeiten zeigen möchten, sei es ein Blog-Beitrag, ein Open-Source-Projekt oder nur ein lustiger Tweet, können Sie mir eine Tasse Kaffee kaufen.