Scripts de Terceros: Sobreviviendo al Salvaje Oeste de la Web

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Como desarrolladores de scripts de terceros, trabajamos constantemente en entornos que no controlamos completamente. Debemos manejar problemas inesperados introducidos por diferentes navegadores, personalizaciones peculiares realizadas por el equipo de desarrolladores principal y restricciones de seguridad que no podemos eludir fácilmente. En esta sesión de nivel introductorio, compartiré experiencias de primera mano y orientación práctica derivada de la construcción y el despliegue de scripts de terceros para mejorar la confianza de su equipo y la eficiencia del flujo de trabajo.

This talk has been presented at JSNation 2025, check out the latest edition of this JavaScript Conference.

Anton Zalaldinov
Anton Zalaldinov
10 min
16 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Anton Zaldinov, ingeniero de software senior, discute los desafíos en el desarrollo de scripts de terceros, enfatizando la importancia de la codificación defensiva, el rendimiento, la depuración y la seguridad. Las estrategias incluyen adaptarse a los cambios de privacidad, la carga eficiente de scripts, la encapsulación y pruebas exhaustivas para la fiabilidad y seguridad.

1. Explorando Scripts de Terceros

Short description:

Anton Zaldinov, ingeniero de software senior, profundiza en los desafíos de los scripts de terceros y las fases críticas de desarrollo y despliegue para garantizar la fiabilidad y seguridad.

Hola a todos. Gracias por sintonizar. Soy Anton Zaldinov, un ingeniero de software senior en la empresa. Hoy, estoy emocionado de llevarlos en el viaje hacia los scripts de terceros, sobreviviendo al salvaje oeste de la web. Exploraremos los desafíos y recompensas únicos de construir código que se ejecuta en el sitio web con uno propio.

Así que un poco sobre mí. Trabajo en la empresa, y mi enfoque principal es Affirm.js, que es nuestra principal biblioteca de scripts de terceros. Mi día a día implica escribir y mantener el script, asegurando que funcione de manera confiable y segura en miles de sitios web, entornos que están completamente fuera de nuestro control. Y cuando hablo de riqueza, Affirm.js opera a gran escala en muchos sitios web diferentes.

Este gráfico, por ejemplo, muestra el seguimiento de eventos específicamente de Affirm.js. Estamos viendo alrededor de 93 millones de eventos diarios. Este volumen subraya por qué el desarrollo robusto y la comprensión de los paisajes de terceros son tan cruciales. El ciclo de vida de un script de terceros comienza con el desarrollo local, donde simulamos los diversos desarrollos web que encontrará. Luego creamos el fragmento HTML para los propietarios del sitio web.

El despliegue involucra minificaciones, CDNs y versionado. El integrador lo incrusta, y nuestro trabajo continúa con la monitorización y el mantenimiento. Esta fase de monitorización y mantenimiento es altamente iterativa, a menudo involucrando bucles de retroalimentación de los integradores y datos de rendimiento para impulsar más mejoras y asegurar la estabilidad a largo plazo. Veamos más de cerca el desarrollo. Desplegar localmente significa replicar la realidad de dominios cruzados. Una técnica clave que uso extensivamente es las anulaciones locales de Chrome DevTools. Esto me permite ir a un sitio web integrado real que ya está usando nuestro script y decirle a mi navegador que reemplace la versión en vivo, desplegada de los scripts de terceros con la versión que se ejecuta desde mi máquina local.

2. Challenges of Third-Party Script Development

Short description:

Las pruebas en vivo detectan problemas en las páginas de los integradores. Comprender Async y defer es vital. Los scripts se ejecutan en entornos incontrolables, planteando desafíos. La codificación defensiva y el rendimiento son clave para la supervivencia. La depuración y la seguridad son prioridades principales para los scripts de terceros.

Esto es útil para probar nuevas características y correcciones de errores en un entorno de comercio electrónico complejo antes de que se publiquen. Crucialmente, esta prueba en vivo detecta problemas complicados, como conflictos de CSS o scripts, en la página en vivo del integrador que las configuraciones simuladas a menudo pasan por alto. Este fragmento de script es un apretón de manos entre el proveedor del script de terceros y el integrador. Aquí está nuestro ejemplo. Notarás que este script se carga con Async. Aunque este script específico lo maneja, es vital que los desarrolladores e integradores comprendan Async y defer al tratar con un script de terceros. Async se descarga sin bloquear el análisis de HTML y se ejecuta cuando está listo, potencialmente interrumpiendo el análisis. Defer también se descarga sin bloquear, pero espera para ejecutarse hasta el análisis de HTML. En orden, ambos son clave para el rendimiento.

