Skip to main content
Blog
Blog

¿Qué es la cadena de suministro del navegador?

cside es un producto de ciberseguridad que opera en el espacio de la cadena de suministro del navegador. Nosotros y otros proveedores que trabajamos aquí solemos hablar de esa cadena de suministro. Pero, ¿qué queremos decir exactamente con eso? La cadena de suministro del navegador es el conjunto de componentes y procesos que se combinan para renderizar páginas web, ejecutar scripts y garantizar un funcionamiento fluido. Esta cadena incluye todo, desde la solicitud inicial de una página web hasta la representación final de esa página en el navegador del usuario. Así como los comportamientos dinámicos que ocurren después de que el sitio se ha renderizado.

Jul 02, 2024 8 min read
¿Qué es la cadena de suministro del navegador? — cada script que tu sitio carga en producción

cside es un producto de ciberseguridad que opera en el espacio de la cadena de suministro del navegador. Nosotros y otros proveedores que trabajamos aquí solemos hablar de esa cadena de suministro. Pero, ¿qué queremos decir exactamente con eso?

La cadena de suministro del navegador es el conjunto de componentes y procesos que se combinan para renderizar páginas web, ejecutar scripts y garantizar un funcionamiento fluido. Esta cadena incluye todo, desde la solicitud inicial de una página web hasta la representación final de esa página en el navegador del usuario. Así como los comportamientos dinámicos que ocurren después de que el sitio se ha renderizado.

La cadena de suministro del navegador completa y cómo protegerla correctamente

1. El usuario realiza una acción: Un usuario inicia una solicitud introduciendo una URL en el navegador o haciendo clic en un enlace.

Componentes: Navegador.

2. Resolución DNS: El navegador consulta un servidor DNS para traducir el nombre de dominio en una dirección IP.

Componentes: Servidores DNS y caché del navegador.

Utiliza DNSSEC (Domain Name System Security Extensions) para proteger el proceso de resolución DNS. Esto valida la autenticidad de la respuesta DNS, protegiendo contra ataques de DNS spoofing y envenenamiento de caché. Aunque el almacenamiento en caché DNS puede mejorar los tiempos de carga, asegúrate de que el TTL del registro DNS sea lo suficientemente bajo para poder realizar cambios con rapidez. Por último, opta por proveedores de DNS con un sólido historial en materia de seguridad.

3. Conexión TCP/IP: El navegador establece una conexión TCP con el servidor web utilizando la dirección IP obtenida en la resolución DNS.

Componentes: Infraestructura de Internet, ISP y routers de red.

Configura firewalls a nivel de red para supervisar y controlar el tráfico de red entrante y saliente en función de las políticas de seguridad. Esto ayuda a prevenir accesos no autorizados.

4. Handshake SSL/TLS: Si la conexión es segura (HTTPS), el navegador y el servidor realizan un handshake SSL/TLS para establecer una conexión cifrada.

Componentes: Certificados SSL/TLS y Autoridades de Certificación (CAs).

Utiliza siempre Transport Layer Security (TLS) para cifrar los datos transmitidos por la red. Esto evita que los atacantes intercepten o manipulen los datos en tránsito.

5. Solicitud HTTP: El navegador envía una solicitud HTTP al servidor para obtener la página web.

Componentes: Servidor web y balanceadores de carga.

Implementa HTTPS en todas tus páginas para proteger las solicitudes HTTP cifrando los datos en tránsito. Usa HTTP Strict Transport Security (HSTS) para garantizar que los navegadores solo establezcan conexiones seguras con tu servidor. Si corresponde, considera implementar limitación de tasa para prevenir el abuso de las APIs de tu servicio.

6. Respuesta del servidor: El servidor procesa la solicitud y responde con un documento HTML y el JavaScript asociado. Con frecuencia, la entrega de la respuesta inicial hace que el navegador obtenga contenido de otros servidores de terceros. Sin embargo, las respuestas aquí pueden ser dinámicas, por lo que se recomienda contar con una herramienta como cside para vigilar los recursos de terceros obtenidos en el lado del cliente.

