¿Qué es el contenido mixto?

El contenido mixto ocurre cuando una página web cargada a través de una conexión HTTPS segura incluye recursos (imágenes, scripts, hojas de estilo, fuentes, iframes) que se cargan a través de una conexión HTTP insegura. Esto es un problema de seguridad porque los recursos HTTP pueden ser interceptados, modificados o reemplazados por un atacante, aunque la página principal en sí esté cifrada. El icono del candado en el navegador desaparece y los visitantes ven advertencias que socavan su confianza en tu sitio.

Contenido mixto pasivo vs. activo

Los navegadores distinguen entre dos categorías de contenido mixto y manejan cada una de forma diferente:

• Contenido mixto pasivo (de visualización): Incluye imágenes, audio y vídeo cargados a través de HTTP. El riesgo es menor porque estos recursos no pueden alterar directamente el comportamiento de la página. Un atacante podría intercambiar una imagen (mostrando contenido inapropiado, por ejemplo), pero no puede inyectar código. Los navegadores antiguos cargaban contenido mixto pasivo con una advertencia. Los navegadores modernos lo bloquean cada vez más, aunque algunos todavía lo permiten con un indicador de seguridad degradado.
• Contenido mixto activo: Incluye scripts, hojas de estilo, iframes, fuentes y XMLHttpRequests cargados a través de HTTP. El contenido mixto activo es mucho más peligroso porque un script manipulado puede robar credenciales de inicio de sesión, redirigir al usuario o inyectar malware en la página. Todos los navegadores modernos bloquean el contenido mixto activo por defecto. El recurso simplemente no se carga, lo que puede romper la funcionalidad de la página por completo.

Cómo manejan los navegadores el contenido mixto

El comportamiento de los navegadores se ha vuelto más estricto con los años. Esto es lo que sucede hoy:

• Chrome: Bloquea todo el contenido mixto activo. Desde la versión 80, Chrome también actualiza automáticamente imágenes, audio y vídeo mixtos a HTTPS. Si la versión HTTPS no existe, el recurso se bloquea.
• Firefox: Bloquea el contenido mixto activo y muestra un icono de escudo en la barra de direcciones. El contenido mixto pasivo provoca una advertencia, pero aún puede cargarse en algunos casos.
• Safari: Bloquea el contenido mixto activo. El contenido mixto pasivo puede cargarse con una advertencia según la versión.
• Edge: Sigue el mismo comportamiento basado en Chromium que Chrome.

La tendencia es clara: los navegadores se están moviendo hacia bloquear todo el contenido mixto, tanto activo como pasivo. Corregir los problemas de contenido mixto ya no es opcional.

Encontrar fuentes de contenido mixto

Hay varias formas de identificar contenido mixto en tu sitio WordPress:

• Consola DevTools del navegador: Abre Chrome DevTools (F12), ve a la pestaña Console y busca advertencias amarillas o errores rojos sobre contenido mixto. Chrome te dice exactamente qué URL de recurso está causando el problema.
• Why No Padlock: Una herramienta online gratuita (whynopadlock.com) que escanea una URL y lista todos los recursos inseguros encontrados en la página. Útil para una comprobación rápida sin abrir DevTools.
• Informes de InspectWP: InspectWP escanea automáticamente tu página en busca de cualquier recurso cargado a través de HTTP en una página HTTPS y los lista todos. Esta es la forma más rápida de obtener una imagen completa de todo tu sitio.
• SSL Labs: Aunque es principalmente un comprobador de configuración SSL/TLS, también puede señalar problemas de contenido mixto en la página probada.

Causas comunes de contenido mixto en WordPress

Los problemas de contenido mixto en WordPress suelen provenir de unas pocas fuentes recurrentes:

