Cómo corregir contenido mixto

Jo-el van Bergen
Jo-el van Bergen
X
Rachel Andrew

Admitir HTTPS para 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 surjan 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 mostrará 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 URLs http:// en tu sitio, debes corregirlas en la fuente del sitio. Es útil hacer una lista de estas URLs, junto con la página en la que las encontraste, para usarlas 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 se pueden incluir con una URL completa en lugar de una ruta relativa. Deberás encontrarlas y corregirlas en el contenido del CMS.

Cómo corregir el contenido mixto

Una vez que hayas encontrado contenido mixto en la fuente de tu sitio, puedes seguir estos pasos para corregirlo.

Si recibes un mensaje de la consola que indica que una solicitud de recurso 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://, considera una de las siguientes opciones:

  • Incluye el recurso desde un host diferente, si está disponible.
  • Descarga y aloja el contenido directamente en tu sitio, si tienes permiso legal para hacerlo.
  • Excluye el recurso de tu sitio por completo.

Una vez que hayas corregido el problema, consulta la página en la que encontraste el error originalmente y verifica que ya no aparezca.

Ten cuidado con el uso de etiquetas no estándar

Ten cuidado con el uso de etiquetas no estándar en tu sitio. Por ejemplo, las URLs de 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 corregirlas. Sin embargo, algunas secuencias de comandos de la galería 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 causa un problema de contenido mixto.

Cómo controlar el contenido mixto a gran escala

Los pasos manuales anteriores funcionan bien para sitios web más pequeños, pero, para sitios web grandes o 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.

Puedes habilitar estas funciones para una página incluyendo el Content-Security-Policy o Content-Security-Policy-Report-Only encabezado en la respuesta enviada desde tu servidor. Además, puedes configurar Content-Security-Policy (aunque no Content-Security-Policy-Report-Only) con una etiqueta <meta> en la sección <head> de tu página.

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

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

Las dos advertencias son las siguientes:

  • Los usuarios deben visitar tu página en un navegador que comprenda el encabezado de CSP. Esto es cierto para la mayoría de los navegadores modernos.
  • Solo recibes informes de las páginas que visitan tus usuarios. Por lo tanto, si tienes páginas que no reciben mucho tráfico, es posible que pase un tiempo antes de que recibas informes de todo tu sitio.

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

Alternativas a los informes con 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.

Cómo actualizar solicitudes no seguras

Browser Support

  • Chrome: 44.
  • Edge: 17.
  • Firefox: 48.
  • Safari: 10.1.

Source

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

La directiva upgrade-insecure-requests de CSP le 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="https://example.com/image.jpg">

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

Puedes habilitar este comportamiento enviando un encabezado Content-Security-Policy con esta directiva:

Content-Security-Policy: upgrade-insecure-requests

O bien, puedes incorporar esa misma directiva en línea 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 realiza actualmente.

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