Cómo corregir contenido mixto

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

La compatibilidad con HTTPS para tu sitio web es un paso importante para proteger tu sitio 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 contenido mixto no seguro, como se explica en ¿Qué es el contenido mixto?

En esta guía, te mostraremos técnicas y herramientas para solucionar problemas existentes de contenido mixto 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 con 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.

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

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

El contenido mixto activo se bloquea y muestra una advertencia.

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

Si encuentras advertencias como estas para las URLs de http:// en tu sitio, debes corregirlas en la fuente de tu sitio. Te recomendamos que hagas 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 publiquen las páginas. Por ejemplo, las imágenes se pueden incluir 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 la fuente de tu sitio, puedes seguir estos pasos para corregirlo.

Si recibes un mensaje de 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. Para ello, cambia http:// por https:// en la barra de URL del navegador y, luego, intenta abrir la URL en una pestaña del navegador.

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

  • Incluye el recurso de un host diferente, si hay uno 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 corregirlos. Sin embargo, algunas 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 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 varios propósitos que puedes usar para administrar el 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 encabezado Content-Security-Policy o Content-Security-Policy-Report-Only en la respuesta que se envía desde 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.

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, establece 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 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 carga un recurso secundario 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 política y la URL del recurso secundario que incumplió la política. Si configuras tu extremo de informes para que registre estos informes, puedes hacer un seguimiento del contenido mixto en tu sitio sin visitar cada página.

Las dos advertencias al respecto son las siguientes:

  • Los usuarios deben visitar tu página en un navegador que comprenda el encabezado de CSP. Esto es así en 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 algún tiempo antes de que obtengas informes de todo tu sitio.

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

Alternativas a los informes con CSP

Si tu sitio está alojado en una plataforma como Blogger, 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.

Actualiza las solicitudes no seguras

Browser Support

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

Source

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

La directiva de CSP upgrade-insecure-requests 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 de 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, incorporando 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, ya que intentará actualizar las solicitudes que el navegador no actualiza en este momento.

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

Anterior
¿Qué es el contenido mixto?
Siguiente
Cuándo usar HTTPS para desarrollo local