Si hay una conclusión principal, es esta. Cualquier script de terceros se ejecuta en un entorno que sus desarrolladores fundamentalmente no controlan en muchos sitios web diferentes. Este hecho es la fuente de la mayoría de los desafíos únicos. Enfrentamos como desarrolladores de scripts de terceros. Significa que no podemos hacer ninguna suposición sobre el JavaScript existente, CSS, o incluso la estructura HTML de las páginas donde nuestro código se ejecutará. Esta incertidumbre dicta todo nuestro enfoque para diseñar, desarrollar y probar. Cada integración es un conjunto potencial de nuevas variables, haciendo que el código robusto y aceptable no sea solo un objetivo, sino una necesidad para sobrevivir en este ecosistema complejo.

Aquí hay un ejemplo concreto de mi experiencia. Este código muestra window fetch, una API estándar del navegador, siendo completamente sobrescrita por otro script en una página anfitriona. Nuestro script, esperando un comportamiento normal del espacio de trabajo, de repente encuentra los años o falla silenciosamente. Esto resalta por qué los desarrolladores de scripts de terceros deben codificar de manera defensiva y anticipar que el entorno global podría no estar en su estado predeterminado. Más allá de los nativos modificados, los desarrolladores de terceros navegan constantemente por el espacio de nombres global, una compleja red de posibles colisiones de variables. La carga de la página es otro desafío común. Los elementos de la interfaz de usuario de un script deben verse bien y funcionar correctamente a pesar del diverso CSS de la página anfitriona. El rendimiento es primordial. Los scripts de terceros deben ser altamente eficientes para minimizar el impacto en los tiempos de carga de la página. Considere que la carga útil media de JavaScript en 2024 es de más de 550 kilobytes en un móvil, y una buena parte de eso a menudo proviene de fuentes de terceros, por lo que cada byte cuenta. Y luego está la depuración, cuando un problema solo aparece en el sitio de un integrador específico de los miles. Reproducir y diagnosticar eso puede ser una verdadera historia de detectives para un desarrollador de scripts. La seguridad es una prioridad principal para cualquier script de terceros. La seguridad es crucial para proteger contra vulnerabilidades.

3. Strategies for Third-Party Script Development

Short description:

Los desarrolladores se adaptan al panorama de privacidad en evolución. La carga eficiente de scripts y la encapsulación son cruciales. La codificación defensiva, el diseño de seguridad y las pruebas exhaustivas son esenciales para los scripts de terceros.

Los desarrolladores también consideran los scripts de cuarta parte de las dependencias. Además de eso, el panorama de privacidad está siempre en evolución. La eliminación gradual de cookies de terceros, impulsada por las crecientes preocupaciones de privacidad de los usuarios y las presiones regulatorias, impacta significativamente en los métodos tradicionales de seguimiento y personalización. Este cambio requiere que todos los desarrolladores web, especialmente aquellos que trabajan con contenido incrustado, dominen nuevas APIs de navegador como Chips o Storage Access API, para construir soluciones centradas en el usuario que respeten la privacidad.

Entonces, ¿cómo sobreviven y prosperan los desarrolladores de scripts de terceros? Primero, la carga eficiente de scripts. Usar async y defer de manera adecuada. También es crucial minimizar el tamaño del script. Técnicas como tree shaking o code splitting son vitales, ayudando a asegurar que solo el JavaScript necesario se envíe al cliente, reduciendo los tiempos de carga.

