Ativar HTTPS em todo o site

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 DNS), 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.

Atente-se também às limitações atuais.

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, impedido 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

Conforme documentado neste problema conhecido, ao redirecionar o usuário de uma página HTTP para uma HTTPS, caso a página de origem (HTTP) contenha parâmetros desconhecidos pela VTEX, eles serão removidos da página de destino (HTTPS).

Serão mantidos apenas os parâmetros de UTM e os de uso da própria VTEX.

Isso pode afetar referências externas, sejam links de anúncios, comparadores de preço, indexados em outras páginas, ou de qualquer natureza, mas que dependam destes parâmetros que serão removidos, sendo geralmente de rastreamento de acesso e/ou conversão.

É necessário que todos os links que dependam destes parâmetros sejam alterados para a URL com HTTPS.

URLs do XML

O XML gerado pela VTEX envia as URLs somente como HTTP. Conforme documentado neste problema conhecido, atualmente não é possível gerar um XML com URLs HTTPS.

Isso afeta principalmente o XML do Google Shopping, que depende do parâmetro gclid, removido conforme limitação anterior. Em casos como este, não deve ser usado o XML. Em vez disso, use a integração com o Google Shopping via API.