Contenido mixto: qué es y cómo corregirlo

Una página HTTPS que sigue pidiendo algo por HTTP está sirviendo contenido mixto. El documento va cifrado. El subrecurso no. El navegador trata esa mezcla según qué sea el subrecurso. Scripts, hojas de estilo, iframes y fuentes se bloquean. Imágenes, audio y vídeo suelen cargarse, con un aviso. Un enlace plano a una URL HTTP es una navegación, no contenido mixto.

Esta guía explica esas categorías, dónde se esconden las URLs en el HTML y en el CSS, y cómo corregirlas. El Comprobador de contenido mixto lista lo que hay en el HTML del servidor. No sustituye la consola del navegador para lo que un script inserta después.

Qué es el contenido mixto

Hay contenido mixto solo cuando la página es HTTPS y un subrecurso es HTTP. Si la página misma es HTTP, no hay nada que mezclar: el documento entero ya es inseguro. La causa habitual es un paso a HTTPS que dejó las URLs incrustadas como estaban. Una plantilla, un campo del CMS o un snippet de terceros sigue conteniendo http://.

La guía de contenido mixto de MDN parte los subrecursos en dos grupos. El contenido mixto activo puede cambiar la página: scripts, hojas de estilo, iframes, objects, fetch y fuentes. El pasivo es lo que la página muestra: imágenes, audio y vídeo. El artículo de Chrome usa el mismo corte. Las peticiones activas se bloquean. Las pasivas se permiten con un aviso, y los navegadores actuales pueden subir algunas a HTTPS por su cuenta. No tomes esa subida como el arreglo. Un host que no sirve el archivo por HTTPS sigue fallando, y te costará más ver la URL original.

