Secure Sockets Layer (SSL) je bezpečnostní protokol, který vytváří zabezpečené spojení mezi serverem a klientem. Je součástí protokolu HTTPS, který provádí šifrování dat. SSL je důležité, protože chrání data před odposloucháváním a souvisejícími útoky.

Ve výchozím nastavení, pokud vytvoříte aplikaci React pomocí create-react-app, tato aplikace nepoužívá HTTPS. Povolení HTTPS pro vaši aplikaci je užitečné zejména v případě, že plánujete zadávat proxy požadavky na rozhraní API, které je obsluhuje prostřednictvím HTTPS.

Použití HTTPS v Reactu

Když vás vytvořit aplikaci pomocí create-react-app, ve výchozím nastavení běží na HTTP. Chcete-li používat SSL a zobrazovat stránky přes HTTPS, budete muset nastavit HTTPS proměnná na true in package.json. Udělejte to úpravou scripts.start hodnota vypadat takto:

"scripts": {
 "Start": "HTTPS=skutečný spouštění reakčních skriptů",
},

Případně můžete nastavit HTTPS prostředí na hodnotu true při spuštění aplikace.

V systému Linux/macOS:

HTTPS=skutečný npm start

V cmd Windows:

soubor HTTPS=skutečný&&npm Start

V prostředí Windows Powershell:

($env: HTTPS = "skutečný") -a (npm start)

Každý přístup je však jen prvním krokem. Pokud se v tomto okamžiku pokusíte spustit aplikaci React, zobrazí se chyba. Chcete-li proces dokončit, musíte nastavit platný SSL certifikát.

Vytvořte na svém počítači certifikační autoritu

Jedním z nástrojů, který můžete použít ke generování certifikátu SSL, je mkcert. Umožňuje vám vytvářet lokálně testované vývojové certifikáty bez jakékoli konfigurace.

Je kompatibilní s různými platformami a funguje na Windows, Linux a macOS. Tento článek používá Linux.

Najděte instalační příručku platformy, kterou používáte stránka mkcert GitHub.

Začněte instalací certutil.

sudo apt Nainstalujte libnss3-tools

Poté můžete nainstalovat mkcert pomocí Homebrew

vařit Nainstalujte mkcert

Spuštěním následujícího příkazu vytvořte místní certifikační autoritu (Ca).

mkcert -Nainstalujte

Po úspěšném vytvoření CA můžete nyní začít generovat certifikáty SSL.

Vygenerujte SSL certifikát

Přejděte do kořenové složky aplikace React a vygenerujte certifikát SSL.

Nejprve vytvořte složku pro certifikát.

mkdir reagent

Spuštěním následujícího vygenerujte certifikát a uložte jej do složky, kterou jste právě vytvořili.

mkcert -key-file ./reactcert/key.pem -cert-file ./reactcert/cert.pem "localhost"

Nakonfigurujte React pro použití SSL

V package.json přidejte cestu, která ukazuje na certifikáty SSL.

"scripts": {
 "Start":
 "HTTPS=skutečnýSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem začnou reagovat skripty"
}

Zabezpečte svůj web React pomocí SSL

Tento článek vám ukázal, jak můžete používat certifikáty SSL v místním prostředí React. SSL certifikáty jsou však nezbytné pro všechny webové aplikace. Chrání váš web před hackery a chrání data uživatelů navštěvujících váš web.