Como usar SSL no aplicativo Create-React-App - Programadores Deprê

Conteúdo

Os aplicativos modernos devem usar HTTPS, especialmente aqueles que lidam com dados do usuário. Configure HTTPS para React em apenas algumas etapas.

Secure Sockets Layer (SSL) é um protocolo seguro 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 com create-react-app, o aplicativo não usará HTTPS. Habilitar HTTPS para seu aplicativo é especialmente útil se você planeja fazer proxy de solicitações para APIs que são servidas por HTTPS.

Usando HTTPS em React

Quando você cria um aplicativo com create-react-app, ele é executado em HTTP por padrão. Para usar SSL e servir páginas por HTTPS, você precisa definir a variável HTTPS como true em package.json. Faça isso modificando o valor scripts.start para ficar assim:

“scripts”: { “start”: “HTTPS=true react-scripts start”, },

Como alternativa, você pode definir a variável de ambiente HTTPS como true ao iniciar o aplicativo.

No Linux/macOS:

HTTPS=true npm start

No cmd do Windows:

set HTTPS=true&&npm start

No Windows Powershell:

($env:HTTPS = "true") -and (npm start)

No entanto, cada método é apenas o primeiro passo. Se você tentar iniciar seu aplicativo React neste ponto, receberá um erro. Para concluir este processo, você precisa configurar um certificado SSL válido.

Crie uma autoridade de certificação no seu computador

Uma das ferramentas que podem ser usadas para gerar certificados SSL é o mkcert. Ele permite que você crie certificados de desenvolvimento para testes locais sem configurar nada.

É multiplataforma e está disponível para Windows, Linux e macOS. Este artigo usa Linux.

Encontre o guia de instalação para a plataforma que você está usando na página mkcert no GitHub.

Primeiro instale o certutil.

sudo apt install libnss3-tools

Então você pode instalar o mkcert usando o Homebrew

brew install mkcert

Crie uma autoridade de certificação local (Ca) executando o comando a seguir.

mkcert -install

Depois que a CA foi criada com sucesso, agora você pode começar a gerar o certificado SSL.

Gerar certificado SSL

Navegue até a pasta raiz do aplicativo React e gere um certificado SSL.

Primeiro, crie uma pasta para certificados.

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.

"scripts": {
    "start":
        "HTTPS=true SSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem react-scripts start"
}

Proteja seu site React com SSL

Este artigo mostra como usar certificados SSL em um ambiente React local. No entanto, os certificados SSL são essenciais para todos os aplicativos da web. Eles protegem seu site contra hackers e protegem os dados dos usuários que visitam seu site.