¿Cómo eliminar la advertencia de contenido mixto (Mixed Content)?

Has instalado un certificado SSL en tu sitio, pero el candado de la barra de direcciones sigue sin aparecer o, con un signo de exclamación, dice "no seguro". La causa más frecuente de esto es el contenido mixto (mixed content): mientras la página en sí se carga con HTTPS, algunos de sus recursos se siguen solicitando a través de HTTP. En este artículo te explicamos cómo encontrar el problema y solucionarlo de forma permanente.

¿Qué es el contenido mixto?

Cuando una página segura (https://) carga un recurso inseguro (http://), el navegador lo considera una brecha de seguridad. Hay dos tipos:

  • Contenido mixto pasivo: recursos como imágenes, vídeo y audio. El navegador suele cargarlos, pero retira el candado y escribe una advertencia en la consola.
  • Contenido mixto activo: scripts, hojas de estilo (CSS), iframes, llamadas XHR/fetch. Como estos podrían comprometer la página, el navegador los bloquea y tu página se ve rota.

Paso 1 — Encuentra los recursos culpables

Abre las herramientas de desarrollo del navegador (F12) y mira la pestaña Console. Las advertencias de contenido mixto aparecen listadas con claridad:

Mixed Content: The page at 'https://tudominio.com/' was loaded over HTTPS,
but requested an insecure resource 'http://tudominio.com/img/logo.png'.
This content should also be served over HTTPS.

Cada línea te dice qué recurso se ha cargado con HTTP. Elabora esta lista para determinar las direcciones que hay que corregir.

Imagen: <advertencias de contenido mixto en la consola de DevTools>
La consola de las herramientas de desarrollo lista uno a uno los recursos inseguros.

Paso 2 — Corrige las direcciones de los recursos

La solución más permanente es poner los prefijos http:// de los recursos de la página como https://. Si es posible, usa rutas relativas al protocolo o relativas a la raíz que no incluyan el dominio:

<!-- Incorrecto -->
<img src="http://tudominio.com/img/logo.png">
<script src="http://cdn.ejemplo.com/lib.js"></script>

<!-- Correcto -->
<img src="https://tudominio.com/img/logo.png">
<img src="/img/logo.png">                  <!-- relativa a la raíz, la más segura -->
<script src="https://cdn.ejemplo.com/lib.js"></script>

No olvides tampoco las definiciones url(http://...) dentro de los archivos CSS ni los valores background-image incrustados.

Paso 3 — Reemplaza en masa las direcciones antiguas de la base de datos

En los sistemas de gestión de contenidos (CMS), las entradas antiguas pueden estar llenas de enlaces http:// en la base de datos. Para actualizarlos en masa puedes usar una consulta de base de datos. Haz primero una copia de seguridad obligatoriamente y, después, ejecuta una actualización parecida a esta:

-- ¡Haz primero una COPIA DE SEGURIDAD!
UPDATE contenidos
SET cuerpo = REPLACE(cuerpo, 'http://tudominio.com', 'https://tudominio.com');

Adapta los nombres de la tabla y de las columnas a tu propio esquema.

Paso 4 — Solución en masa: upgrade-insecure-requests

Si es difícil corregir uno a uno cientos de enlaces antiguos, puedes añadir una cabecera de seguridad que le indique al navegador que actualice automáticamente todas las peticiones HTTP a HTTPS. Esto funciona si existe la versión HTTPS del mismo recurso:

# Nginx
add_header Content-Security-Policy "upgrade-insecure-requests";
<!-- o dentro del <head> del HTML -->
<meta http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests">

Este método no es una solución para los recursos que no tienen versión HTTPS en un servidor externo; ese tipo de recursos cámbialos por una alternativa que ofrezca HTTPS o trasládalos a tu propio servidor.

Paso 5 — Limpia la caché y verifica

Después de los cambios, limpia la caché del navegador y, si la hay, del CDN; a continuación, abre la página en una pestaña privada y confirma en F12 → Console que ya no quedan advertencias. Si el icono del candado ha vuelto, el problema está resuelto.

Trampas frecuentes

  • Direcciones codificadas en duro (hardcoded): enlaces http:// incrustados en los archivos del tema y de los plugins.
  • Scripts externos de publicidad/analítica: elimina o actualiza los recursos de terceros que no admitan HTTPS.
  • Códigos antiguos de inserción de redes sociales: sustitúyelos por códigos de inserción nuevos y compatibles con HTTPS.

Resumen

El contenido mixto surge de los recursos HTTP que quedan en una página HTTPS y hace que se pierda el candado. Encuentra los culpables desde la consola, pon las direcciones como https:// y, si es necesario, apóyate en upgrade-insecure-requests. Si aún no tienes certificado o necesitas renovarlo, genéralo con nuestro asistente de SSL gratuito y descarga el paquete ZIP.