Se você é um desenvolvedor web que trabalho com criação de sites, sabe o quanto é importante simular um ambiente de produção o mais fielmente possível. E hoje em dia, isso significa ter HTTPS em seus sites, mesmo que sejam apenas para desenvolvimento local.
Embora o XAMPP no Windows 10 não venha com SSL configurado por padrão para múltiplos domínios, com algumas etapas simples, você pode ter seus projetos rodando em HTTPS, eliminando aqueles incômodos avisos de “Sua conexão não é particular“.
Neste artigo, vamos mergulhar na configuração de um certificado SSL autoassinado e como instalá-lo de forma que seu navegador confie nele, permitindo que você acesse seus sites locais como https://meu-site.local sem problemas.
Algum tempo atrás, escrevi outro artigo ensinando a fazer isso em uma versão anterior do Xamp (veja o artigo). Atualmente estou usando uma versão mais recente e foi nela que me baseie para escrever este artigo. Então se você ainda está rodando uma versão antigo do Xamp leia o artigo anterior.
Por Que Se Preocupar com HTTPS no seu Computador?
Mesmo que seja só para testar, ter HTTPS no seu ambiente de desenvolvimento é superimportante:
- Parece de Verdade: Seu site local vai se comportar exatamente como se estivesse online, sem avisos chatos.
- Testes Reais: Algumas funções modernas da web só funcionam com HTTPS (como geolocalização ou certas ferramentas de pagamento).
- Sem Dor de Cabeça: Chega de cliques extras para “prosseguir mesmo assim”.
- Pronto para o Futuro: Ajuda você a se acostumar com o HTTPS, que já é padrão em quase todo site hoje em dia.
O Que Você Vai Precisar
- XAMPP Instalado: O programa que te dá um servidor Apache no seu Windows.
- OpenSSL: Uma ferramenta que já vem dentro do XAMPP, usada para criar certificados.
- Seu Site (ou Sites): As pastas com os arquivos dos seus projetos.
Mão na Massa: Preparando Tudo!
Vamos começar organizando as coisas.
- Abra o XAMPP: Primeiro, ligue o Apache no painel de controle do XAMPP.
- Abra a “Janela de Comando” do XAMPP: Ao lado do Apache, clique no botão “Shell”. Isso vai abrir uma telinha preta, pronta para os comandos.
- Vá para a Pasta Certa: Nessa telinha preta, digite cd apache\bin e aperte Enter. É aqui que vamos trabalhar.
Passo 1: Criando um “Cartão de Identidade” para seus Sites (meu_arquivo_ssl.cnf)
Vamos criar um arquivo especial que diz ao programa OpenSSL como gerar um “cartão de identidade” (o certificado) para seus sites. Esse cartão vai ter o nome de todos os seus sites locais.
Crie um novo arquivo de texto chamado meu_arquivo_ssl.cnf (pode ser outro nome, se quiser) dentro da pasta C:\xampp\apache\bin. Cole o texto abaixo, mas lembre-se de mudar os nomes dos sites pelos seus!
[ req ] prompt = no default_bits = 2048 default_md = sha256 distinguished_name = req_distinguished_name x509_extensions = v3_req [ req_distinguished_name ] C = BR ST = SP L = SuaCidade O = MeusTestes OU = WebDev CN = localhost [ v3_req ] subjectAltName = @alt_names [ alt_names ] DNS.1 = localhost IP.1 = 127.0.0.1 DNS.2 = site_exemplo1.com DNS.3 = site_exemplo2.net DNS.4 = meu_blog_local.xyz # Adicione mais linhas DNS.X = nomedoseusite.extensao para cada site seu!
- CN = localhost: É o nome principal, mas os outros nomes vão junto.
- [alt_names]: Aqui é onde a mágica acontece! Cada DNS.X é um nome de site que seu certificado vai cobrir.
Passo 2: Gerando as “Chaves” e o “Certificado”
Agora, com o arquivo de identidade pronto, vamos usar o OpenSSL para criar as “chaves” (server.key) e o “certificado” (server.crt).
Na telinha preta (o “Shell” do XAMPP), digite este comando e aperte Enter:
openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout server.key -out server.crt -config meu_arquivo_ssl.cnf -extensions v3_req
Não se assuste com o tamanho do comando! Ele está apenas dizendo ao OpenSSL para:
- Criar um certificado que vale por 365 dias (1 ano).
- Não pedir senha para a chave.
- Usar seu arquivo meu_arquivo_ssl.cnf para pegar as informações dos sites.
Você verá os arquivos server.key e server.crt aparecerem na pasta C:\xampp\apache\bin.
Passo 3: Colocando os Arquivos de Certificado no Lugar Certo
Para o Apache encontrar o certificado, precisamos guardá-los na pasta certa:
- Crie uma pasta chamada SSL dentro de C:\xampp\apache\conf. Ou seja, o caminho completo será C:\xampp\apache\conf\ssl.
- Copie os arquivos server.key e server.crt que você acabou de gerar para essa nova pasta C:\xampp\apache\conf\ssl.
Passo 4: Dando um “Nome Local” aos Seus Sites (Arquivo hosts)
Para que seu computador saiba que site_exemplo1.com aponta para o seu próprio XAMPP, precisamos editar um arquivo especial do Windows.
- Abra o Bloco de Notas como Administrador. Para isso, procure por “Bloco de Notas” no menu Iniciar, clique com o botão direito e escolha “Executar como administrador”.
- No Bloco de Notas, vá em Arquivo > Abrir….
- Navegue até C:\Windows\System32\drivers\etc.
- No canto inferior direito, mude de “Documentos de Texto” para “Todos os Arquivos (.)”.
- Selecione o arquivo hosts e clique em “Abrir”.
- Adicione estas linhas no final do arquivo (usando seus próprios nomes de sites) como abaixo.
- Salve o arquivo hosts.
127.0.0.1 site_exemplo1.com 127.0.0.1 site_exemplo2.net 127.0.0.1 meu_blog_local.xyz
Salve Passo 5: Dando as Rotas ao Apache (Arquivos de Configuração)
Agora vamos dizer ao Apache onde encontrar cada um dos seus sites e como usar o certificado SSL.
1. Prepare o Apache:
- Abra o arquivo C:\xampp\apache\conf\httpd.conf.
- Procure por essas linhas e tire o # (jogo da velha) do começo, se tiver:
LoadModule ssl_module modules/mod_ssl.so Include conf/extra/httpd-vhosts.conf Include conf/extra/httpd-ssl.conf
Isso “liga” as partes do Apache que precisamos para o SSL e os vários sites.
2. Configure os Sites HTTP (httpd-vhosts.conf):
- Abra C:\xampp\apache\conf\extra\httpd-vhosts.conf.
- Para CADA site que você tem, adicione um bloco como este. Mude o caminho da pasta (DocumentRoot) e o nome do site (ServerName):
# Exemplo para site_exemplo1.com
<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs/site_exemplo1" # Pasta dos arquivos do seu site
ServerName site_exemplo1.com
ErrorLog "logs/site_exemplo1-error.log"
CustomLog "logs/site_exemplo1-access.log" common
<Directory "C:/xampp/htdocs/site_exemplo1">
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
# (Repita para site_exemplo2.net, meu_blog_local.xyz, etc.)
Importante: Crie as pastas site_exemplo1, site_exemplo2, etc., dentro de C:\xampp\htdocs e coloque os arquivos de cada site lá.
3. Configure os Sites HTTPS (httpd-ssl.conf):
- Abra C:\xampp\apache\conf\extra\httpd-ssl.conf.
- Você verá um bloco <VirtualHost default:443>. Deixe ele como está.
- Agora, para CADA um dos seus sites, copie e cole esse bloco, mas mude o ServerName e o DocumentRoot para cada um:
# Exemplo para site_exemplo1.com
<VirtualHost site_exemplo1.com:443>
DocumentRoot "C:/xampp/htdocs/site_exemplo1"
ServerName site_exemplo1.com:443
ErrorLog "logs/site_exemplo1-ssl-error.log"
CustomLog "logs/site_exemplo1-ssl-access.log" common
SSLEngine on
SSLCertificateFile "C:/xampp/apache/conf/ssl/server.crt"
SSLCertificateKeyFile "C:/xampp/apache/conf/ssl/server.key"
<Directory "C:/xampp/htdocs/site_exemplo1">
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
# (Repita para site_exemplo2.net, meu_blog_local.xyz, etc.)
Passo 6: Reiniciando o Apache
Depois de todas essas mudanças, o Apache precisa ser ligado de novo para entender tudo:
- No painel de controle do XAMPP, clique em “Stop” no Apache.
- Depois, clique em “Start” no Apache.
Passo 7: Fazendo seu Navegador Confiar no seu Certificado (Acabou o “Não Seguro”!)
Este é o passo mágico para sumir com aquela mensagem chata. Vamos dizer ao seu Windows e navegador que seu certificado “caseiro” é confiável.
7.1: Para Navegadores como Chrome e Edge (Windows)
- Abra o “Gerenciador de Certificados”: Aperte Windows Key + R, digite mmc e aperte Enter. Confirme a permissão.
- Na janela que abrir, vá em Arquivo > Adicionar/Remover Snap-in….
- Selecione Certificados e clique em Adicionar >. Escolha Conta de computador > Computador local > Concluir > OK.
- No lado esquerdo, clique nas setinhas para expandir Certificados (Computador Local) e depois Autoridades de Certificação Raiz Confiáveis.
- Clique com o botão direito do mouse em Certificados, e vá em Todas as Tarefas > Importar….
- Siga o assistente de importação:
- Clique em Avançar.
- Clique em Procurar…. Vá até C:\xampp\apache\conf\ssl, mude o tipo de arquivo para “Todos os Arquivos (.)“, selecione server.crt e clique em Abrir.
- Clique em Avançar.
- Confirme que o “Armazenamento de Certificados” é “Autoridades de Certificação Raiz Confiáveis“. Clique em Avançar.
- Clique em Concluir. Você verá uma mensagem de sucesso!
- Pode fechar a janela.
7.2: Para o Navegador Firefox (se você usa ele)
O Firefox tem sua própria lista de certificados.
- Abra o Firefox.
- Clique no menu de três linhas (canto superior direito) e vá em Configurações.
- No lado esquerdo, escolha Privacidade e Segurança.
- Role a tela até a parte de Certificados e clique em Ver Certificados….
- Na aba Autoridades, clique em Importar….
- Vá até C:\xampp\apache\conf\ssl, selecione server.crt e clique em Abrir.
- Na janela que aparecer, marque a opção “Confiar nesta CA para identificar sites.” e clique em OK.
- Feche as janelas.
Agora, a Hora da Verdade: Teste seus Sites!
Abra seu navegador e digite os endereços dos seus sites, mas com HTTPS na frente:
- https://site_exemplo1.com/
- https://site_exemplo2.net/
- https://meu_blog_local.xyz/
Se tudo deu certo, você verá o cadeado de segurança na barra de endereço, sem avisos chatos! Parabéns, seus sites locais agora rodam com HTTPS!
Um Lembrete Importante
- Só para Usar no Seu Computador: Este certificado é só para você, no seu computador. Para um site na internet, você precisa de um certificado de uma empresa “oficial” (como o Let’s Encrypt, que é grátis!).
- Validade: Seu certificado dura 1 ano. Quando acabar, é só repetir os passos 2 e 3 para gerar um novo e recolocá-lo.
Com essas dicas, seu ambiente de desenvolvimento vai ficar muito mais profissional e sem aquelas mensagens que dão nos nervos!