Componentes: Servidor web, servidor de aplicaciones y servidor de base de datos.

Para prevenir ataques de Cross-Site Scripting (XSS), codifica correctamente cualquier contenido generado por el usuario en las respuestas del servidor. Esto implica transformar los caracteres potencialmente dañinos en equivalentes codificados seguros antes de devolverlos al cliente.

7. Redes de Distribución de Contenido (CDNs): Los recursos estáticos como imágenes, archivos CSS y JavaScript suelen servirse desde CDNs para reducir la latencia.

Componentes: Servidores CDN.

Mucha gente cree que proteger la cadena de suministro del navegador solo requiere asegurar el inicio de la cadena. Sin embargo, esta suposición es incorrecta. Nuestra campaña de lanzamiento, Supply Chain Risk Doesn't End At NPM, explica en detalle por qué no es así. Asegurar únicamente este aspecto es insuficiente, como demostró el incidente de 2021 con cdnjs. A pesar de ser utilizado en el 12% de todos los sitios web del mundo, cdnjs presentaba una vulnerabilidad significativa.

Por tanto, usar un proveedor de CDN robusto es, por supuesto, necesario. Solo asegúrate de que no sea tu única barrera de seguridad y de que sigas las demás recomendaciones.

8. Análisis y renderizado de HTML: El navegador analiza el documento HTML para construir el DOM (Document Object Model).

Componentes: Motor de renderizado del navegador.

De manera similar, no dependas únicamente de las Content Security Policies (CSPs), pero configúralas en este punto. Si los scripts en línea son necesarios, usa un nonce (un token de un solo uso) en la etiqueta <script>. El nonce debe coincidir con el que figura en la cabecera Content Security Policy (CSP). Este enfoque garantiza que solo los scripts con el nonce correcto puedan ejecutarse, lo que ayuda a prevenir la ejecución de scripts no autorizados o maliciosos.

9. Análisis de CSS: El navegador analiza los archivos CSS para construir el CSSOM (CSS Object Model).

Componentes: Motor de renderizado del navegador.

Las expresiones CSS pueden ejecutar código en el contexto del navegador, lo que puede dar lugar a vulnerabilidades de seguridad, aunque están en gran medida obsoletas y no son compatibles con muchos navegadores modernos. Si tu aplicación permite a los usuarios introducir CSS directa o indirectamente (a través de un CMS o similar), asegúrate de que dicha entrada sea validada y saneada para evitar la ejecución de CSS malicioso. Esto puede incluir eliminar URLs basadas en JavaScript, expresiones y propiedades potencialmente dañinas.

10. Ejecución de JavaScript y scripts de terceros: El navegador descarga y ejecuta archivos JavaScript, modificando el DOM y el CSSOM según sea necesario. Se obtienen y ejecutan scripts adicionales de fuentes de terceros (p. ej., analítica, anuncios, widgets de redes sociales).

Componentes: Motor JavaScript del navegador, servidores de terceros, configuración de Content Security Policy (CSP) y cside.

Procesamos todos los scripts de terceros a través de nuestro motor de detección, mejorando su velocidad para evitar cualquier latencia adicional. Te proporcionamos estos datos, lo que te permite supervisar su actividad, algo crucial para el cumplimiento de la normativa PCI DSS 4.0. También podemos bloquear de forma autónoma a actores maliciosos, aumentando la seguridad de tu sitio web. Empieza con nosotros de forma gratuita hoy mismo para estar más cerca del cumplimiento normativo y ser más seguro de inmediato.

Para conocer otros proveedores y cómo nos comparamos, lee aquí.

11. Obtención de recursos: El navegador realiza solicitudes HTTP adicionales para los recursos referenciados en el HTML, CSS y JavaScript (p. ej., fuentes, imágenes adicionales).

