Cómo corregir contenido mixto

Jo-el van Bergen

Rachel Andrew

Admitir HTTPS en tu sitio web es un paso importante para protegerlo a ti y a tus usuarios de ataques, pero el contenido mixto puede hacer que esa protección sea inútil. Los navegadores bloquearán cada vez más el contenido mixto no seguro, como se explica en ¿Qué es el contenido mixto?

En esta guía, mostraremos técnicas y herramientas para corregir los problemas de contenido mixto existentes y evitar que se produzcan otros nuevos.

Cómo encontrar contenido mixto visitando tu sitio

Cuando visitas una página HTTPS en Google Chrome, el navegador te alerta sobre el contenido mixto como errores y advertencias en la consola de JavaScript.

En ¿Qué es el contenido mixto?, puedes encontrar varios ejemplos y ver cómo se informan los problemas en las Herramientas para desarrolladores de Chrome.

El ejemplo de contenido mixto pasivo generará las siguientes advertencias. Si el navegador puede encontrar el contenido en una URL https, lo actualiza automáticamente y, luego, muestra un mensaje.

Las Herramientas para desarrolladores de Chrome muestran las advertencias que se muestran cuando se detecta y actualiza contenido mixto

El contenido mixto activo se bloquea y muestra una advertencia.

Las Herramientas para desarrolladores de Chrome muestran las advertencias que se muestran cuando se bloquea el contenido mixto activo

Si encuentras advertencias como estas para las URLs http:// en tu sitio, debes corregirlas en el código fuente del sitio. Es útil hacer una lista de estas URLs, junto con la página en la que las encontraste, para usarla cuando las corrijas.

Cómo encontrar contenido mixto en tu sitio

Puedes buscar contenido mixto directamente en tu código fuente. Busca http:// en tu fuente y busca etiquetas que incluyan atributos de URL HTTP. Ten en cuenta que tener http:// en el atributo href de las etiquetas de anclaje (<a>) no suele ser un problema de contenido mixto, con algunas excepciones notables que se analizan más adelante.

Si tu sitio se publica con un sistema de administración de contenido, es posible que se inserten vínculos a URLs no seguras cuando se publican las páginas. Por ejemplo, las imágenes pueden incluirse con una URL completa en lugar de una ruta de acceso relativa. Deberás encontrarlos y corregirlos en el contenido del CMS.

Cómo corregir el contenido mixto

Una vez que encuentres contenido mixto en el código fuente de tu sitio, puedes seguir estos pasos para corregirlo.

Si recibes un mensaje en la consola que indica que una solicitud de recursos se actualizó automáticamente de HTTP a HTTPS, puedes cambiar de forma segura la URL http:// del recurso en tu código a https://. También puedes verificar si un recurso está disponible de forma segura cambiando http:// a https:// en la barra de URL del navegador y tratando de abrir la URL en una pestaña del navegador.

Si el recurso no está disponible a través de https://, debes considerar una de las siguientes opciones:

Incluye el recurso de otro host, si hay uno disponible.
Descarga y aloja el contenido directamente en tu sitio si la ley te permite hacerlo.
Excluye el recurso de tu sitio por completo.

Después de corregir el problema, consulta la página en la que encontraste el error originalmente y verifica que ya no aparezca.

Ten cuidado con el uso no estándar de etiquetas

Ten cuidado con el uso de etiquetas no estándar en tu sitio. Por ejemplo, las URLs de las etiquetas de anclaje (<a>) no generan errores de contenido mixto, ya que hacen que el navegador navegue a una página nueva. Esto significa que, por lo general, no es necesario corregirlos. Sin embargo, algunos lenguajes de secuencias de comandos de galerías de imágenes anulan la funcionalidad de la etiqueta <a> y cargan el recurso HTTP especificado por el atributo href en una pantalla de lightbox en la página, lo que genera un problema de contenido mixto.

Cómo controlar contenido mixto a gran escala

Los pasos manuales anteriores funcionan bien para sitios web más pequeños, pero, para los sitios web grandes o los sitios con muchos equipos de desarrollo independientes, puede ser difícil hacer un seguimiento de todo el contenido que se carga. Para ayudarte con esta tarea, puedes usar la política de seguridad del contenido para indicarle al navegador que te notifique sobre el contenido mixto y asegurarte de que tus páginas nunca carguen recursos no seguros de forma inesperada.

Política de seguridad del contenido

