El protocolo HTTPS hace que los datos transitados entre el sitio y el usuario estén encriptados. Es esencial para la seguridad, especialmente en páginas que poseen formularios con recolección de datos.

Cada vez más Google, que naturalmente es un gran influyente de las tecnologías en la web, ha estado estimulando la adopción del protocolo seguro. Actualmente ya es muy importante que el sitio transite el 100% en HTTPS.

Por estándar, las tiendas VTEX vienen con HTTPS activado solamente en las páginas del checkout, pero todo el sitio cuenta con certificado SSL (creado en el momento de indicar el dominio a VTEX, bastando entonces configurar el protocolo cada página del sitio. Al concluir la configuración, siempre que acceda a una página en HTTP el usuario será re-direccionado a la misma página en HTTPS.

Para ello, debemos:

1. Cumplir los requisitos;
2. Verificar si el sitio funciona en HTTPS;
3. Activar el HTTPS en las páginas.

Antes de activar el HTTPS es necesario que tu layout esté adecuado al uso del protocolo. Cualquier llamada en HTTP en una página HTTPS será bloqueada, pues caracteriza contenido mixto (mixed content).

Más información sobre este escenario puede encontrarse en el artículo ¿Qué es mixed content?, del mismo Google.

En esas llamadas HTTP se encuadran: referencias a imágenes, archivos CSS, JS y cualquier recurso por medio del que tu front-end realizará download y también comunicación con otras páginas y APIs (Ajax/XHR). Por supuesto, la no-carga de estos recursos puede ser perjudicial para la página, impidiendo la exhibición de ciertas imágenes, la carga de estilos del CSS o de las funciones del JS.

• Llamar un script con el siguiente snippet resultaría en problemas: <script src=“http://www.site.com/arquivos/funcao.js”></script>
• La implementación correcta sería: <script src=“https://www.site.com/arquivos/funcao.js”></script>
• También es posible usar el protocolo relativo, de modo que siga el mismo en el que es accedida la página: <script src=“//www.site.com/arquivos/funcao.js”></script>
• Para archivos hospedados en VTEX siempre debe usarse el siguiente formato, que es relativo al protocolo y al dominio accedido: <script src=“/arquivos/funcao.js”></script>

Atención: para llamar rutas externas a VTEX, verifique antes si el destino soporta HTTPS.

La forma más práctica de saber si el sitio cumple los requisitos es navegando por las páginas en HTTPS. Para hacerlo sin efectivamente activarlo basta utilizar el ambiente beta ({NOMEDALOJA}.vtexcommercebeta.com.br), en el que toda la navegación es forzada a pasar por HTTPS.

Cualquier caso de contenido mixto lo reportará el navegador. Las requisiciones bloqueadas se reportarán en la sección Network del Dev Tools.

Luego de cotejar y adecuar (de ser necesario) todo el layout, páginas y recursos del sitio, ya podemos habilitar el HTTPS sin tener problemas.

Todas las páginas del sitio deben modificarse individualmente conforme al artículo Cómo modificar el protocolo HTTP o HTTPS de las páginas de mi sitio. Notar que todas las páginas del checkout ya vienen con HTTPS activo por estándar.

Es posible cambiar el protocolo en todas las carpetas de una sola vez con el uso de nuestra API, documentada en esta colección de Postman.

Atención: evite tener el protocolo HTTPS activado sólo en algunas páginas. Al acceder a una página HTTPS, luego ir a una página HTTP de la misma tienda, el navegador intentará leer sus recursos forzosamente en HTTPS, y esto puede generar problemas.

Lo adecuado es activar el HTTPS en todo el sitio de una sola vez.

Lo mismo vale para los sitios de desktop y mobile (website secundario), donde es necesario tratar el HTTPS de ambos al mismo tiempo.

¡Este problema conocido fue solucionado! Con el uso de la nueva CDN de VTEX, el re-direccionamiento entre páginas mantiene los parámetros originales.

¡Este problema conocido fue solucionado! Ahora las URLs do XML seguirán el mismo protocolo configurado para la página de producto.