Segundo, fuertes muros para la encapsulación. Usar Shadow DOM, por ejemplo, permite a los desarrolladores crear árboles DOM aislados para sus scripts de UI. Esto significa que los estilos definidos dentro del Shadow DOM no se filtran en la página principal y el sistema de página global no rompe la inferencia del componente. Así que reduce drásticamente los conflictos del sistema y la interferencia de JavaScript de la página anfitriona. La codificación defensiva es innegociable para los scripts de terceros.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Es una jungla ahí fuera: ¿Qué está pasando realmente dentro de tu carpeta Node_Modules?
Node Congress 2022Node Congress 2022
26 min
Es una jungla ahí fuera: ¿Qué está pasando realmente dentro de tu carpeta Node_Modules?
Top Content
The talk discusses the importance of supply chain security in the open source ecosystem, highlighting the risks of relying on open source code without proper code review. It explores the trend of supply chain attacks and the need for a new approach to detect and block malicious dependencies. The talk also introduces Socket, a tool that assesses the security of packages and provides automation and analysis to protect against malware and supply chain attacks. It emphasizes the need to prioritize security in software development and offers insights into potential solutions such as realms and Deno's command line flags.
Instala Nada: Interfaces de Usuario de Aplicaciones con APIs Nativas del Navegador
JSNation 2024JSNation 2024
31 min
Instala Nada: Interfaces de Usuario de Aplicaciones con APIs Nativas del Navegador
Top Content
This Talk introduces real demos using HTML, CSS, and JavaScript to showcase new or underutilized browser APIs, with ship scores provided for each API. The dialogue element allows for the creation of modals with minimal JavaScript and is supported by 96% of browsers. The web animations API is a simple and well-supported solution for creating animations, while the view transitions API offers easy animation workarounds without CSS. The scroll snap API allows for swipers without JavaScript, providing a smooth scrolling experience.
El estado de la autenticación sin contraseña en la web
JSNation 2023JSNation 2023
30 min
El estado de la autenticación sin contraseña en la web
Passwords are terrible and easily hacked, with most people not using password managers. The credential management API and autocomplete attribute can improve user experience and security. Two-factor authentication enhances security but regresses user experience. Passkeys offer a seamless and secure login experience, but browser support may be limited. Recommendations include detecting Passkey support and offering fallbacks to passwords and two-factor authentication.
Ampliando los límites de la codificación de video en navegadores con WebCodecs
JSNation 2023JSNation 2023
25 min
Ampliando los límites de la codificación de video en navegadores con WebCodecs
Top Content
This Talk explores the challenges and solutions in video encoding with web codecs. It discusses drawing and recording video on the web, capturing and encoding video frames, and introduces the WebCodecs API. The Talk also covers configuring the video encoder, understanding codecs and containers, and the video encoding process with muxing using ffmpeg. The speaker shares their experience in building a video editing tool on the browser and showcases Slantit, a tool for making product videos.
5 Formas en las que Podrías Haber Hackeado Node.js
JSNation 2023JSNation 2023
22 min
5 Formas en las que Podrías Haber Hackeado Node.js
Top Content
The Node.js security team is responsible for addressing vulnerabilities and receives reports through HackerOne. The Talk discusses various hacking techniques, including DLL injections and DNS rebinding attacks. It also highlights Node.js security vulnerabilities such as HTTP request smuggling and certification validation. The importance of using HTTP proxy tunneling and the experimental permission model in Node.js 20 is emphasized. NearForm, a company specializing in Node.js, offers services for scaling and improving security.
Política de Seguridad de Contenido con Next.js: Mejorando la Seguridad de tu Sitio Web
React Summit US 2023React Summit US 2023
9 min
Política de Seguridad de Contenido con Next.js: Mejorando la Seguridad de tu Sitio Web
Top Content
Lucas Estevão, a Principal UI Engineer and Technical Manager at Avenue Code, discusses how to implement Content Security Policy (CSP) with Next.js to enhance website security. He explains that CSP is a security layer that protects against cross-site scripting and data injection attacks by restricting browser functionality. The talk covers adding CSP to an XJS application using meta tags or headers, and demonstrates the use of the 'nonce' attribute for allowing inline scripts securely. Estevão also highlights the importance of using content security reports to identify and improve application security.

Workshops on related topic