• URLs HTTP codificadas en el contenido: Si migraste tu sitio de HTTP a HTTPS, tus entradas y páginas antiguas pueden contener todavía URLs de imágenes y enlaces que empiezan por http://. Eran correctas en su momento, pero se convirtieron en contenido mixto tras la migración.
• Activos antiguos del theme: Algunos themes antiguos o themes hijos tienen URLs HTTP codificadas en sus archivos CSS, JavaScript o de plantilla. Una hoja de estilo que carga una imagen de fondo desde http://example.com/bg.jpg crea contenido mixto.
• Recursos de plugins: Los plugins que cargan scripts o estilos externos a través de HTTP causan contenido mixto. Esto es especialmente común con plugins antiguos o mal mantenidos que no se han actualizado para HTTPS.
• Embeds externos: Iframes, vídeos incrustados o widgets de servicios de terceros que usan URLs HTTP. Si el servicio de terceros soporta HTTPS (la mayoría lo hace hoy), cambiar la URL a HTTPS lo soluciona.
• Configuración de CDN: Si tu CDN no está configurada para servir activos a través de HTTPS, cada archivo CSS, JS e imagen entregado a través de la CDN se convierte en contenido mixto.

Corregir contenido mixto en WordPress

La solución depende del origen del problema. Estas son las soluciones más comunes:

• Reemplazo de URLs en la base de datos: Para URLs HTTP codificadas en el contenido de las entradas, usa una herramienta de buscar y reemplazar para actualizar todas las instancias de http://tudominio.com a https://tudominio.com en la base de datos. El plugin Better Search Replace se usa ampliamente para esto. Te permite previsualizar los cambios antes de aplicarlos y funciona en todas las tablas de la base de datos. Crea siempre una copia de seguridad de la base de datos antes de ejecutar un buscar y reemplazar.
• SSL Insecure Content Fixer: Este plugin de WordPress corrige automáticamente las URLs inseguras al vuelo. Reescribe las URLs HTTP a HTTPS en la salida de la página sin modificar la base de datos. Es una buena solución temporal mientras corriges las causas raíz, pero añade una pequeña sobrecarga de rendimiento porque procesa cada carga de página.
• Really Simple SSL: Otro plugin popular que gestiona la transición de HTTP a HTTPS. Corrige el contenido mixto filtrando la salida de la página, configura redirecciones y actualiza los ajustes de URL del sitio en WordPress.
• Correcciones manuales de theme y plugin: Si el contenido mixto proviene de un archivo de theme o plugin, edita el código fuente para reemplazar http:// con https:// o, mejor aún, usa URLs relativas al protocolo (//example.com/file.js) o la función de WordPress esc_url() para generar URLs dinámicamente.

Reemplazo de URLs en la base de datos en detalle

La forma más exhaustiva de corregir contenido mixto procedente del contenido antiguo de las entradas es un buscar y reemplazar en la base de datos. Este es el proceso:

1. Haz una copia de seguridad de tu base de datos. Esto no es opcional; un buscar y reemplazar incorrecto puede romper todo tu sitio.
2. Instala y activa el plugin Better Search Replace.
3. Busca http://tudominio.com y reemplaza con https://tudominio.com.
4. Selecciona todas las tablas de la base de datos (especialmente wp_posts, wp_postmeta y wp_options).
5. Ejecuta primero una prueba en seco para ver cuántas sustituciones se harían.
6. Si los números parecen correctos, ejecuta el reemplazo real.

Para usuarios de WP-CLI, el comando wp search-replace 'http://tudominio.com' 'https://tudominio.com' --all-tables hace lo mismo desde la línea de comandos. WP-CLI maneja correctamente los datos serializados en la base de datos, lo cual es crítico para opciones y ajustes de widgets.

Redirección HTTPS mediante .htaccess

Después de corregir el contenido mixto, asegúrate de que todas las peticiones HTTP a tu sitio se redirijan a HTTPS. Esto evita que visitantes y buscadores accedan a la versión HTTP. En servidores Apache, añade estas líneas a tu archivo .htaccess:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

En servidores Nginx, añade esto a tu bloque server:

server {
    listen 80;
    server_name tudominio.com www.tudominio.com;
    return 301 https://$server_name$request_uri;
}

Esta redirección no corrige el contenido mixto por sí sola, pero garantiza que nadie visite accidentalmente la versión HTTP de tu sitio. Combinada con el reemplazo de URLs en la base de datos y las correcciones de plugins, completa la migración a HTTPS.

Qué comprueba InspectWP

InspectWP escanea tu página en busca de cualquier recurso cargado a través de HTTP en una página HTTPS y los lista todos, incluyendo el tipo de recurso y la URL completa. Esto te da una lista clara de exactamente qué necesitas corregir. Las páginas sin problemas de contenido mixto muestran un resultado limpio, confirmando que tu configuración HTTPS funciona correctamente.