Error de contenido mixto tras instalar SSL: solución

Has instalado un certificado SSL y tu página web funciona con HTTPS, pero el navegador muestra un aviso de que la conexión "no es totalmente segura". El candado aparece en gris o se muestra un triángulo de advertencia. Se trata de un error de contenido mixto (mixed content): tu página se carga por HTTPS, pero contiene elementos que todavía se obtienen por HTTP.

¿Qué es el contenido mixto?

El contenido mixto aparece cuando una página HTTPS carga recursos (imágenes, scripts, hojas de estilo, fuentes) a través de una conexión HTTP sin cifrar. El navegador lo considera un riesgo de seguridad y muestra una advertencia.

Hay dos tipos de contenido mixto:

• Contenido mixto pasivo: imágenes, vídeos y audio que se cargan por HTTP. El navegador los carga, pero muestra una advertencia.
• Contenido mixto activo: scripts, hojas de estilo e iframes que se cargan por HTTP. El navegador los bloquea de forma predeterminada, lo que puede dejar tu página web rota.

Encontrar contenido mixto con Chrome DevTools

Sigue estos pasos para encontrar contenido mixto en tu página web:

1. Abre Chrome DevTools

Ve a tu página web en Google Chrome y pulsa F12 (o clic derecho → Inspeccionar). Haz clic en la pestaña "Consola.

2. Busca las advertencias

Las advertencias de contenido mixto aparecen marcadas en amarillo o rojo y tienen este aspecto:

Mixed Content: The page at 'https://example.nl/' was loaded over HTTPS, but requested an insecure image 'http://example.nl/images/logo.png'. This content should also be served over HTTPS.

Cada advertencia te indica exactamente qué archivo se carga por HTTP y en qué página.

3. Comprueba varias páginas

El contenido mixto puede variar de una página a otra. Comprueba como mínimo tu página de inicio, el blog y las páginas de producto y de contacto. Si quieres un análisis completo, puedes usar una herramienta como WhyNoPadlock.com.

Resolver el contenido mixto

1. Cambia las URL HTTP escritas de forma fija en tu base de datos

La mayor parte del contenido mixto en WordPress se debe a URL que están guardadas como http:// en la base de datos. Usa el plugin Better Search Replace:

1. Instala y activa Better Search Replace
2. Busca: http://example.nl
3. Reemplaza por: https://example.nl
4. Selecciona todas las tablas
5. Ejecuta primero una dry run (simulación) para comprobar cuántos reemplazos se harán
6. Ejecuta el reemplazo real

Atención: haz siempre una copia de seguridad de la base de datos antes de ejecutar una búsqueda y reemplazo.

2. Usa el plugin Really Simple SSL

El plugin Really Simple SSL resuelve automáticamente la mayor parte del contenido mixto:

1. Instala y activa Really Simple SSL
2. El plugin detecta automáticamente tu certificado SSL
3. Haz clic en "Activar SSL
4. El plugin reescribe las URL HTTP a HTTPS en la salida

Es una solución rápida, pero es mejor cambiar las URL de forma permanente en la base de datos (método 1) para no depender de un plugin.

3. Fuerza HTTPS con .htaccess

Asegúrate de que todo el tráfico se redirija a HTTPS:

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

Esto no resuelve directamente el contenido mixto (solo redirige las solicitudes de página, no los recursos incrustados), pero sí garantiza que los visitantes lleguen siempre por HTTPS.

4. Modifica los archivos del tema y de los plugins

A veces los archivos de temas o plugins contienen URL HTTP escritas de forma fija. Busca en los archivos de tu tema:

• http:// en las URL de imágenes
• http:// en las etiquetas de scripts y hojas de estilo
• Recursos externos que solo estén disponibles por HTTP

Sustituye http:// por https:// o usa URL relativas al protocolo (//example.nl/...).

5. Comprueba los recursos externos

Si tu página web carga recursos de servicios externos (fuentes, analítica, widgets), comprueba que estén disponibles por HTTPS. La mayoría de los servicios modernos son compatibles con HTTPS. Si un recurso externo solo está disponible por HTTP, busca una alternativa o aloja el archivo en tu propio servidor.

Evitar el contenido mixto

• Instala SSL en cuanto crees tu página web: así todas las URL se guardan desde el principio como HTTPS
• Usa URL relativas: /images/logo.png en lugar de http://example.nl/images/logo.png
• Configura la URL del sitio de WordPress con HTTPS: Ajustes → Generales → ambas URL con https://
• Content Security Policy: añade una cabecera CSP que bloquee el contenido mixto: Content-Security-Policy: upgrade-insecure-requests

Preguntas frecuentes sobre el contenido mixto

¿El contenido mixto es peligroso para mis visitantes?

El contenido mixto pasivo (imágenes) supone un riesgo limitado. El contenido mixto activo (scripts, hojas de estilo) es un riesgo de seguridad serio, porque un atacante puede interceptarlo y modificarlo. Los navegadores modernos bloquean automáticamente el contenido mixto activo, pero esto puede dejar tu página web rota.

¿Por qué veo contenido mixto después de instalar un certificado SSL?

Porque el contenido de tu página web (páginas, entradas, widgets) sigue apuntando a recursos a través de http://. Instalar un certificado SSL cifra la conexión, pero no cambia automáticamente las URL de tu base de datos ni de tus archivos. Debes actualizar esas URL a mano o con un plugin.

¿Really Simple SSL resuelve todo el contenido mixto?

El plugin resuelve la mayor parte del contenido mixto reescribiendo las URL en la salida HTML. Pero es una solución en tiempo de ejecución: la base de datos sigue conteniendo URL http://. Para una solución permanente, es mejor ejecutar una búsqueda y reemplazo. Aun así, el plugin es una buena solución rápida si quieres resolver el problema de inmediato.

¿El contenido mixto puede afectar a mi SEO?

Sí. Google da preferencia a las páginas web HTTPS totalmente seguras. Las advertencias de contenido mixto pueden marcar tu página web como "no totalmente segura", lo que reduce la confianza de los visitantes y puede influir indirectamente en tu posicionamiento. Resuelve siempre el contenido mixto después de instalar un certificado SSL.