Secure Sockets Layer (SSL) ist ein Sicherheitsprotokoll, das eine sichere Verbindung zwischen einem Server und einem Client herstellt. Es ist Teil des HTTPS-Protokolls, das die Datenverschlüsselung durchführt. SSL ist wichtig, weil es Daten vor Abhören und damit verbundenen Angriffen schützt.
Wenn Sie eine React-Anwendung mit create-react-app erstellen, verwendet die Anwendung standardmäßig kein HTTPS. Das Aktivieren von HTTPS für Ihre App ist besonders nützlich, wenn Sie Anfragen per Proxy an eine API weiterleiten möchten, die sie über HTTPS bedient.
Verwendung von HTTPS in React
Wenn du Erstellen Sie eine App mit create-react-app, es läuft standardmäßig auf HTTP. Um SSL zu verwenden und Seiten über HTTPS bereitzustellen, müssen Sie die HTTPS Variable auf true in Paket.json. Tun Sie dies, indem Sie die ändern scripts.start Wert so aussehen:
"Skripte": {
"Anfang": "HTTPS=Stimmt React-Skripte starten",
},
Alternativ können Sie die einstellen HTTPS Umgebungsvariable auf true setzen, wenn Sie Ihre App starten.
Unter Linux/macOS:
HTTPS=Stimmt npm starten
Auf Windows-cmd:
einstellen HTTPS=Stimmt&&npm Anfang
Unter Windows Powershell:
($env: HTTPS = "Stimmt") -und (npm-Start)
Jeder Ansatz ist jedoch nur der erste Schritt. Wenn Sie an dieser Stelle versuchen, Ihre React-Anwendung zu starten, erhalten Sie eine Fehlermeldung. Um den Vorgang abzuschließen, müssen Sie eine gültige SSL-Zertifikat.
Erstellen Sie eine Zertifizierungsstelle auf Ihrem Computer
Eines der Tools, mit denen Sie ein SSL-Zertifikat generieren können, ist mkcert. Es ermöglicht Ihnen, lokal getestete Entwicklungszertifikate zu erstellen, ohne etwas zu konfigurieren.
Es ist plattformübergreifend kompatibel und funktioniert unter Windows, Linux und macOS. Dieser Artikel verwendet Linux.
Finden Sie die Installationsanleitung der von Ihnen verwendeten Plattform unter mkcert GitHub-Seite.
Beginnen Sie mit der Installation certutil.
sudo apt Installieren libnss3-tools
Dann können Sie installieren mkcert mit Homebrew
brauen Installieren mkcert
Erstellen Sie eine lokale Zertifizierungsstelle (CA), indem Sie den folgenden Befehl ausführen.
mkcert -Installieren
Nachdem die CA erfolgreich erstellt wurde, können Sie nun mit der Generierung von SSL-Zertifikaten beginnen.
SSL-Zertifikat generieren
Navigieren Sie zum Stammordner Ihrer React-App und generieren Sie ein SSL-Zertifikat.
Erstellen Sie zunächst einen Ordner für das Zertifikat.
mkdir reakcert
Führen Sie Folgendes aus, um das Zertifikat zu generieren, und speichern Sie es in dem gerade erstellten Ordner.
mkcert -Schlüsseldatei ./reactcert/key.pem -Zertifikatdatei ./reactcert/cert.pem "lokaler Host"
Konfigurieren Sie React für die Verwendung von SSL
Fügen Sie in package.json einen Pfad hinzu, der auf die SSL-Zertifikate verweist.
"Skripte": {
"Anfang":
"HTTPS=StimmtSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem React-Skripte starten"
}
Sichern Sie Ihre React-Site mit SSL
Dieser Artikel hat Ihnen gezeigt, wie Sie SSL-Zertifikate in einer lokalen React-Umgebung verwenden können. SSL-Zertifikate sind jedoch für alle Webanwendungen unerlässlich. Sie schützen Ihre Website vor Hackern und schützen die Daten der Benutzer, die Ihre Website besuchen.
