Como instalar certificado SSL no XAMPP em localhost Linux Ubuntu

Instalar certificado SSL em localhost no XAMPP, é muito importante principalmente se utilizamos um ambiente local de desenvolvimento para trabalhar nos nossos projetos. Algumas funcionalidades dependem que o domínio tenha https para funcionar de maneira correta. Se você está procurando por uma forma de instalar um certificado SSL em ambiente local provável que você se deparou com algum problema que soliciatava uma conexão segura.

O que é um certificado SSL

Certificado SSL quer dizer Secure Sockets Layer, é um certificado digital que autentica a identidade de um site e também permite uma conexão encriptada entre usuário e servidor do site, em outras palavras cria um ligação criptografada entre o servidor web e o navegador. Antigamente não era um requisito presente na maioria dos sites, hoje em dia qualquer website precisa de um certificado SSL para garantir transações seguras e manter as informações dos usuários seguras.

Por que instalar certificado SSL no XAMPP em localhost

É interessante mesmo em ambiente local quando estamos desenvolvendo, procurar manter uma compatibilidade e configuração o mais parecido possível com ambiente em produção, por isso algumas vantagens de ter um certificado SSL instalado em localhost:

• Desenvolvimento seguro: Como já foi dito é importante manter um ambiente semelhante ao em produção e usar HTTPS ajuda a identificar possíveis problemas relacionados a segurança ainda em um estágio inicial de desenvolvimento;
• Testar funcionalidades sensíveis à segurança: Se estiver trabalhando em uma aplicação web ou site que depende de autenticação, autorização ou criptografia de dados é importante testar essas funcionalidades em um abiente seguro;
• Evitar erros de conteúdo misto: Quando estamos desenvolvendo nossa aplicação ou site que usa recursos HTTP ou HTTPS, pode ocorrer um erro de conteúdo misto. Quando você acessa o site por HTTPS e carrega recursos HTTP.
• Integração com serviços externos: Alguns serviços exigem que tenhamos um certificado SSL, mesmo em ambiente de desenvolvimento local.

Antes de tudo precisamos nos certificar de ter instalado o XAMPP na nossa máquina linux, se você ainda não tem, sugiro ver esse artigo, que mostra como instalar.

Passo a passo como instalar ssl no XAMPP

Primeiramente, vamos acessar o seguinte caminho /opt/lampp/etc.

Você também pode via terminal criar a pasta através do comando mkdir, basta digitar esse comando dentro da etc seguido do nome da nova pasta.

mkdir openssl

ainda no terminal e dentro do novo diretório que acabamos de criar, vamos digitar o seguinte comando:

openssl req -x509 -nodes -new -sha256 -days 1024 -newkey rsa:2048 -keyout server.key -out server.pem -subj "/C=BR/CN=Localhost-Root-CA"
openssl x509 -outform pem -in server.pem -out server.crt

Agora, crie dentro da pasta openssl um arquivo chamado domains.ext. Digite o seguinte comando no terminal para criar o arquivo:

touch domains.ext

Agora abra o domains.ext com seu editor de texto e cole o seguinte código nele:

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

Após colar o código e salvar o seu arquivo, seguimos com digitando o seguinte comando no terminal:

openssl req -new -nodes -newkey rsa:2048 -keyout localhost.key -out localhost.csr -subj "/C=BR/ST=SP/L=Sao Paulo/O=Localhost-Certificates/CN=localhost.local"
openssl x509 -req -sha256 -days 1024 -in localhost.csr -CA server.pem -CAkey server.key -CAcreateserial -extfile domains.ext -out localhost.crt

Você pode trocar as informações de país, Estado e localidade.

Sua pasta openssel deve ter os seguintes arquivos:

Agora, acesse o arquivo httpd-ssl.conf no seguinte caminho: /opt/lampp/etc/extra/httpd-ssl.conf.

Na linha 106 mude de “/opt/lampp/etc/ssl.crt/server.crt” para “/opt/lampp/etc/openssl/localhost.crt” e na linha 116 de “/opt/lampp/etc/ssl.key/server.key” para “/opt/lampp/etc/openssl/localhost.key”

Pode salvar o arquivo e reinciar o XAMPP.

Agora precisamos fazer uma última configuração no navegador, acesse o seguinte caminho no seu chrome: chrome://settings/certificates

Clique em Authorities e vá em import:

Navegue até o arquivo server.pem através do seguinte caminho /opt/lampp/etc/openssel/server.pem. importe o arquivo e marque todas as opções

Feito isso, basta acessar novamente seu localhost e já estará navegando em ambiente seguro.

Conclusão

Agora os problemas que você estava enfrentando por não ter uma conexão segura no seu servidor local vai estar resolvido, se teve alguma dúvida durante o processo, volte alguns passos e faça novamente. Não se esqueça de reiniciar o XAMPP.