Qué Significa Contenido Mixto y Por Qué el Navegador Bloqueó tu Imagen

Cargaste una página a través de HTTPS, el candado está en la barra de direcciones, y sin embargo una imagen falta, un script no se ejecutó, o un widget completo no apareció. Abre la consola y allí está: “Mixed Content: The page was loaded over HTTPS, but requested an insecure resource over HTTP. This request has been blocked.”

La página es segura. Algo que solicitó no lo era, y el navegador se negó a descargarlo. Eso es todo lo que es un error de contenido mixto, y la solución suele ser cambiar apenas un carácter, pero ayuda entender por qué el navegador es tan estricto con una única imagen faltante.

Qué Significa ‘Mixto’ Aquí

Una página servida a través de HTTPS se entrega cifrada, y el candado es una promesa al visitante de que todo en ella llegó de esa manera. Luego la página solicita un recurso, una imagen, un script, una hoja de estilos, una fuente, utilizando una dirección http:// plana. Ese recurso llegaría sin cifrar, a través de una conexión que cualquiera en la red puede leer o modificar.

Eso es la mezcla: una página segura y una solicitud insegura dentro de ella. El navegador no romperá silenciosamente la promesa que hizo el candado, así que interviene. Lo que hace a continuación depende de cuán peligroso sea el recurso.

Bloqueado o Solo Advertido

No todo el contenido mixto se trata igual, y esta es la parte que explica por qué a veces una imagen se carga con una advertencia y a veces un script desaparece completamente.

El contenido activo se bloquea completamente. Scripts, hojas de estilos, iframes y cualquier cosa que pueda cambiar la página o ejecutar código. Si uno de estos se solicita a través de HTTP, el navegador se niega a cargarlo en absoluto, porque un script modificado podría reescribir la página completa. Este es el que rompe funcionalidades: un widget de pago, una etiqueta de análisis, un mapa que nunca aparece.

El contenido pasivo se carga, con una advertencia, o se actualiza. Imágenes, video y audio, cosas que se muestran pero no pueden ejecutar código. Los navegadores más antiguos cargaban estos a través de HTTP e degradaban el candado para advertirte. Los modernos cada vez más intentan obtenerlos a través de HTTPS en su lugar, y solo fallan visiblemente si eso no funciona. Entonces una imagen faltante y un script muerto a menudo son el mismo problema subyacente, presentándose con diferentes niveles de gravedad.

Cómo Encontrarlo y Repararlo

La consola nombra el recurso exacto. Lee la URL de la que se queja, y la solución es casi siempre solicitar ese recurso a través de https:// en lugar de http://.

• Si el recurso tiene una versión HTTPS, úsalo. La mayoría la tiene; cambiar http:// a https:// en tu propio marcado es la solución completa. Si tienes muchos, una //example.com/... relativa al protocolo o una directiva upgrade-insecure-requests de content-security-policy los arregla en lote.
• Si el recurso no tiene una versión HTTPS, no puedes incluirlo. Un activo de terceros servido solo a través de HTTP debe ser reemplazado, proxied a través de tu propio servidor HTTPS, o eliminado. No hay una configuración del navegador que haga esto seguro, y decirle a un visitante que desactive la protección no es una solución.
• Vigílalo en los datos, no solo en el marcado. Una URL almacenada en tu base de datos, devuelta por una API, o pegada en un campo de texto enriquecido es la razón usual por la que el contenido mixto sobrevive a una migración a HTTPS: las plantillas se repararon pero el contenido no.

Una solicitud que falla de esta manera parece mucho a una que falló por otras razones, por eso importa la línea de la consola. Si la consola en cambio dice que la solicitud fue bloqueada por la política CORS, o vuelve como TypeError: Failed to fetch, eso es un problema diferente con una solución diferente, la primera palabra del error está haciendo mucho trabajo.

Por Qué una Captura de Pantalla No es Suficiente para Reportar Uno

Una falla de contenido mixto es invisible en una captura de pantalla: la página simplemente tiene un hueco donde algo debería estar, y la razón vive en la consola, que la persona que la reporta casi con certeza no ha abierto. “La imagen falta” y “el widget de pago no se cargó” son los reportes que recibes, y ninguno de ellos lleva la línea de la consola que dice exactamente qué recurso HTTP en una página HTTPS fue rechazado.

El registro de la consola que captura es donde vive el mensaje de contenido mixto, con el recurso nombrado y todo, así que quien reciba el reporte puede ver cuál URL insegura arreglar sin tener que reproducir la página y abrir herramientas de desarrollador para encontrarla.

En un Párrafo

El contenido mixto es un recurso inseguro http:// solicitado por una página segura https://, y el navegador lo bloquea, completamente para scripts y otro contenido activo, más suavemente para imágenes, en lugar de romper la promesa que hace el candado. La solución es casi siempre solicitar el recurso a través de HTTPS, tanto en tu marcado como en tus datos almacenados; si no tiene una versión HTTPS no puede incluirse de manera segura en absoluto. Y debido a que la falla es un hueco silencioso en la página con la razón oculta en la consola, vale la pena capturarla en lugar de describirla.