Las advertencias de contenido mixto son uno de los problemas más comunes con los que se encuentran los propietarios de sitios WordPress después de cambiar de HTTP a HTTPS. Aparecen cuando tu sitio se carga sobre una conexión segura HTTPS, pero algunos recursos de la página (imágenes, scripts, hojas de estilo, iframes) se siguen solicitando por HTTP plano. Los navegadores tratan esto como un riesgo de seguridad, y con razón. La buena noticia es que el contenido mixto es sencillo de corregir una vez que entiendes de dónde viene.
Cómo se ven las advertencias de contenido mixto en tu navegador
Cuando una página tiene contenido mixto, los navegadores reaccionan de distintas formas según el tipo de recurso. Para el contenido mixto "activo" (scripts, iframes, hojas de estilo), la mayoría de navegadores bloquean el recurso por completo y muestran una advertencia en la consola del desarrollador. Para el contenido mixto "pasivo" (imágenes, audio, vídeo), el recurso puede seguir cargándose, pero el icono del candado en la barra de direcciones desaparecerá o mostrará un triángulo de advertencia.
En Chrome verás mensajes como "Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure resource" en la consola. Firefox muestra un candado gris con un triángulo de advertencia. Safari puede bloquear silenciosamente algunos recursos sin retroalimentación visual evidente, lo que dificulta la depuración.
El resultado práctico es que tu sitio parece roto a los visitantes. Las imágenes pueden no cargarse, faltar estilos y los scripts pueden fallar al ejecutarse. Peor aún, Google considera HTTPS una señal de posicionamiento, por lo que los problemas de contenido mixto pueden perjudicar indirectamente tu SEO.
Cómo encontrar todas las fuentes de contenido mixto en tu sitio
Antes de poder corregir nada, necesitas una lista completa de los recursos HTTP que se están cargando. Hay varias formas fiables de hacerlo:
- Análisis con InspectWP: ejecuta un análisis de tu sitio. La sección HTML lista cada URL insegura encontrada en la página, dándote un inventario claro de lo que hay que corregir.
- Consola DevTools del navegador: abre las herramientas de desarrollo de tu navegador (F12 o Cmd+Mayús+I en Mac), ve a la pestaña Consola y recarga la página. Cada advertencia de contenido mixto aparecerá ahí con la URL exacta del recurso problemático.
- Herramienta Why No Padlock: visita whynopadlock.com e introduce tu URL. Rastrea la página e informa de todos los recursos inseguros en una lista sencilla.
- Test de SSL Labs: aunque está pensado principalmente para comprobar tu certificado SSL, el test de Qualys SSL Labs también puede señalar problemas de contenido mixto.
En sitios con muchas páginas, conviene comprobar más que solo la portada. Prueba las páginas de aterrizaje clave, las entradas de blog (especialmente las antiguas) y cualquier página con contenido multimedia o de terceros incrustado.
Causas habituales de contenido mixto en WordPress
El contenido mixto rara vez proviene de una sola fuente. Estos son los culpables más frecuentes:
- URLs HTTP codificadas en el contenido de las entradas: si creaste entradas y páginas antes de cambiar a HTTPS, todas las URLs de imágenes, enlaces y medios incrustados en el editor de contenido seguirán usando
http://. WordPress las almacena como URLs absolutas en la base de datos. - Archivos de tema con URLs codificadas: algunos temas codifican rutas de imágenes o URLs de recursos externos con
http://en lugar de usar URLs relativas al protocolo o funciones de WordPress. - Activos de plugins: los plugins antiguos o mal mantenidos pueden encolar sus archivos CSS y JavaScript usando URLs HTTP.
- Incrustaciones e iframes externos: las incrustaciones de Google Maps, los vídeos de YouTube (códigos de incrustación antiguos), los widgets de redes sociales y los scripts publicitarios a veces usan HTTP.
- CSS personalizado o contenido de widgets: imágenes de fondo, importaciones de fuentes u otros recursos especificados en campos de CSS personalizado o widgets de texto.
- Configuración de CDN: si usas un CDN, podría estar configurado para servir activos por HTTP en lugar de HTTPS.
Paso 1: Actualizar las URLs de WordPress y del sitio
Antes de nada, asegúrate de que las URLs principales de WordPress son correctas. Ve a Ajustes y luego Generales, y verifica que tanto la Dirección de WordPress (URL) como la Dirección del sitio (URL) empiecen por https://. Si todavía muestran http://, actualízalas y guarda. Esto le indica a WordPress que genere todos los enlaces internos usando HTTPS.
Paso 2: Buscar y reemplazar URLs HTTP en la base de datos
La solución más eficaz para la gran mayoría del contenido mixto es una búsqueda y reemplazo en toda la base de datos. Esto captura las URLs codificadas en entradas, páginas, texto de widgets, campos personalizados, opciones del tema y datos serializados.
Usando WP-CLI (el método recomendado para quien se sienta cómodo con la línea de comandos):
# Always run a dry run first to see what will be changed
wp search-replace 'http://example.com' 'https://example.com' --all-tables --dry-run
# Check the output carefully, then run for real
wp search-replace 'http://example.com' 'https://example.com' --all-tables
# If your site also uses the www subdomain, run both variations
wp search-replace 'http://www.example.com' 'https://www.example.com' --all-tablesWP-CLI maneja correctamente los datos serializados, lo cual es crítico. Muchos plugins almacenan sus ajustes como arrays serializados en la base de datos, y un buscar-y-reemplazar SQL ingenuo rompería el formato de serialización.
Corregir contenido mixto con el plugin Better Search Replace
Si no tienes acceso por línea de comandos, el plugin Better Search Replace ofrece una alternativa fácil de usar:
- Instala y activa Better Search Replace desde el directorio de plugins de WordPress.
- Ve a Herramientas y luego Better Search Replace.
- En el campo "Search for", introduce
http://example.com(tu dominio real). - En el campo "Replace with", introduce
https://example.com. - Selecciona todas las tablas de la lista (Ctrl+A o Cmd+A).
- Marca "Run as dry run" primero, luego haz clic en "Run Search/Replace".
- Revisa los resultados. Si los reemplazos parecen correctos, desmarca "Run as dry run" y ejecútalo de nuevo.
Tras el reemplazo, vacía cualquier plugin de caché y comprueba tu sitio de nuevo.
Usar Really Simple SSL como solución rápida
El plugin Really Simple SSL adopta un enfoque distinto. En lugar de corregir las URLs en la base de datos, reescribe dinámicamente las URLs HTTP a HTTPS al vuelo usando búfer de salida y filtros de WordPress. Instálalo, actívalo y se encarga del resto automáticamente.
Esto funciona bien como solución inmediata, pero añade una pequeña sobrecarga de procesamiento a cada carga de página. Para obtener el mejor rendimiento, es preferible corregir las URLs en origen (a nivel de base de datos) y luego desactivar el plugin. Piensa en Really Simple SSL como una red de seguridad y no como una solución permanente.
Corregir manualmente archivos de tema y plugin
Parte del contenido mixto procede de URLs codificadas en archivos de tema o plugin en lugar de la base de datos. Busca en el directorio de tu tema activo referencias a http://:
# Search for hardcoded HTTP URLs in your theme
grep -r "http://" /path/to/wp-content/themes/your-theme/ --include="*.php" --include="*.css" --include="*.js"Reemplaza cualquier URL HTTP codificada por HTTPS o, mejor aún, usa URLs relativas al protocolo (//example.com/resource.js) o funciones de WordPress como esc_url() que respetan la configuración de protocolo del sitio.
En el caso de plugins de terceros, no edites los archivos del plugin directamente (las actualizaciones sobrescribirán tus cambios). Mejor contacta con el autor del plugin o busca una versión más reciente que admita HTTPS. Si un plugin carga consistentemente activos por HTTP, considera reemplazarlo por una alternativa mejor mantenida.
Añadir una redirección de HTTP a HTTPS
Tras corregir todo el contenido mixto en la base de datos y los archivos, configura una redirección a nivel de servidor para que cualquier petición HTTP restante se reenvíe automáticamente a HTTPS:
# Add to .htaccess (Apache)
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]Para servidores Nginx, añade esto a tu bloque server:
server {
listen 80;
server_name example.com www.example.com;
return 301 https://$host$request_uri;
}Forzar HTTPS en wp-config.php
Si tu sitio está detrás de un proxy inverso o un balanceador de carga, WordPress puede no detectar HTTPS correctamente. Añade lo siguiente a tu archivo wp-config.php:
define('FORCE_SSL_ADMIN', true);
// If behind a reverse proxy or load balancer
if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
$_SERVER['HTTPS'] = 'on';
}Verificar tus correcciones y prevenir contenido mixto futuro
Tras realizar todos los cambios, ejecuta un nuevo análisis con InspectWP. La lista de URLs inseguras en la sección HTML debería estar vacía. Abre también la consola del desarrollador del navegador y confirma que no aparecen advertencias de contenido mixto.
Para evitar que el contenido mixto vuelva a aparecer:
- Establece una cabecera Content-Security-Policy: añadir
Content-Security-Policy: upgrade-insecure-requestscomo cabecera de respuesta indica a los navegadores que actualicen automáticamente las peticiones HTTP a HTTPS. Es una buena red de seguridad. - Usa URLs relativas o HTTPS: al incrustar imágenes o recursos manualmente, usa siempre
https://o URLs relativas al protocolo. - Comprueba las incrustaciones de terceros: antes de pegar códigos de incrustación de servicios externos, verifica que usen HTTPS.
- Audita con regularidad: configura informes automáticos de InspectWP para detectar cualquier contenido mixto que aparezca tras actualizaciones de contenido o cambios de plugins.