Masterclass Práctica: Introducción a Pentesting para Aplicaciones Web / APIs Web
JSNation US 2024JSNation US 2024
148 min
Masterclass Práctica: Introducción a Pentesting para Aplicaciones Web / APIs Web
Featured Workshop
Gregor Biswanger
Gregor Biswanger
En esta masterclass práctica, estarás equipado con las herramientas para probar efectivamente la seguridad de las aplicaciones web. Este curso está diseñado tanto para principiantes como para aquellos que ya están familiarizados con las pruebas de seguridad de aplicaciones web y desean ampliar su conocimiento. En un mundo donde los sitios web juegan un papel cada vez más central, asegurar la seguridad de estas tecnologías es crucial. Comprender la perspectiva del atacante y conocer los mecanismos de defensa apropiados se han convertido en habilidades esenciales para los profesionales de TI.Esta masterclass, dirigida por el renombrado entrenador Gregor Biswanger, te guiará a través del uso de herramientas de pentesting estándar de la industria como Burp Suite, OWASP ZAP y el marco profesional de pentesting Metasploit. Aprenderás a identificar y explotar vulnerabilidades comunes en aplicaciones web. A través de ejercicios prácticos y desafíos, podrás poner en práctica tu conocimiento teórico y expandirlo. En este curso, adquirirás las habilidades fundamentales necesarias para proteger tus sitios web de ataques y mejorar la seguridad de tus sistemas.
De 0 a Autenticación en una hora con ReactJS
React Summit 2023React Summit 2023
56 min
De 0 a Autenticación en una hora con ReactJS
WorkshopFree
Kevin Gao
Kevin Gao
La autenticación sin contraseña puede parecer compleja, pero es simple de agregar a cualquier aplicación utilizando la herramienta adecuada. Hay múltiples alternativas que son mucho mejores que las contraseñas para identificar y autenticar a tus usuarios, incluyendo SSO, SAML, OAuth, Magic Links, One-Time Passwords y Authenticator Apps.
Mientras abordamos los aspectos de seguridad y evitamos errores comunes, mejoraremos una aplicación JS de pila completa (backend Node.js + frontend React) para autenticar a los usuarios con OAuth (inicio de sesión social) y One Time Passwords (correo electrónico), incluyendo:- Autenticación de usuarios - Gestión de interacciones de usuarios, devolviendo JWTs de sesión / actualización- Gestión y validación de sesiones - Almacenamiento seguro de la sesión para solicitudes de cliente posteriores, validación / actualización de sesiones- Autorización básica - extracción y validación de reclamaciones del token JWT de sesión y manejo de autorización en flujos del backend
Al final del masterclass, también exploraremos otros enfoques de implementación de autenticación con Descope, utilizando SDKs de frontend o backend.
Principales Diez Vulnerabilidades de Seguridad OWASP en Node.js
JSNation 2024JSNation 2024
97 min
Principales Diez Vulnerabilidades de Seguridad OWASP en Node.js
Workshop
Marco Ippolito
Marco Ippolito
En este masterclass, cubriremos las diez vulnerabilidades más comunes y riesgos de seguridad críticos identificados por OWASP, que es una autoridad confiable en Seguridad de Aplicaciones Web.Durante el masterclass, aprenderás cómo prevenir estas vulnerabilidades y desarrollar la capacidad de reconocerlas en aplicaciones web.El masterclass incluye 10 desafíos de código que representan cada una de las vulnerabilidades más comunes de OWASP. Se proporcionarán pistas para ayudar a resolver las vulnerabilidades y pasar las pruebas.El instructor también proporcionará explicaciones detalladas, diapositivas y ejemplos de la vida real en Node.js para ayudar a comprender mejor los problemas. Además, obtendrás información de un Mantenedor de Node.js que compartirá cómo gestionan la seguridad en un proyecto grande.Es adecuado para desarrolladores de Node.js de todos los niveles de habilidad, desde principiantes hasta expertos, se requiere un conocimiento general de aplicaciones web y JavaScript.
Tabla de contenidos:- Control de Acceso Roto- Fallas Criptográficas- Inyección- Diseño Inseguro- Configuración de Seguridad Incorrecta- Componentes Vulnerables y Obsoletos- Fallas de Identificación y Autenticación- Fallas de Integridad de Software y Datos- Fallas de Registro y Monitoreo de Seguridad- Falsificación de Solicitudes del Lado del Servidor
Cómo Construir Control de Acceso Front-End con NFTs
JSNation 2024JSNation 2024
88 min
Cómo Construir Control de Acceso Front-End con NFTs
WorkshopFree
Solange Gueiros
Solange Gueiros
Comprende los fundamentos de la tecnología NFT y su aplicación en el fortalecimiento de la seguridad web. A través de demostraciones prácticas y ejercicios prácticos, los asistentes aprenderán cómo integrar sin problemas mecanismos de control de acceso basados en NFT en sus proyectos de desarrollo front-end.
Encontrar, Hackear y solucionar las vulnerabilidades de NodeJS con Snyk
JSNation 2022JSNation 2022
99 min
Encontrar, Hackear y solucionar las vulnerabilidades de NodeJS con Snyk
Workshop
Matthew Salmon
Matthew Salmon
npm y seguridad, ¿cuánto sabes sobre tus dependencias?Hack-along, hacking en vivo de una aplicación Node vulnerable https://github.com/snyk-labs/nodejs-goof, Vulnerabilidades tanto de código abierto como de código escrito. Se anima a descargar la aplicación y hackear junto con nosotros.Corrigiendo los problemas y una introducción a Snyk con una demostración.Preguntas abiertas.
Aporta Calidad y Seguridad al pipeline de CI/CD
DevOps.js Conf 2022DevOps.js Conf 2022
76 min
Aporta Calidad y Seguridad al pipeline de CI/CD
Workshop
Elena Vilchik
Elena Vilchik
En esta masterclass repasaremos todos los aspectos y etapas al integrar tu proyecto en el ecosistema de Calidad y Seguridad del Código. Tomaremos una aplicación web simple como punto de partida y crearemos un pipeline de CI que active el monitoreo de calidad del código. Realizaremos un ciclo completo de desarrollo, comenzando desde la codificación en el IDE y abriendo una Pull Request, y te mostraré cómo puedes controlar la calidad en esas etapas. Al final de la masterclass, estarás listo para habilitar esta integración en tus propios proyectos.