Secure Sockets Layer (SSL) é um protocolo de segurança que estabelece um link seguro entre um servidor e um cliente. Faz parte do protocolo HTTPS que realiza a criptografia de dados. O SSL é importante porque protege os dados contra espionagem e ataques relacionados.
Por padrão, se você criar um aplicativo React usando create-react-app, o aplicativo não usará HTTPS. Ativar HTTPS para seu aplicativo é útil especialmente se você planeja fazer proxy de solicitações para uma API que as atende via HTTPS.
Usando HTTPS em React
Quando você criar um aplicativo usando create-react-app, ele é executado em HTTP por padrão. Para usar SSL e servir páginas por HTTPS, você precisará definir o HTTPS variável para verdadeiro em pacote.json. Faça isso modificando o scripts.start valor para ficar assim:
"roteiros": {
"começar": "HTTPS=verdadeiro iniciar os scripts de reação",
},
Alternativamente, você pode definir o HTTPS variável de ambiente para true quando você inicia seu aplicativo.
No Linux/macOS:
HTTPS=verdadeiro npm início
No cmd do Windows:
definir HTTPS=verdadeiro&&npm começar
No Windows Powershell:
($env: HTTPS = "verdadeiro") -e (início npm)
No entanto, cada abordagem é apenas o primeiro passo. Se você tentar iniciar seu aplicativo React neste ponto, receberá um erro. Para concluir o processo, você precisará configurar um Certificado SSL.
Crie uma autoridade de certificação em sua máquina
Uma das ferramentas que você pode usar para gerar um certificado SSL é o mkcert. Ele permite que você crie certificados de desenvolvimento testados localmente sem configurar nada.
É compatível com várias plataformas e funciona no Windows, Linux e macOS. Este artigo usa Linux.
Encontre o guia de instalação da plataforma que você está usando no página do GitHub do mkcert.
Comece instalando certutil.
sudo apt instalar libnss3-tools
Então você pode instalar mkcert usando Homebrew
preparar instalar mkcert
Crie uma autoridade de certificação local (Ca) executando o comando a seguir.
mkcert -instalar
Depois que a CA for criada com sucesso, agora você pode começar a gerar certificados SSL.
Gerar certificado SSL
Navegue até a pasta raiz do seu aplicativo React e gere um certificado SSL.
Primeiro, crie uma pasta para o certificado.
mkdir reactcert
Execute o seguinte para gerar o certificado e armazená-lo na pasta que você acabou de criar.
mkcert -key-file ./reactcert/key.pem -cert-file ./reactcert/cert.pem "localhost"
Configurar o React para usar SSL
Em package.json, adicione um caminho que aponte para os certificados SSL.
"roteiros": {
"começar":
"HTTPS=verdadeiroSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem iniciar os scripts de reação"
}
Proteja seu site React usando SSL
Este artigo mostrou como você pode usar certificados SSL em um ambiente local do React. Os certificados SSL são, no entanto, essenciais para todas as aplicações web. Eles protegem seu site contra hackers e protegem os dados dos usuários que visitam seu site.
