Como instalar certificado SSL em localhost para XAMPP

Neste tutorial passo a passo, tentarei explicar o passo a passo para instalar certificado SSL em localhost para XAMPP no Windows 10.

As atualizações mais recentes do navegador Chrome têm se tornado um desafio para o desenvolvimento local. Não apenas desabilitaram o uso do domínio .dev para o desenvolvimento local, mas também implementaram uma configuração específica no certificado SSL para indicar que o site é seguro.

Quais vantagens de instalar certificado SSL em localhost para XAMPP

Instalar um certificado SSL em localhost para o XAMPP oferece vantagens como a capacidade de testar e desenvolver sites ou aplicativos da web com segurança, simular um ambiente de produção mais próximo e garantir a proteção de dados sensíveis durante o desenvolvimento, preparando melhor o projeto para implantações em servidores ao vivo.

Na minha instalação do XAMPP, basicamente tenho um clone para os sites que gerencio. E todos eles (é claro) usam SSL / HTTPS.

Nesta passo a passo, criaremos SSL e configuraremos o site demo.wordpress.dev.


Configurar SSL no Xampp


Primeiramente vamos verificar se o módulo ssl_module está ativo em c:\xampp\apache\conf\httpd.conf:

LoadModule ssl_module modules/mod_ssl.so

Caso tenha um # a frente, exclua e salve o arquivo.

A princípio a instalação padrão do XAMPP estar em C:\xampp\apache. Nesse sentido, crie um arquivo com o nome de v3.ext com este conteúdo:

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
DNS.2 = demo.wordpress.dev

Em seguida, na pasta C:\xampp\apache edite o arquivo makecert.bat e altere a linha de comando abaixo:

De
bin\openssl x509 -in server.csr -out server.crt -req -signkey server.key -days 365
Para
bin\openssl x509 -in server.csr -out server.crt -req -signkey server.key -days 365 -sha256 -extfile v3.ext

Antes de tudo, o valor 365 quer dizer um ano de validade, em outras palavras, fique a vontade para alterar os anos como desejar.

Do mesmo modo, ainda no aquivo, altere as duas linhas:

De
move /y server.crt .\conf\ssl.crt
move /y server.key .\conf\ssl.key
Para
copy /y server.crt .\conf\ssl.crt\wordpress.crt
copy /y server.key .\conf\ssl.key\wordpress.key

Por fim, execute como administrador o arquivo makecert.bat:

Além disso, vai pedir uma senha, informe uma que melhor você lembrar.

Enter PEM pass phrase:
Verifying - Enter PEM pass phrase:

Todavia, vá percorrendo todas as opções, muitas das informações não são obrigatórias, segue a minha lista:

Country Name: BR
State or Province Name: [OPCIONAL]
Locality Name: [OPCIONAL]
Organization Name: [OPCIONAL]
Organizational Unit Name: [OPCIONAL]
Common Name: www.seudominio.com.br
Email Address: [OPCIONAL]
A challenge Password: [OPCIONAL]
An Optional Company Name: [OPCIONAL]

Contudo, ele irá pedir novamente a senha que você inseriu no início:

Enter pass phrase for privkey.pem:

Instalando o Certificado no Windows

Nesse sentido, vamos precisar instalar o certificado no Windows. Nossos arquivos já foram copiados de forma organizada, em C:\xampp\apache\conf\ssl.crt\ e C:\xampp\apache\conf\ssl.key\

  • Siga para a pasta C:\xampp\apache\conf\ssl.crt\ e encontre o arquivo wordpress.crt.
  • Clique com o botão direito do mouse sobre ele, e depois clique em Instalar Certificado.
  • Deixe marcada a opção Usuário Atual e clique em Avançar.
  • Na tela seguinte, marque Colocar todos certificados no repositório a seguir.
  • Clique em Procurar, selecione Autoridades de Certificação Raiz Confiáveis.
  • Por fim, clique em Concluir.

Adicionando o domínio no arquivo de hosts do Windows

No arquivo host C:\Windows\System32\drivers\etc\hosts (Para editar este arquivo é preciso permissão de administrador, portanto edite em um editor como administrador), recomendo o editor Notepad++.

Adicione a seguinte linha no arquivo hosts

127.0.0.1 demo.wordpress.dev

Nesse sentido, vamos editar nosso virtual hosts em C:\xampp\apache\conf\extra\httpd-vhosts.conf, adicionando os seguintes hosts virtuais:

Acrescente os seguintes hosts virtuais no final do arquivo:

<VirtualHost demo.wordpress.dev:80>
    ServerAdmin webmaster@souzahost.com.br
    DocumentRoot "C:\xampp\htdocs\wordpress"
    ServerName demo.wordpress.dev
    ErrorLog "logs/demo.wordpress.dev-error.log"
    CustomLog "logs/demo.wordpress.dev--access.log"
	<Directory "C:\xampp\htdocs\wordpress">
        AllowOverride All
        Order Allow,Deny
        Allow from All
        Header Set Access-Control-Allow-Origin "*"
    </Directory>
</VirtualHost>

<VirtualHost demo.wordpress.dev:443>
    DocumentRoot "C:\xampp\htdocs\wordpress"
    ServerName demo.wordpress.dev
    ServerAlias *.demo.wordpress.dev
    SSLEngine On
    SSLCertificateFile "C:/xampp/apache/conf/ssl.crt/wordpress.crt"
    SSLCertificateKeyFile "C:/xampp/apache/conf/ssl.key/wordpress.key"
    <Directory "C:\xampp\htdocs\wordpress">
        Options All
        AllowOverride All
       Order Allow,Deny
        Allow from All
	##Header Set Access-Control-Allow-Origin "*"
    </Directory>
</VirtualHost>

Acrescentamos um normal e outro para o ssl, apontando onde os arquivos de certificados estão.

Enfim, agora eu recomendo reiniciar a máquina. Até a próxima!