Los errores de contenido mixto en HTTPS ocurren cuando una página servida por HTTPS carga uno o más recursos (imágenes, scripts, hojas de estilo) a través de HTTP sin cifrar. El resultado: el navegador muestra una advertencia, el candado verde desaparece y tus visitantes dudan de la seguridad de tu sitio.
En este artículo encontrarás qué tipos de contenido mixto existen, cómo localizarlos y cómo corregirlos, sin importar si usas WordPress, un CMS distinto o HTML puro.
¿Qué es el contenido mixto y por qué importa?
Cuando activas HTTPS en tu dominio, el navegador espera que todos los recursos de esa página también se sirvan por HTTPS. Si alguno llega por HTTP, se produce un conflicto conocido como mixed content (contenido mixto).
Hay dos niveles de gravedad:
- Contenido mixto pasivo: imágenes, audio o video cargados por HTTP. El navegador suele mostrarlos pero elimina el candado. Riesgo medio: un atacante podría reemplazar la imagen.
- Contenido mixto activo: scripts (
<script src="http://…">), hojas de estilo, iframes o peticiones XMLHttpRequest por HTTP. El navegador los bloquea directamente porque pueden ejecutar código y comprometer toda la página.
Desde 2020, Chrome y Firefox actualizan automáticamente a HTTPS los recursos de audio y video pasivos. Pero los demás casos siguen requiriendo corrección manual.
Cómo detectar los recursos HTTP en tu página
Antes de corregir, debes saber qué está causando el error. Tienes varias herramientas:
1. Consola del navegador (DevTools)
Abre las herramientas de desarrollador con F12, ve a la pestaña Console y busca mensajes con la etiqueta Mixed Content. Cada mensaje indica la URL exacta del recurso problemático.
2. Pestaña Network (Red)
En la pestaña Network filtra por http:// en la barra de búsqueda. Verás todos los recursos que se solicitan por HTTP.
3. Herramientas en línea
Servicios como whynopadlock.com escanean tu URL y listan cada recurso mixto encontrado. Útil para auditorías rápidas sin acceso al servidor.
Cómo corregir los errores de contenido mixto
Opción 1: Cambiar URLs de HTTP a HTTPS directamente
La solución más limpia. Busca en tu código o base de datos todas las referencias http:// y cámbialas a https://. Si el recurso externo no admite HTTPS, considera alojarlo tú mismo.
Opción 2: Usar URLs relativas al protocolo
En lugar de escribir http://cdn.example.com/style.css, usa //cdn.example.com/style.css. El navegador heredará el protocolo de la página actual. Precaución: este método solo funciona si el servidor del recurso admite HTTPS.
Opción 3: La cabecera Content-Security-Policy upgrade-insecure-requests
Agrega esta directiva en tu servidor o en un <meta> en el <head>:
Content-Security-Policy: upgrade-insecure-requestsLe indica al navegador que intente cargar todos los recursos HTTP como HTTPS automáticamente. Es un parche rápido, pero no sustituye corregir las URLs en el código fuente.
Opción 4: WordPress — plugin Better Search Replace o Really Simple SSL
Si tu sitio usa WordPress y migró de HTTP a HTTPS, la base de datos suele conservar miles de URLs antiguas. Usa el plugin Better Search Replace para reemplazar http://tudominio.com por https://tudominio.com en todas las tablas. El plugin Really Simple SSL también detecta y corrige los recursos mixtos automáticamente al activarse.
Si administras tu alojamiento con un panel de control, en elenlace.com encontrarás planes de hosting que incluyen SSL gratuito y soporte técnico para este tipo de migraciones.
Verificar que el problema está resuelto
Tras aplicar las correcciones:
- Recarga la página con Ctrl+Shift+R (caché limpia) y revisa la barra de direcciones: debe mostrar el candado sin advertencias.
- Vuelve a revisar la consola del navegador; no debería haber mensajes de Mixed Content.
- Prueba con whynopadlock.com o con la herramienta SSL Labs de Qualys para una validación externa.
- Comprueba las páginas interiores más visitadas (checkout, formularios), no solo la portada.
Para un listado completo de errores SSL y sus soluciones, consulta nuestra guía de seguridad SSL.
Conclusiones clave
- El contenido mixto divide los recursos en pasivo (imágenes, video) y activo (scripts, estilos); el activo es bloqueado por el navegador.
- La consola DevTools es tu primera herramienta de diagnóstico: muestra la URL exacta de cada recurso problemático.
- La solución definitiva es cambiar todas las referencias de
http://ahttps://en el código y la base de datos. - La directiva
upgrade-insecure-requestses un parche temporal, no una solución permanente. - En WordPress, Better Search Replace y Really Simple SSL automatizan gran parte del proceso.
- Verifica siempre el resultado final con DevTools y una herramienta externa antes de dar el caso por cerrado.
¿Tienes un sitio con errores de contenido mixto que no logras resolver? El equipo de elenlace.com puede auditarlo y corregirlo por ti — contáctanos hoy.
Preguntas frecuentes
¿El contenido mixto afecta el posicionamiento en Google?
Directamente, Google no ha confirmado una penalización por mixed content. Sin embargo, la pérdida del candado seguro reduce la confianza del usuario, aumenta el rebote y puede afectar indirectamente el SEO. Además, Chrome bloquea el contenido activo, lo que puede romper la funcionalidad del sitio.
¿Por qué aparecen errores de contenido mixto después de instalar SSL?
Porque el certificado protege la conexión del servidor, pero no cambia automáticamente las URLs internas que ya estaban escritas con http:// en el código o la base de datos. Debes actualizar esas referencias manualmente o con una herramienta de búsqueda y reemplazo.
¿La directiva upgrade-insecure-requests es suficiente?
No a largo plazo. Es útil como medida transitoria, pero si el recurso externo realmente no sirve HTTPS, el navegador mostrará un error de conexión. Lo correcto es corregir las URLs en el origen.
¿Cómo evitar el problema en el futuro?
Siempre que subas imágenes, enlaces o scripts, usa URLs relativas (/ruta/al/recurso) o absolutas con https://. Si tu CMS tiene una URL base de sitio, asegúrate de que esté configurada con https:// desde el principio.
Para saber más
Otros proveedores y guías que vale la pena comparar:
