Usar HTTPS para desenvolvimento local

Maud Nalpas

Na maioria das vezes, http://localhost se comporta como HTTPS para desenvolvimento. propósitos. No entanto, existem alguns casos especiais, como nomes de host personalizados ou cookies seguros em navegadores, em que é necessário para configurar explicitamente o site de desenvolvimento para se comportar como HTTPS e conseguir representam como seu site funciona na produção. Se o site de produção não usar HTTPS, defina como prioridade a mudança para HTTPS).

Nesta página, explicamos como executar seu site localmente com HTTPS.

Para instruções resumidas, consulte a referência rápida do mkcert.**

Execute seu site localmente com HTTPS usando mkcert (recomendado)

Para usar HTTPS com seu site de desenvolvimento local e acessar https://localhost ou https://mysite.example (nome de host personalizado), você precisa de um Certificado TLS assinado por uma entidade confiável para o dispositivo e o navegador, chamada de autoridade certificadora (CA) O navegador verifica se o certificado do servidor de desenvolvimento é assinado por um CA confiável antes de criar uma conexão HTTPS.

Recomendamos usar mkcert, AC multiplataforma, para criar e assinar seu certificado. Para outros opções, consulte Executar seu site localmente com HTTPS: outras opções.

Muitos sistemas operacionais incluem bibliotecas para a criação de certificados, como openssl. No entanto, são mais complexas e menos confiáveis do que o mkcert e não são necessariamente multiplataforma, o que os torna menos acessíveis para equipes maiores de desenvolvedores.

Configuração

1. Instale o mkcert (apenas uma vez).

   Siga as instruções. para instalar o mkcert no seu sistema operacional. Por exemplo, no macOS:

   brew install mkcert
   brew install nss # if you use Firefox
   

2. Adicione o mkcert às CAs raiz locais.

   No terminal, execute o seguinte comando:

   mkcert -install
   

   Isso gera uma autoridade de certificação (CA, na sigla em inglês) local. A CA local gerada pelo mkcert só é confiável localmente no dispositivo.

3. Gere um certificado para seu site, assinado por mkcert.

   No seu terminal, navegue até o diretório raiz do seu site ou qualquer diretório no qual você gostaria de manter seu certificado.

   Depois, execute:

   mkcert localhost
   

   Se você estiver usando um nome de host personalizado, como mysite.example, execute:

   mkcert mysite.example
   

   Esse comando faz duas coisas:

   • Gera um certificado para o nome do host especificado.
   • Permite que o mkcert assine o certificado.

   Seu certificado está pronto e foi assinado por uma autoridade certificadora navegador confia localmente.

4. Configure seu servidor para usar HTTPS o certificado TLS que você acabou de criar.

   Os detalhes de como fazer isso dependem do seu servidor. Veja alguns exemplos:

   👩🏻 💻 Com nó:

   server.js (substitua {PATH/TO/CERTIFICATE...} e {PORT}):

   const https = require('https');
   const fs = require('fs');
   const options = {
     key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
     cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
   };
   https
     .createServer(options, function (req, res) {
       // server code
     })
     .listen({PORT});
   

   👩🏻 💻 Com http-server:

   Inicie o servidor da seguinte maneira (substitua {PATH/TO/CERTIFICATE...}):

   http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
   

   -S executa seu servidor com HTTPS, enquanto -C define o certificado e -K define a chave.

   👩🏻 💻 Com um servidor de desenvolvimento do React:

   Edite o package.json desta forma e substitua {PATH/TO/CERTIFICATE...}:

   "scripts": {
   "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
   

   Por exemplo, se você criou um certificado para localhost no arquivo diretório raiz:

   |-- my-react-app
       |-- package.json
       |-- localhost.pem
       |-- localhost-key.pem
       |--...
   

   Seu script start ficará assim:

   "scripts": {
       "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
   

   👩🏻 💻 Outros exemplos:

   • Servidor de desenvolvimento do Angular
   • Python

5. Abra https://localhost ou https://mysite.example no navegador para verifique se ele está sendo executado localmente com HTTPS. Você não verá nenhuma avisos do navegador, porque ele confia no mkcert como um certificado local. autoridade.

Referência rápida do mkcert

Referência rápida do mkcert

Para executar o site de desenvolvimento local com HTTPS:

1. Configure o mkcert.

   Instale o mkcert no macOS, caso ainda não tenha feito isso:

   brew install mkcert
   
   
   

   Marque install mkcert. para Windows e Linux.

   Em seguida, crie uma autoridade certificadora local:

   mkcert -install

2. Criar um certificado confiável.

   mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}

   Isso cria um certificado válido que o mkcert assina automaticamente.

3. Configure seu servidor de desenvolvimento para usar HTTPS e o certificado que você criado na Etapa 2.

Agora você pode acessar https://{YOUR HOSTNAME} no seu navegador, sem avisos

</div>

Execute seu site localmente com HTTPS: outras opções

Confira a seguir outras maneiras de configurar seu certificado. Elas geralmente são mais complicado ou arriscado do que usar o mkcert.

Certificado autoassinado

Você também tem a opção de não usar uma autoridade certificadora local, como mkcert. assine o certificado por conta própria. Essa abordagem tem algumas armadilhas:

• Os navegadores não confiam em você como autoridade certificadora, por isso mostram avisos que você precisa ignorar manualmente. No Chrome, use a sinalização #allow-insecure-localhost para ignorar esse aviso automaticamente em localhost.
• Isso não é seguro se você está trabalhando em uma rede sem segurança.
• Não é necessariamente mais fácil ou rápido do que usar uma AC local, como o mkcert.
• Os certificados autoassinados não se comportarão exatamente da mesma maneira que os certificados certificados.
• Se você não usar essa técnica no contexto de um navegador, será necessário desativar verificação do certificado do seu servidor. Esquecer de reativá-la em na produção causa problemas de segurança.

.

Se você não especificar um certificado, o React's e da Vue's as opções HTTPS do servidor de desenvolvimento criam um certificado autoassinado na capô É rápido, mas vem com os mesmos avisos do navegador e outras no caso dos certificados autoassinados. Felizmente, é possível usar o front-end estruturas a opção HTTPS integrada e especificar um certificado local confiável criado usando mkcert ou semelhante. Para mais informações, consulte a Exemplo de mkcert com React.

Por que os navegadores não confiam em certificados autoassinados?

Se você abrir seu site em execução localmente no navegador usando HTTPS, o navegador verifica o certificado do seu servidor de desenvolvimento local. Quando verificar se você assinou o certificado, ele verifica se você está registrado como uma autoridade de certificação confiável. Como você está não, seu navegador não confia no certificado e mostra um aviso informando que sua conexão não é segura. Ele ainda cria o HTTPS conexão se continuar, mas você faz isso por sua conta e risco.

(em inglês).

Certificado assinado por uma autoridade certificadora comum

Você também pode usar um certificado assinado por uma AC oficial. Isso vem com o estas complicações:

• Você tem mais trabalho de configuração a fazer do que usar uma técnica de CA local, como "mkcert".
• É necessário usar um nome de domínio válido que você controle. Isso significa que não é possível usar CAs oficiais para o seguinte:
  • localhost e outros reservados nomes de domínio, como example ou test.
  • Qualquer nome de domínio que você não controle.
  • Domínios de nível superior inválidos. Para obter mais informações, consulte a lista de domínios de nível superior válidos.

Proxy reverso

Outra opção para acessar um site executado localmente com HTTPS é usar um proxy reverso, como ngrok (links em inglês). Isso inclui os seguintes riscos:

• Qualquer pessoa com quem você compartilhar o URL do proxy reverso poderá acessar seu desenvolvimento local site. Isso pode ser útil para demonstrar seu projeto aos clientes, mas também que pessoas não autorizadas compartilhem informações sensíveis.
• Alguns serviços de proxy reverso cobram pelo uso, portanto o preço pode ser um fator na sua escolha de serviço.
• As novas medidas de segurança dos navegadores podem afetar como essas ferramentas funcionam.

Sinalização (não recomendado)

Se você estiver usando um nome de host personalizado como mysite.example no Chrome, poderá usar um para forçar o navegador a considerar o mysite.example como seguro. Evite fazer isso pelos seguintes motivos:

• Você precisa ter certeza total de que mysite.example sempre se refere a um local endereço IP. Caso contrário, você corre o risco de vazar credenciais de produção.
• Essa sinalização só funciona no Chrome. Por isso, não é possível depurar em vários navegadores.

Agradecemos muito as contribuições e o feedback para todos os revisores e colaboradores, especialmente Ryan Sleevi, Filippo Valsorda, Milica Mihajlija e Rowan Merewood. 🙌

Plano de fundo da imagem principal de @anandu no Unsplash, editado.