Quando usar HTTPS para desenvolvimento local

Usar http://localhost para desenvolvimento local é aceitável na maioria das vezes, exceto em alguns casos especiais. Esta postagem explica quando é necessário executar seu site de desenvolvimento local com HTTPS.

Maud Nalpas
Maud Nalpas
X GitHub

Consulte também: Como usar HTTPS para desenvolvimento local.

Nesta postagem, as instruções sobre localhost também são válidas para 127.0.0.1 e [::1], porque ambas descrevem o endereço do computador local, também chamado de "endereço de loopback". Além disso, para simplificar, o número da porta não é especificado. Então, quando aparecer http://localhost, leia como http://localhost:{PORT} ou http://127.0.0.1:{PORT}.

Resumo

Ao desenvolver localmente, use http://localhost por padrão. Service Workers, API Web Authentication e muito mais vão funcionar. No entanto, nos seguintes casos, você vai precisar de HTTPS para desenvolvimento local:

  • Definir cookies seguros de forma consistente nos navegadores
  • Como depurar problemas de conteúdo misto
  • Como usar HTTP/2 e posterior
  • Usar bibliotecas ou APIs de terceiros que exigem HTTPS

  • Como usar um nome de host personalizado

    Uma lista de casos em que você precisa usar HTTPS para desenvolvimento local.
    Quando usar HTTPS para desenvolvimento local.

✨ Isso é tudo que você precisa saber. Se quiser saber mais, continue lendo!

Por que seu site de desenvolvimento deve se comportar com segurança

Para evitar problemas inesperados, é recomendado que seu site de desenvolvimento local se comporte o máximo possível como o site de produção. Portanto, caso seu site de produção use HTTPS, é recomendável que ele se comporte como um site HTTPS.

Usar http://localhost por padrão

Os navegadores tratam o http://localhost de uma maneira especial: embora seja HTTP, ele se comporta principalmente como um site HTTPS.

No http://localhost, Service Workers, APIs Sensor, APIs de autenticação, pagamentos e outros recursos que exigem determinadas garantias de segurança têm suporte e se comportam exatamente como em um site HTTPS.

Quando usar HTTPS para desenvolvimento local

Talvez você encontre casos especiais em que http://localhost não se comporta como um site HTTPS. Outra opção é usar um nome de site personalizado que não seja http://localhost.

É necessário usar HTTPS para desenvolvimento local nos seguintes casos:

  • É necessário definir um cookie localmente que seja Secure ou SameSite:none ou que tenha o prefixo __Host. Os cookies Secure são definidos apenas em HTTPS, mas não em http://localhost para todos os navegadores. Além disso, como SameSite:none e __Host também exigem que o cookie seja Secure, a configuração desses cookies no seu site de desenvolvimento local também exige HTTPS.

  • Você precisa depurar localmente um problema que ocorre apenas em um site HTTPS, mas não em um site HTTP, nem mesmo http://localhost, como um problema de conteúdo misto.

  • Você precisa testar ou reproduzir localmente um comportamento específico para HTTP/2 ou mais recente. Por exemplo, se for necessário testar o desempenho de carregamento em HTTP/2 ou mais recente. HTTP/2 não seguro ou mais recente não é compatível, nem mesmo no localhost.

  • Você precisa testar localmente bibliotecas ou APIs de terceiros que exigem HTTPS (por exemplo, OAuth).

  • Você não está usando localhost, mas um nome de host personalizado para desenvolvimento local, por exemplo, mysite.example. Normalmente, isso significa que você substituiu seu arquivo de hosts local:

    Captura de tela de um terminal editando um arquivo de hosts
    Como editar um arquivo de hosts para adicionar um nome de host personalizado.

    Nesse caso, por padrão, o Chrome, o Edge, o Safari e o Firefox não consideram o mysite.example seguro, mesmo que seja um site local. Por isso, ele não vai se comportar como um site HTTPS.

  • Outros casos Esta não é uma lista completa, mas se você encontrar um caso que não esteja listado aqui, saberá: algo vai falhar em http://localhost ou não vai se comportar como o site de produção. 🙃

Em todos esses casos, você precisa usar HTTPS para desenvolvimento local.

Como usar HTTPS para desenvolvimento local

Se você precisar usar HTTPS para desenvolvimento local, acesse Como usar HTTPS para desenvolvimento local.

Dicas se você estiver usando um nome de host personalizado

Se você estiver usando um nome de host personalizado, por exemplo, editando o arquivo de hosts:

  • Não use um nome de host simples, como mysite, porque se houver um domínio de nível superior (TLD) que tenha o mesmo nome (mysite), você terá problemas. E não é tão improvável: em 2020, existem mais de 1.500 TLDs, e a lista está crescendo. coffee, museum, travel e muitas outras empresas de grande porte (talvez até a empresa em que você trabalha) são TLDs. Veja a lista completa aqui.
  • Use apenas domínios seus ou reservados para essa finalidade. Se você não tiver um domínio próprio, é possível usar test ou localhost (mysite.localhost). O test não tem tratamento especial em navegadores, mas o localhost tem: o Chrome e o Edge são compatíveis com http://<name>.localhost prontos para uso, e ele se comportará de maneira segura quando o localhost tiver. Faça um teste: execute qualquer site em um localhost e acesse http://<whatever name you like>.localhost:<your port> no Chrome ou no Edge. Isso poderá ser feito em breve no Firefox e no Safari também. Você pode fazer isso (com subdomínios como mysite.localhost) porque localhost não é apenas um nome do host, mas também um TLD completo, como com.

Saiba mais

Agradecemos muito as contribuições e o feedback a todos os avaliadores, especialmente Ryan Sleevi, Filippo Valsorda, Milica Mihajlija, Rowan Merewood e Jake Archibald. 🙌

Imagem principal de @moses_lee no Unsplash, editada.