La política de seguridad del contenido (CSP) es una función del navegador de uso múltiple que puedes usar para administrar contenido mixto a gran escala. El mecanismo de informes de CSP se puede usar para hacer un seguimiento del contenido mixto en tu sitio y proporcionar políticas de aplicación para proteger a los usuarios actualizando o bloqueando el contenido mixto.

Para habilitar estas funciones en una página, incluye el encabezado Content-Security-Policy o Content-Security-Policy-Report-Only en la respuesta que envía tu servidor. Además, puedes establecer Content-Security-Policy (aunque no Content-Security-Policy-Report-Only) con una etiqueta <meta> en la sección <head> de tu página.

Nota: Los navegadores modernos aplican todas las políticas de seguridad del contenido que reciben. El navegador combina varios valores de encabezado de CSP que recibe en el encabezado de respuesta o en los elementos <meta> y los aplica como una sola política. Del mismo modo, se combinan las políticas de informes. Las políticas se combinan tomando la intersección de las políticas, es decir, cada política después de la primera solo puede restringir aún más el contenido permitido, no ampliarlo.

Cómo encontrar contenido mixto con la política de seguridad del contenido

Puedes usar la política de seguridad del contenido para recopilar informes de contenido mixto en tu sitio. Para habilitar esta función, configura la directiva Content-Security-Policy-Report-Only agregándola como un encabezado de respuesta para tu sitio.

Encabezado de respuesta:

Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint

Nota: El encabezado de respuesta report-uri dejará de estar disponible y se reemplazará por report-to.

Browser Support

Source

Puedes proporcionar ambos encabezados, en cuyo caso se ignorará report-uri si el navegador admite report-to.

Cada vez que un usuario visita una página de tu sitio, su navegador envía informes con formato JSON sobre cualquier elemento que incumpla la política de seguridad del contenido a https://example.com/reportingEndpoint. En este caso, cada vez que se cargue un recurso secundario a través de HTTP, se enviará un informe. Estos informes incluyen la URL de la página en la que se produjo el incumplimiento de política y la URL del recurso secundario que incumplió la política. Si configuras tu extremo de informes para registrar estos informes, puedes hacer un seguimiento del contenido mixto en tu sitio sin tener que visitar cada página.

Las dos advertencias son las siguientes:

Los usuarios deben visitar tu página en un navegador que comprenda el encabezado de la CSP. Esto se aplica a la mayoría de los navegadores modernos.
Solo obtendrás informes de las páginas que visiten tus usuarios. Por lo tanto, si tienes páginas que no reciben mucho tráfico, es posible que debas esperar un tiempo antes de recibir informes de todo tu sitio.

La guía de la Política de seguridad del contenido incluye más información y un ejemplo de extremo.

Alternativas a la presentación de informes con el CSP

Si una plataforma como Blogger aloja tu sitio, es posible que no tengas acceso para modificar los encabezados y agregar una CSP. En cambio, una alternativa viable podría ser usar un rastreador de sitios web para encontrar problemas en tu sitio, como HTTPSChecker o Mixed Content Scan.

Actualización de solicitudes no seguras

Browser Support

Source

Los navegadores están comenzando a actualizar y bloquear las solicitudes no seguras. Puedes usar directivas de CSP para forzar la actualización automática o el bloqueo de estos recursos.

La directiva de CSP upgrade-insecure-requests indica al navegador que actualice las URLs no seguras antes de realizar solicitudes de red.

Por ejemplo, si una página contiene una etiqueta de imagen con una URL HTTP, como <img src="http://example.com/image.jpg">

En su lugar, el navegador realiza una solicitud segura para https://example.com/image.jpg, lo que evita que el usuario vea contenido mixto.

Para habilitar este comportamiento, envía un encabezado Content-Security-Policy con esta directiva:

Content-Security-Policy: upgrade-insecure-requests

O bien, puedes incorporar esa misma directiva intercalada en la sección <head> del documento con un elemento <meta>:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Al igual que con la actualización automática del navegador, si el recurso no está disponible a través de HTTPS, la solicitud actualizada falla y el recurso no se carga. Esto mantiene la seguridad de tu página. La directiva upgrade-insecure-requests irá más allá de la actualización automática del navegador y tratará de actualizar las solicitudes que el navegador no actualiza actualmente.

La directiva upgrade-insecure-requests se aplica en cascada a los documentos <iframe>, lo que garantiza que toda la página esté protegida.