Artigo original: https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/

1_8XwjYNPlrj0paEvIjn0Dcw

Quase todo site da web que você visita hoje é protegido por HTTPS. Se o seu ainda não é, deveria ser. A segurança de seu servidor com HTTPS também representa não poder enviar solicitações para este servidor de outro que não esteja protegido por HTTPS. Isso causa um problema para os desenvolvedores que usam um ambiente local de desenvolvimento, pois todos eles são executados em http://localhost desde sempre.

Na startup da qual eu faço parte, decidi proteger nossos endpoints do balanceador de carga AWS Elastic com HTTPS como parte de uma ação para aumentar a segurança. Acabei encontrando uma situação na qual as solicitações que meu ambiente local de desenvolvimento faziam ao servidor começaram a ser rejeitadas.

Depois de uma rápida pesquisa no Google, encontrei vários artigos como este, este ou este aqui (textos em inglês), com instruções detalhadas sobre como eu podia implementar o HTTPS no localhost. Nenhuma dessas instruções parecia funcionar, mesmo depois de eu as ter seguido religiosamente. O Chrome sempre me enviava o mesmo erro: NET::ERR_CERT_COMMON_NAME_INVALID.

1_cQyGAORXHxsrhs5KRRBOgQ

O problema

Todas as instruções detalhadas que encontrei estavam certas na época em que foram escritas. Agora, porém, não são mais.

Depois de muito usar o Google, descobri que o motivo para que meu certificado local fosse rejeitado estava no fato de que o Chrome havia tornado obsoleto o suporte para correspondências de commonName nos certificados (texto em inglês), com efeito, exigindo um subjectAltName desde janeiro de 2017.

A solução

Usaremos o OpenSSL para gerar todos os nossos certificados.

Passo 1: Tornar o certificado SSL "root"

A primeira etapa é criar um certificado Secure Sockets Layer (SSL) "Root". Esse certificado root pode então ser usado para assinar quantos certificados queiramos gerar para os domínios individuais. Se você não estiver familiarizado com o ecossistema do SSL, este artigo de DNSimple introduz muito bem os certificados SSL root.

Gere uma chave RSA-2048 e salve-a no arquivo rootCA.key. Este arquivo será usado como chave para gerar o certificado SSL root. Será solicitada uma senha, a qual você precisará inserir cada vez que usar essa chave específica para gerar um certificado.

openssl genrsa -des3 -out rootCA.key 2048

Você pode usar a chave que gerou para criar um certificado SSL root. Salve-a em um arquivo chamado rootCA.pem. Este certificado terá a validade de 1.024 dias. Fique à vontade para trocar o número de dias para quantos você quiser. Também serão solicitadas algumas informações adicionais.

openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem
1_76xehIse7mPGF094ojiBBw

Passo 2: Confiar no certificado SSL root

Antes de poder usar o certificado SSL root recém-criado para começar a emitir certificados de domínio, ainda há mais um passo a ser feito. É preciso dizer ao computador que ele deve confiar no certificado root, de modo que todos os certificados individuais emitidos por ele também sejam considerados confiáveis.

No Mac, abra Keychain Access e vá para a categoria Certificates em seu keychain System. Quando estiver lá, importe o rootCA.pem usando File > Import Items. Clique duas vezes no certificado importado e altere o menu suspenso "When using this certificate:" para Always Trust na seção Trust.

Seu certificado deve ter essa aparência dentro de Keychain Access se você seguiu as instruções corretamente até agora.

1_NWwMb0yV9ClHDj87Kug9Ng

Passo 3: Certificado SSL do domínio

O certificado SSL root agora pode ser usado para emitir um certificado especificamente para seu ambiente local de desenvolvimento, localizado no localhost.

Crie um arquivo de configuração do OpenSSL chamado server.csr.cnf para poder importar essas configurações ao criar um certificado em vez de inseri-los na linha de comando.

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
emailAddress=hello@example.com
CN = localhost

Crie um arquivo v3.ext para criar um certificado X509 v3. Perceba como estamos especificando subjectAltName aqui.

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

Crie uma chave de certificado para localhost usando as definições de configuração armazenadas em server.csr.cnf. Essa chave é armazenada em server.key.

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )

Uma solicitação de assinatura do certificado é emitida pelo certificado SSL root que criamos antes para criar um certificado de domínio para localhost. O resultado é um arquivo de certificado chamado server.crt.

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext
1_kulsSyc0-ylsevP5eIlktA

Use seu novo certificado SSL

Você está pronto para tornar seguro seu localhost com HTTPS. Mova os arquivos server.key e server.crt para um local acessível no seu servidor e inclua-os ao iniciar seu servidor.

Em um app com Express, escrito no Node.js, aqui está o que você faria. Certifique-se de fazer isso somente para seu ambiente local. Não use isso em produção.

1_89r7TnYG49V3zMoUnfOP7Q

Espero que você tenha achado útil este tutorial. Se não se sentir confortável em executar os comandos dados aqui por conta própria, eu criei um conjunto de scripts úteis para que você os possa rodar rapidamente e gerar os certificados para você. Mais detalhes podem ser encontrados neste repositório do GitHub.

O autor adora ajudar colegas desenvolvedores  para a web. Siga o autor no Twitter e informe-o se tiver sugestões ou feedback. Se quiser mostrar seu apreço por algum trabalho realizado por ele, seja uma publicação de blog, um projeto de código aberto ou apenas uma publicação engraçada no Twitter, você pode pagar um cafezinho para o autor.