Contenido mixto: cómo arreglarlo en una web HTTPS

Q: ¿Los enlaces a webs con http:// son contenido mixto?

No. Un enlace normal ( ) solo lleva al visitante a otra página cuando hace clic; no carga nada en la tuya. Es contenido mixto lo que la página descarga por sí misma: imágenes, scripts, estilos, iframes, vídeos o el destino de un formulario. Aun así, si la web enlazada tiene versión HTTPS, es mejor enlazar a ella.

Por qué importa

Un recurso sin cifrar se puede leer o alterar por el camino, por ejemplo en una wifi pública, y si es un script, quien lo modifique controla tu página entera. Por eso los navegadores bloquean los scripts, estilos e iframes que llegan por HTTP, y Chrome y Firefox intentan cargar por HTTPS las imágenes, el audio y el vídeo, que se quedan sin mostrar si no están disponibles así.

Para tu negocio, el efecto se ve: fotos de producto que no aparecen, un menú o un botón que deja de funcionar, un formulario que avisa de que el envío no es seguro. Y si la web entera sigue en HTTP, Chrome la marca como “No es seguro” y pierdes la pequeña ventaja de posicionamiento de HTTPS.

Cómo lo comprueba Posiciona

Si la página no se sirve por HTTPS, la puntuación es 0. Si lo hace, buscamos en el HTML ya cargado recursos con direcciones http://: imágenes (también en srcset), scripts, iframes, audio, vídeo, hojas de estilo, iconos, precargas, objetos incrustados y formularios que envían los datos por HTTP. Con alguno, 30; sin ninguno, 100. Los enlaces normales a otras webs con http:// no cuentan, porque no se cargan con la página.

En la nota de Seguridad esta comprobación cuenta como “imprescindible” (peso 5 de 5).

Cómo solucionarlo

Si tu web aún no tiene HTTPS, empieza por ahí: instala un certificado (Let’s Encrypt es gratuito) y redirige todo el tráfico de HTTP a HTTPS.
Localiza los recursos problemáticos: nuestro informe muestra los primeros, y la consola del navegador (F12 → Consola) avisa de cada recurso con “Mixed Content” al cargar la página.
Cambia http:// por https:// en esas direcciones. Para los recursos de tu propio dominio también puedes usar rutas relativas, como /img/logo.png.
Busca las direcciones antiguas donde suelen esconderse: plantillas del tema, textos de productos y entradas, widgets, menús y códigos pegados a mano.
Si un recurso externo no existe por HTTPS, descárgalo y alójalo en tu dominio, o cambia de proveedor.
Como red de seguridad, puedes enviar la cabecera Content-Security-Policy: upgrade-insecure-requests, que pide al navegador cargar por HTTPS lo que esté escrito con http://. No sustituye a corregir las direcciones: nuestro análisis las sigue viendo en el HTML.

Incorrecto y correctoHTML

<!-- Contenido mixto: la imagen se pide por HTTP -->
<img src="http://tudominio.com/img/portada.jpg" alt="Portada de la tienda">

<!-- Correcto -->
<img src="https://tudominio.com/img/portada.jpg" alt="Portada de la tienda">

Red de seguridad (cabecera HTTP)Cabecera HTTP

Content-Security-Policy: upgrade-insecure-requests

En WordPress

En Ajustes → Generales, comprueba que la “Dirección de WordPress (URL)” y la “Dirección del sitio (URL)” empiezan por https://.
Las direcciones antiguas suelen estar guardadas en la base de datos, dentro de entradas, páginas y ajustes. Haz una copia de seguridad y reemplaza http://tudominio.com por https://tudominio.com con un plugin como Better Search Replace.
Really Simple SSL (ahora Really Simple Security) incluye un corrector de contenido mixto que ayuda mientras limpias la base de datos.

En Shopify

Las tiendas Shopify ya funcionan por HTTPS; el contenido mixto suele venir de código pegado en el tema. En Tienda online → Temas → Editar código, revisa theme.liquid, las secciones y los fragmentos en busca de http://.
Revisa también las descripciones de productos, colecciones y páginas con imágenes o vídeos incrustados desde otras webs: en el editor de texto, cambia a la vista HTML para ver las direcciones.

Preguntas frecuentes

¿Por qué el navegador dice que mi web no es segura si tiene certificado?

Porque el certificado solo protege lo que se carga por HTTPS. Si la página usa un recurso o un formulario con http://, el navegador lo bloquea o avisa de que la conexión no es totalmente segura. Corrige esas direcciones y el aviso desaparece sin tocar el certificado. Si la web entera se abre por HTTP, falta la redirección a HTTPS.

¿Los enlaces a webs con http:// son contenido mixto?

No. Un enlace normal (<a href="http://…">) solo lleva al visitante a otra página cuando hace clic; no carga nada en la tuya. Es contenido mixto lo que la página descarga por sí misma: imágenes, scripts, estilos, iframes, vídeos o el destino de un formulario. Aun así, si la web enlazada tiene versión HTTPS, es mejor enlazar a ella.