La URL que importa es la que pide el navegador, no la que recuerdas haber tecleado en una vista previa. Una ruta de raíz como /js/app.js hereda el esquema de la página, así que sigue en HTTPS si la página es HTTPS. Una URL sin esquema (//cdn.ejemplo/app.js) también hereda el esquema. Un http:// literal no.

Contenido mixto activo

El contenido mixto activo se bloquea porque la respuesta insegura podría cambiar la página HTTPS.

Suele estar en:

• <script src="http://...">
• <link rel="stylesheet" href="http://...">
• <iframe src="http://...">
• <object data="http://..."> y <embed src="http://...">
• un @import de una hoja de estilo HTTP
• un archivo de @font-face pedido por HTTP
• URLs de fetch, XMLHttpRequest y WebSocket escritas en JavaScript

Una revisión estática del HTML no ve los casos de JavaScript. Un script bloqueado no se ejecuta. Una hoja de estilo bloqueada no se aplica. Un iframe bloqueado queda vacío. Una fuente bloqueada cae a otra familia. La página puede verse casi bien mientras un script de pago o una hoja de maquetación nunca llegó. Por eso las URLs activas van antes que las imágenes.

Un action de formulario que envía a HTTP está en la misma familia. Una página HTTPS que hace POST a http:// o la sube el navegador o falla. Apunta el action a HTTPS, o quítalo para que el formulario envíe a la página actual.

Contenido mixto pasivo

El contenido mixto pasivo es una imagen, un audio o un vídeo pedido por HTTP.

Marcado habitual:

• <img src> y srcset
• <video>, <audio> y <source>
• el poster de un vídeo
• iconos (rel="icon", iconos de apple touch)
• url() de CSS para fondos, viñetas y bordes

Los navegadores los han cargado y han escrito un aviso. El candado de la barra puede perderse aunque el documento HTML sea HTTPS. En una red hostil la imagen se puede sustituir, y eso importa cuando la imagen es un control y no un adorno. Trata las URLs pasivas como trabajo real. Hazlas después de los scripts y las hojas bloqueadas, no en su lugar.

Qué no es contenido mixto

Un <a href="http://..."> no es contenido mixto. Seguirlo navega a otra página. El navegador no bloquea el clic como subrecurso de contenido mixto. Aun así puedes actualizar los enlaces de tu propio host para no mandar a la gente a una URL insegura. Mantén esa lista aparte de los scripts bloqueados. Una página llena de enlaces viejos no es el mismo ticket que una página cuya hoja de estilo está bloqueada.

Las etiquetas canonical, las ubicaciones de sitemap y las URLs de Open Graph que usan HTTP tampoco son contenido mixto. Son el esquema equivocado por otras razones. Corrígelas con una revisión de canonical o de etiquetas sociales. No las archives como subrecursos bloqueados.

Dónde se esconde la URL

Ver el código fuente basta en una página escrita a mano. Es un inventario flojo cuando intervienen un tema, un constructor de páginas y un gestor de etiquetas.

Trabaja en este orden:

1. Atributos del HTML: src, srcset, href de hojas e iconos, poster, data de object, action de formularios.
2. `url()` de CSS dentro de bloques <style> y de atributos style.
3. Hojas de estilo de tu propio origen. Un HTML limpio puede seguir trayendo imágenes http:// desde /app.css. Abre ese archivo, o usa un comprobador que pida un número acotado de hojas del mismo origen. Una hoja en otro host no está dentro del HTML. Si el link apunta a un tercero, abre esa URL tú.
4. El registro de red después de que corre JavaScript. Un atributo de carga diferida como data-src no es una petición hasta que un script lo copia a src. Los gestores de etiquetas inyectan scripts del mismo modo.

Si la consola informa de contenido mixto y el HTML del servidor está limpio, un script añadió la petición. La revisión del HTML mira otra capa. No es una contradicción.

Cómo corregirlo

Reescribe la URL. Ese es el arreglo. Las políticas y las cabeceras son un respaldo.

El mismo host. Cambia http://ejemplo.com/app.js por https://ejemplo.com/app.js, o por una ruta de raíz /app.js para reutilizar el esquema de la página. Luego pide la URL HTTPS. Un 404 significa que el archivo nunca se publicó en el host con TLS. Editar el esquema en la plantilla no crea el archivo.

Imágenes en un CDN. Algunos CDN sirven el mismo objeto por HTTPS. Algunos buckets viejos no. Si HTTPS devuelve un estado correcto, actualiza la plantilla o la biblioteca de medios. Si no, vuelve a subir el archivo o cambia de host. Dejar la URL HTTP porque la imagen «sigue viéndose» mantiene la página en contenido mixto.

Widgets de terceros. Una URL de script que empieza por http:// es contenido mixto activo y se bloqueará. Si el proveedor publica una URL HTTPS, usa esa. Si no, quita el widget. No hay forma segura de ejecutar un script HTTP dentro de una página HTTPS.

Fuentes. Un origen de @font-face por HTTP se bloquea. Aloja los archivos de la fuente en tu origen HTTPS, o usa la hoja HTTPS del proveedor. Lee el archivo CSS, no solo el HTML. Los temas suelen esconder la URL de la fuente en una hoja compilada.

URLs sin esquema. //cdn.ejemplo/app.js no es contenido mixto en una página HTTPS, porque el navegador pide HTTPS. Sigue siendo un hábito flojo. Esconde el esquema a la siguiente persona que lea la plantilla. Prefiere https://.

Content-Security-Policy. `upgrade-insecure-requests` le dice al navegador que pida esas URLs HTTP como HTTPS. Ayuda mientras limpias plantillas. No repara un archivo que no existe. Si la URL HTTPS responde 404, la petición falla y el registro de red ya no muestra la URL HTTP que necesitabas encontrar. Activa la política cuando sepas que las copias HTTPS existen, o mientras sigues buscando y aceptas ese enmascarado. block-all-mixed-content es la directiva más vieja, que también bloquea el contenido pasivo. Empieza por upgrade.

HSTS. Strict-Transport-Security le dice al navegador que use HTTPS en visitas posteriores a tu host. No reescribe una URL http:// de otro host. Ponla cuando tu host redirige HTTP a HTTPS y no estás sirviendo el sitio en claro a propósito. MDN documenta la cabecera.

Un orden que funciona

1. Abre la página por HTTPS y lee la consola. Anota si el mensaje dice que la petición se bloqueó o solo avisó.
2. Lista las URLs del HTML del servidor, incluidos url() de CSS y las hojas del mismo origen.
3. Reescribe primero las URLs activas: scripts, hojas de estilo, iframes, objects, fuentes y acciones de formulario.
4. Pide la versión HTTPS antes de publicar el cambio. Un estado correcto es candidato. Un 404 necesita un archivo nuevo, no un esquema nuevo.
5. Reescribe imágenes, vídeo y audio.
6. Actualiza los enlaces http:// de tu propio host mientras estás en la plantilla. Déjalos en una lista aparte.
7. Añade upgrade-insecure-requests solo como respaldo, recarga y confirma que la consola está en silencio.
8. Vuelve a mirar después de la siguiente actualización de tema o plugin. El contenido mixto suele volver como una URL fija dentro de una actualización.

Límites de un fetch del HTML

Un fetch del HTML no ve las etiquetas que inserta JavaScript, ni las URLs que viven en data-src hasta que un script las promueve, ni el CSS de otro origen. No ve la página con sesión si la respuesta anónima es un muro. No promete que la subida automática del navegador fuera a funcionar.

Usa el Comprobador de contenido mixto para armar la lista desde el HTML del servidor. Usa el navegador para confirmar la página después de que corran los scripts. Los detalles del certificado van en una revisión SSL. Content-Security-Policy y HSTS van en una revisión de cabeceras. El contenido mixto es la URL dentro de la página. Esas otras revisiones son la capa de TLS y de cabeceras que la rodea.