Solución de errores de contenido mixto

Resuelve errores con contenido mixto para asegurar que el navegador web de un visitante no bloquee los recursos HTTP que se sirven en HTTPS.


Información general

Los dominios añadidos a Cloudflare reciben certificados SSL y pueden servir tráfico en HTTPS. Sin embargo, tras comenzar a usar Cloudflare, algunos clientes notan contenido perdido o problemas en la representación de la página cuando sirve tráfico HTTPS por primera vez.

En general, el problema se debe a una solicitud de recursos HTTP de una página web que se sirve en HTTPS.  Por ejemplo, escribes https://ejemplo.com en un navegador y la página contiene una imagen de referencia a través de HTTP en el HTML a <img src="http://ejemplo.com/recurso.jpg">.

Normalmente, si tu sitio web carga todos los recursos de manera segura en HTTPS, los visitantes observan un icono de candado (verde, en general) en la barra de direcciones de su navegador:

green-lock-icon.png

Esto indica que tu sitio tiene un certificado SSL en funcionamiento y todos los recursos cargados por el sitio se cargan a través de HTTPS. El candado verde garantiza a los visitantes que su conexión es segura. Uno de los indicadores del contenido mixto es que aparecen iconos diferentes en lugar del icono de candado verde.

Otros motivos de los problemas de representación del contenido son Rocket Loader y Auto-Minify.  Prueba deshabilitar ambas funciones si no ves errores de contenido mixto.

Indicadores de la aparición de contenido mixto

La mayoría de los navegadores modernos bloquean las solicitudes HTTP en páginas HTTPS seguras. El contenido bloqueado puede incluir imágenes, JavaScript, CSS u otro contenido que afecte la apariencia o el comportamiento de la página.

A continuación, hay indicaciones de que tu navegador web observa contenido mixto para el sitio web solicitado:

  • Firefox
    Junto a la URL, observas un triángulo amarillo que recomienda precaución:
    yellow-warning-triangle.png
  • IE (versión 10)
    Observas mensajes de advertencia con el texto: “Solamente se muestra el contenido seguro”:
    only-secure-content-message.png
  • Microsoft Edge
    Observas un mensaje de advertencia con el texto: “Solamente observas contenido seguro”:
    edge-insecure-content.png
  • Chrome
    Observas un símbolo de información o advertencia junto a la URL:
    information-warning.png

En cuanto a las advertencias de contenido mixto, el navegador web carga los recursos, pero los usuarios no ven el icono de candado verde en la URL. Los mensajes de advertencia aparecen dentro de las herramientas de depuración del navegador:

mixed-content-warning.png

En cuanto a los errores de contenido mixto, el navegador se niega a cargar los recursos cuando la conexión no es segura:

mixed-content-error.png

Puedes encontrar información relativa al uso de las herramientas de depuración del navegador para localizar estos problemas en la documentación de Chrome y Firefox. Como alternativa, puedes ver la fuente de tu página y encontrar referencias específicas de http:// sobre rutas hacia otros recursos.


Solución

Hay dos métodos para solucionar los errores de contenido mixto.

1. Carga todos los recursos a través de tu fuente HTML sin especificar los protocolos HTTP o HTTPS. Por ejemplo:

     //domain.com/path/to.file

     en lugar de

     http://domain.com/path/to.file

2. Según tu sistema de administración de contenido, revisa los complementos que reescriben automáticamente los recursos HTTP a HTTPS. Dentro de la aplicación SSL/TLS, Cloudflare proporciona tal sistema a través de Automatic HTTPS Rewrites.

Cloudflare recomienda a los usuarios de WordPress que instalen el complemento de WordPress de Cloudflare y habiliten la opción Automatic HTTPS Rewrites dentro del complemento. Como alternativa, Cloudflare recomienda los complementos SSL insecure content fixer o Really Simple SSL para reemplazar automáticamente el HTTP con HTTPS.

Recursos relacionados

¿No has encontrado una respuesta satisfactoria?

Nuestra herramienta de búsqueda puede contestar el 95% de las preguntas más comunes y es la mejor manera de conseguir una respuesta rápida.

Tecnología de Zendesk