Secure Sockets Layer (SSL) е протокол за сигурност, който установява сигурна връзка между сървър и клиент. Той е част от HTTPS протокола, който извършва криптиране на данни. SSL е важен, защото защитава данните от подслушване и свързани атаки.
По подразбиране, ако създадете React приложение, използвайки create-react-app, приложението не използва HTTPS. Активирането на HTTPS за вашето приложение е полезно, особено ако планирате да изпращате прокси заявки към API, който ги обслужва чрез HTTPS.
Използване на HTTPS в React
Когато ти създайте приложение с помощта на create-react-app, той работи на HTTP по подразбиране. За да използвате SSL и да обслужвате страници през HTTPS, ще трябва да зададете HTTPS променлива до истина в package.json. Направете това, като промените скриптове.старт стойност да изглежда така:
"скриптове": {
"старт": "HTTPS=вярно стартират скриптове за реакция",
},
Като алтернатива можете да зададете HTTPS променливата на средата на истина, когато стартирате приложението си.
На Linux/macOS:
HTTPS=вярно npm старт
В Windows cmd:
комплект HTTPS=вярно&&npm започнете
В Windows Powershell:
($env: HTTPS = "вярно") -и (npm начало)
Въпреки това, всеки подход е само първата стъпка. Ако опитате да стартирате приложението си React в този момент, ще получите грешка. За да завършите процеса, ще трябва да настроите валиден SSL сертификат.
Създайте сертифициращ орган на вашата машина
Един от инструментите, които можете да използвате за генериране на SSL сертификат, е mkcert. Позволява ви да създавате локално тествани сертификати за разработка, без да конфигурирате нищо.
Той е съвместим с различни платформи и работи на Windows, Linux и macOS. Тази статия използва Linux.
Намерете ръководството за инсталиране на платформата, която използвате от mkcert страница на GitHub.
Започнете с инсталиране certutil.
sudo apt Инсталирай libnss3-инструменти
След това можете да инсталирате mkcert с помощта на Homebrew
варя Инсталирай mkcert
Създайте локален сертифициращ орган (Ca), като изпълните следната команда.
mkcert -Инсталирай
След като CA бъде създаден успешно, вече можете да започнете да генерирате SSL сертификати.
Генериране на SSL сертификат
Отидете до главната папка на вашето приложение React и генерирайте SSL сертификат.
Първо създайте папка за сертификата.
mkdir reactcert
Изпълнете следното, за да генерирате сертификата и да го съхраните в папката, която току-що създадохте.
mkcert -key-file ./reactcert/key.pem -cert-file ./reactcert/cert.pem "локален хост"
Конфигурирайте React да използва SSL
В package.json добавете път, който сочи към SSL сертификатите.
"скриптове": {
"старт":
„HTTPS=вярноSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem стартират скриптове за реакция"
}
Защитете вашия React сайт с помощта на SSL
Тази статия ви показа как можете да използвате SSL сертификати в локална среда на React. SSL сертификатите обаче са от съществено значение за всички уеб приложения. Те защитават вашия уебсайт от хакери и защитават данните на потребителите, посещаващи вашия сайт.
