Admitir HTTPS en tu sitio web es un paso importante para proteger tu sitio y a los usuarios contra ataques, pero el contenido mixto puede inutilizar esa protección. El contenido mixto cada vez más inseguro será bloqueado por los navegadores, como se explica en ¿Qué es el contenido mixto?
En esta guía, te mostraremos técnicas y herramientas para corregir problemas existentes relacionados con el contenido mixto y evitar que ocurran otros.
Visitar tu sitio para encontrar contenido mixto
Cuando visitas una página HTTPS en Google Chrome, el navegador te alerta sobre contenido mixto en el que se muestran 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.
En el ejemplo de contenido mixto pasivo, se incluyen las siguientes advertencias.
Si el navegador puede encontrar el contenido en una URL https, lo actualiza automáticamente y muestra un mensaje.
El contenido mixto activo está bloqueado y muestra una advertencia.
Si encuentras advertencias como estas para las URLs de http:// en tu sitio, debes corregirlas en la fuente.
Es útil hacer una lista de estas URLs, junto con la página en la que las encontraste, para usar 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 etiquetas de anclaje (<a>) a menudo no es un problema de contenido mixto, con algunas excepciones notables que se analizan más adelante.
Si tu sitio se publica mediante 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, es posible que las imágenes se incluyan con una URL completa en lugar de una ruta de acceso relativa. Deberás buscarlos y corregirlos en el contenido del CMS.
Cómo solucionar problemas de contenido mixto
Una vez que encuentres el contenido mixto en la fuente de tu sitio, puedes seguir estos pasos para solucionarlo.
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://.
Para verificar si un recurso está disponible de forma segura, también puedes cambiar http:// por https:// en la barra de URL del navegador y 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 desde un host diferente, si hay uno disponible.
- Descargar y alojar el contenido directamente en tu sitio (si tienes la autorización legal para hacerlo)
- Excluye el recurso de tu sitio por completo.
Una vez corregido el problema, visita la página en la que encontraste el error originalmente y verifica que ya no aparezca.
Ten cuidado con el uso no convencional de las etiquetas
Ten cuidado con el uso no convencional de las etiquetas en tu sitio.
Por ejemplo, las URLs de etiquetas fijas (<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 lightbox en la página, lo que genera un problema de contenido mixto.
Maneja contenido mixto a gran escala
Los pasos manuales que se indicaron anteriormente funcionan bien en sitios web más pequeños, pero en sitios web grandes o con muchos equipos de desarrollo independientes, puede ser difícil hacer un seguimiento de todo el contenido que se carga. Para facilitar 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 multipropósito del navegador que puedes usar para administrar contenido mixto a gran escala. El mecanismo de informes de la CSP se puede usar para hacer un seguimiento del contenido mixto de tu sitio y proporcionar políticas de aplicación para proteger a los usuarios mediante la actualización o el bloqueo de contenido mixto.
Puedes habilitar estas funciones en una página si incluyes el encabezado Content-Security-Policy o Content-Security-Policy-Report-Only 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 sobre contenido mixto en tu sitio.
Si quieres habilitar esta función, agrega la directiva Content-Security-Policy-Report-Only como encabezado de respuesta para tu sitio a fin de establecerla.
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 a https://example.com/reportingEndpoint informes en formato JSON sobre cualquier elemento que incumpla la política de seguridad del contenido.
En este caso, se envía un informe cada vez que se carga un subrecurso a través de HTTP.
Estos informes incluyen la URL de la página en la que se produjo el incumplimiento de política y la URL del subrecurso que infringió la política.
Si configuras el extremo de informes para que registre estos informes, puedes realizar un seguimiento del contenido mixto de tu sitio sin tener que visitar cada una de las páginas.
Las dos advertencias son las siguientes:
- Los usuarios deben visitar tu página con un navegador que comprenda el encabezado de la CSP. Esto ocurre en la mayoría de los navegadores modernos.
- Solo obtienes informes de las páginas que visitan los usuarios. Por lo tanto, si tienes páginas que no reciben mucho tráfico, es posible que debas esperar un tiempo para obtener informes de todo tu sitio.
Puedes encontrar más información en la guía Política de seguridad del contenido y un extremo de ejemplo.
Alternativas a los informes con CSP
Si alojas tu sitio en una plataforma como Blogger, es posible que no tengas acceso para modificar los encabezados ni agregar una CSP. En su lugar, una alternativa viable podría ser usar un rastreador de sitios web para encontrar problemas en tu sitio, como HTTPSChecker o el análisis de contenido mixto.
Actualiza solicitudes no seguras
Los navegadores están comenzando a actualizarse y bloquear solicitudes no seguras. Puedes usar las directivas de la 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="http://example.com/image.jpg">.
En cambio, el navegador realiza una solicitud segura de https://example.com/image.jpg y, de esta manera, evita al usuario del contenido mixto.
Para habilitar este comportamiento, envía un encabezado Content-Security-Policy con esta directiva:
Content-Security-Policy: upgrade-insecure-requests
También 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, ya que intentará actualizar solicitudes que el navegador no tiene en la actualidad.
La directiva upgrade-insecure-requests se propaga en cascada en documentos <iframe>, lo que garantiza que toda la página esté protegida.