Componentes: Servidor web y CDN.

Es importante destacar aquí que cside detecta cualquier actividad maliciosa en el dominio de terceros antes de que el navegador la renderice. Otras herramientas de monitorización a menudo no hacen esto. En nuestra opinión, esta es la mejor forma de proteger este punto.

12. Caché del lado del cliente: El navegador almacena recursos localmente en caché para mejorar el rendimiento en visitas posteriores.

Componentes: Caché del navegador y Service Workers.

Establece directivas de caché adecuadas para evitar almacenar información sensible en la caché. Para páginas especialmente sensibles, usa la directiva no-store para asegurarte de que no se almacenen en caché. Utiliza siempre HTTPS para todas las transacciones. Implementa sumas de verificación o hashes para verificar la integridad de los datos en caché antes de utilizarlos.

13. Service Workers: Si corresponde, los service workers pueden interceptar solicitudes de red, gestionar la caché y habilitar la funcionalidad sin conexión.

Componentes: Scripts de Service Worker y entorno del navegador.

Establece reglas de caché estrictas en tus scripts de service worker para garantizar que solo se almacene en caché contenido no sensible e invariable.

14. Renderizado y pintado: El navegador construye el árbol de renderizado y pinta los píxeles en la pantalla, creando la representación visual de la página web.

Componentes: Motor de renderizado del navegador (y GPU).

Asegúrate de que los recursos cargados desde orígenes cruzados no puedan interferir con el renderizado de tu sitio. Usa el atributo crossorigin para controlar cómo interactúan estos recursos con tu documento.

15. Interacción del usuario: El usuario interactúa con la página web (p. ej., haciendo clic, escribiendo), lo que activa los event listeners y la ejecución adicional de scripts.

Componentes: DOM del navegador, mecanismos de gestión de eventos y motor JavaScript.

Implementa tokens anti-CSRF en los formularios para protegerte contra ataques de Cross-Site Request Forgery. Asegúrate de que los manejadores de eventos JavaScript estén codificados de forma segura para evitar la exposición de información o funcionalidades sensibles. Evita usar JavaScript en línea en atributos HTML como onclick. Si tu sitio permite la carga de archivos, realiza un análisis exhaustivo de malware en los archivos subidos. Aplica restricciones estrictas de tamaño y tipo para prevenir la carga de archivos potencialmente dañinos.

Protege tu cadena de suministro al máximo

Te instamos a que comiences este proceso hoy mismo. Muchas organizaciones han sufrido ataques, multas o daños a su reputación por descuidar la seguridad de su cadena de suministro web. Esto suele deberse a problemas de cumplimiento relacionados con no proteger los sitios según los estándares establecidos.

Los estándares cambian con frecuencia, generalmente en respuesta a ataques o problemas identificados. Aborda de forma proactiva estos posibles problemas dando un paso más hoy. Usa la lista completa proporcionada anteriormente para proteger cada parte de tu cadena de suministro al máximo nivel posible.

Considera también usar cside. Con nuestro nivel gratuito, puedes supervisar y proteger los scripts de terceros en tu sitio, garantizando que esa parte de tu sitio web esté completamente segura.

Simon Wijckmans
Founder & CEO

Founder and CEO of cside. Previously a product manager on Cloudflare Page Shield (now Cloudflare Client-Side Security). Co-chair of the W3C Anti-Fraud Community Group and a Forbes 30 Under 30 honoree. Building accessible security against client-side attacks — web security is not an enterprise-only problem.

Monitoriza y Asegura tus Scripts de Terceros

Gain full visibility and control over every script delivered to your users to enhance site security and performance.

Comienza gratis, o prueba Business con una prueba de 14 días.

Interfaz del panel de cside mostrando monitorización de scripts y análisis de seguridad
Related Articles
Reservar una demo