Secure Sockets Layer (SSL) — это протокол безопасности, который устанавливает безопасную связь между сервером и клиентом. Это часть протокола HTTPS, который выполняет шифрование данных. SSL важен, потому что он защищает данные от прослушивания и связанных с ним атак.
По умолчанию, если вы создаете приложение React с помощью create-react-app, приложение не использует HTTPS. Включение HTTPS для вашего приложения полезно, особенно если вы планируете прокси-запросы к API, который обслуживает их через HTTPS.
Использование HTTPS в React
Когда ты создать приложение с помощью приложения create-реагировать, он работает по протоколу HTTP по умолчанию. Чтобы использовать SSL и обслуживать страницы через HTTPS, вам необходимо установить HTTPS переменная в true в пакет.json. Сделайте это, изменив скрипты.старт значение, чтобы выглядеть следующим образом:
"скрипты": {
"Начало": "HTTPS=истинный запускаются реактивные скрипты",
},
Кроме того, вы можете установить HTTPS переменная окружения в true при запуске приложения.
В Linux/macOS:
HTTPS=истинный запуск нпм
В Windows cmd:
установлен HTTPS=истинный&&npm Начало
В Windows Powershell:
($env: HTTPS = "истинный") -а также (начало нпм)
Однако каждый подход — это только первый шаг. Если вы попытаетесь запустить приложение React на этом этапе, вы получите сообщение об ошибке. Чтобы завершить процесс, вам необходимо настроить действительный SSL-сертификат.
Создайте центр сертификации на своем компьютере
Одним из инструментов, которые вы можете использовать для создания SSL-сертификата, является mkcert. Он позволяет создавать локально проверенные сертификаты разработки без какой-либо настройки.
Он кроссплатформенный и работает на Windows, Linux и macOS. В этой статье используется Linux.
Найдите руководство по установке используемой вами платформы на веб-сайте Страница mkcert на GitHub.
Начните с установки certutil.
Судо подходит установить libnss3-инструменты
Затем вы можете установить mkcert используя доморощенный
заваривать установить mkcert
Создайте локальный центр сертификации (Ca), выполнив следующую команду.
мксерт -установить
После успешного создания ЦС вы можете приступить к созданию SSL-сертификатов.
Создать SSL-сертификат
Перейдите в корневую папку вашего приложения React и создайте сертификат SSL.
Сначала создайте папку для сертификата.
мкдир реактивный сертификат
Выполните следующую команду, чтобы сгенерировать сертификат и сохранить его в только что созданной папке.
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 необходимы для всех веб-приложений. Они защищают ваш сайт от хакеров и защищают данные пользователей, посещающих ваш сайт.
