Ativar HTTPS em todo o site

Aparência da Loja

Augusto Garrucho

Augusto Garrucho

Última atualização

O protocolo HTTPS faz com que os dados trafegados entre o site e o usuário estejam criptografados. É essencial para a segurança, especialmente em páginas que possuem formulários com coleta de dados.

Cada vez mais o Google, que naturalmente é um grande influenciador das tecnologias na web, vem estimulando a adoção do protocolo seguro. Hoje em dia, já é bastante importante que o site trafegue 100% em HTTPS.

Por padrão as lojas VTEX vêm com HTTPS ativado somente nas páginas do checkout, mas todo o site conta com certificado SSL (criado no momento de apontar o domínio à VTEX), bastando então configurar o protocolo cada página do site. Ao concluir a configuração, sempre que for acessada uma página em HTTP o usuário será redirecionado para a mesma página em HTTPS.

Para isso devemos:

  1. Atender aos requisitos;
  2. Verificar se o site funciona em HTTPS;
  3. Ativar o HTTPS nas páginas.

Requisitos

Antes de ativar o HTTPS é preciso que o seu layout esteja adequado ao uso do protocolo. Qualquer chamada em HTTP numa página HTTPS será barrada, pois caracteriza conteúdo misto (mixed content).

Mais informações sobre este cenário podem ser encontradas no artigo O que é conteúdo misto?, do próprio Google.

Nessas chamadas HTTP se enquadram: referências a imagens, arquivos CSS, JS e qualquer recurso por meio do qual seu front-end fará download e também comunicação com outras páginas e APIs (Ajax/XHR). Naturalmente, o não carregamento destes recursos pode ser prejudicial à página, impedindo a exibição de certas imagens, o carregamento de estilos do CSS ou das funções do JS.

Exemplos

  • Chamar um script com o seguinte snippet resultaria em problemas: <script src="http://www.site.com/arquivos/funcao.js"></script>
  • A implementação correta seria: <script src="https://www.site.com/arquivos/funcao.js"></script>
  • Também é possível usar o protocolo relativo, de modo a seguir o mesmo em que a página for acessada: <script src="//www.site.com/arquivos/funcao.js"></script>
  • Para arquivos hospedados na VTEX sempre deve ser usado o seguinte formato, que é relativo ao protocolo e ao domínio acessado: <script src="/arquivos/funcao.js"></script>

Atenção: para chamar rotas externas à VTEX, verifique antes se o destino suporta HTTPS.

Verificar se o site funciona em HTTPS

A forma mais prática de saber se o site atende aos requisitos é navegando pelas páginas em HTTPS. Para fazer isso sem efetivamente ativá-lo basta utilizar o ambiente beta ({NOMEDALOJA}.vtexcommercebeta.com.br), onde toda a navegação é forçada para passar por HTTPS.

Qualquer caso de conteúdo misto será reportado pelo navegador. As requisições barradas serão reportadas na seção Network do Dev Tools.

Ativar o HTTPS nas páginas

Após conferir e adequar (se necessário) todo o layout, páginas e recursos do site, já podemos habilitar o HTTPS sem ter problemas.

Todas as páginas do site devem ser alteradas individualmente conforme o artigo Como alterar o protocolo HTTP ou HTTPS das páginas do meu site. Note que todas as páginas do checkout já vem com HTTPS ativo por padrão.

Atualmente não há como ativar o HTTPS em todas as páginas de uma vez só.

Limitações

Perda de parâmetros

Este problema conhecido foi solucionado! Com o uso da nova CDN da VTEX, o redirecionamento entre páginas mantém os parâmetros originais.

URLs do XML

Este problema conhecido foi solucionado! Agora as URLs do XML irão seguir o mesmo protocolo configurado para a página de produto.