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.

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 é mixed content?, 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.

• 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.

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.

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 podem 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.

É possível alterar o protocolo em todas as pastas de uma única vez com o uso de nossa API, documentada nesta coleção do Postman.

Atenção: evite ter o protocolo HTTPS ativado somente em algumas páginas. Ao acessar uma página HTTPS, depois ir para uma página HTTP da mesma loja, o navegador tentará fazer a leitura dos seus recursos forçadamente em HTTPS, e isso pode gerar problemas.

O adequado é ativar o HTTPS em todo o site de uma única vez.

O mesmo vale para websites desktop e mobile (website filho), aonde é necessário tratar o HTTPS de ambos ao mesmo tempo.

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

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