Secure Sockets Layer (SSL) es un protocolo de seguridad que establece un enlace seguro entre un servidor y un cliente. Es parte del protocolo HTTPS que realiza el cifrado de datos. SSL es importante porque protege los datos de espionaje y ataques relacionados.
De manera predeterminada, si crea una aplicación React usando create-react-app, la aplicación no usa HTTPS. Habilitar HTTPS para su aplicación es útil, especialmente si planea enviar solicitudes de proxy a una API que las atiende a través de HTTPS.
Usando HTTPS en React
Cuando usted crear una aplicación usando create-react-app, se ejecuta en HTTP de forma predeterminada. Para usar SSL y servir páginas a través de HTTPS, deberá configurar el HTTPS variable a verdadero en paquete.json. Hágalo modificando el scripts.start valor para verse así:
"guiones": {
"comienzo": "HTTPS=verdadero inicio de scripts de reacción",
},
Alternativamente, puede configurar el HTTPS variable de entorno a verdadero cuando inicia su aplicación.
En Linux/macOS:
HTTPS=verdadero inicio de npm
En cmd de Windows:
establecer HTTPS=verdadero&&npm comienzo
En Windows Powershell:
($env: HTTPS = "verdadero") -y (npm inicio)
Sin embargo, cada enfoque es solo el primer paso. Si intenta iniciar su aplicación React en este punto, obtendrá un error. Para completar el proceso, deberá configurar un certificado SSL.
Cree una autoridad de certificación en su máquina
Una de las herramientas que puede usar para generar un certificado SSL es mkcert. Le permite crear certificados de desarrollo probados localmente sin configurar nada.
Es compatible con varias plataformas y funciona en Windows, Linux y macOS. Este artículo usa Linux.
Encuentre la guía de instalación de la plataforma que está utilizando en el mkcert página de GitHub.
Comience por instalar certutil.
sudo apto Instalar en pc libnss3-herramientas
Entonces puedes instalar mkcert usando cerveza casera
elaborar cerveza Instalar en pc mkcert
Cree una autoridad de certificación local (Ca) ejecutando el siguiente comando.
mkcert -Instalar en pc
Una vez que la CA se haya creado correctamente, ahora puede comenzar a generar certificados SSL.
Generar certificado SSL
Navegue a la carpeta raíz de su aplicación React y genere un certificado SSL.
Primero, cree una carpeta para el certificado.
mkdir reactcert
Ejecute lo siguiente para generar el certificado y guárdelo en la carpeta que acaba de crear.
mkcert -archivo-clave ./reactcert/key.pem -archivo-cert ./reactcert/cert.pem "servidor local"
Configurar reaccionar para usar SSL
En package.json, agregue una ruta que apunte a los certificados SSL.
"guiones": {
"comienzo":
"HTTPS=verdaderoSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem comienzan los scripts de reacción"
}
Asegure su sitio React usando SSL
Este artículo le mostró cómo puede usar certificados SSL en un entorno local de React. Sin embargo, los certificados SSL son esenciales para todas las aplicaciones web. Protegen su sitio web de piratas informáticos y protegen los datos de los usuarios que visitan su sitio.
