JavaScript tiene muchos casos de uso - uno de ellos es la detección automatizada de navegadores. Esta es una charla técnica que presenta una visión general del estado del arte de los navegadores automatizados para el fraude publicitario, cómo engañan a muchas soluciones de detección de bots y los métodos únicos que se han utilizado para identificarlos de todos modos.
This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.
FAQ
Bots.txt es un archivo que se utiliza para dar instrucciones a los bots sobre qué pueden y no pueden hacer en un sitio web. Funciona bajo un sistema de honor, solicitando a los bots que sigan las directrices establecidas.
Si un bot navega por tu sitio y no genera ciertos tokens esperados o no ejecuta JavaScript, es una señal de que algo inusual está ocurriendo, lo cual puede indicar la presencia de un bot.
Los creadores de bots pueden ocultar el user agent usando técnicas como modificar el descriptor de la propiedad del navegador para que parezca que no han cambiado el user agent.
Puppeteer es un navegador automatizado desarrollado por Google que permite a los creadores de bots imitar comportamientos humanos complejos sin dejar rastros obvios, haciendo que los bots sean más difíciles de detectar.
El 'canvas fingerprinting' es una técnica que renderiza un gráfico en un canvas del navegador para identificar de manera única un dispositivo. Los bots más avanzados pueden falsificar esta información para evadir la detección.
Las pruebas de comportamiento son cruciales porque analizan discrepancias en cómo los usuarios (o bots) interactúan con el DOM y otros elementos del navegador, ofreciendo pistas sobre comportamientos no humanos.
Al generar y verificar tokens en cada página visitada por un usuario, los administradores pueden identificar navegaciones anómalas o repetitivas que sugieren la presencia de bots en lugar de usuarios humanos reales.
La charla aborda los desafíos de detectar y combatir bots en la web. Explora diversas técnicas como la detección del agente de usuario, tokens, el comportamiento de JavaScript y el análisis de la caché. La evolución de los bots y los avances en los navegadores automatizados los han vuelto más flexibles y difíciles de detectar. La charla también destaca el uso de la huella digital de lienzo y la necesidad de personas inteligentes para combatir el problema en constante evolución de los bots.
Estoy aquí para preguntar qué está pasando con los bots en la web. Hablaremos sobre detecciones simples, cómo los bots han mejorado. Hablaremos sobre lo que posiblemente sea el mejor bot que está engañando a la mayoría de las soluciones de detección. Y por último, llegaremos a mi parte favorita, que es cómo puedes encontrarlos de todos modos. Mi trabajo consiste en jugar al escondite con estos bots, para que los anunciantes puedan evitarlos. Muchas personas se enfrentan a este problema, como las redes sociales y los vendedores de entradas para conciertos, porque Internet no fue diseñado teniendo en cuenta la detección de bots. Cuando haces eso, sí, historia real, cuando tenía 16 años, los proyectos de productos de la escuela secundaria pueden haber dejado de funcionar en algún sitio. Así que para mejorar Internet, queremos detectarlos. Hablemos de las detecciones. Empezando por lo básico. User agent. ¿Identifica el encabezado de la solicitud HTTP el navegador? Ustedes lo saben. Si es un bot de Python, lo bloqueas. Probablemente no haya un usuario real detrás de eso. Los creadores de bots descubrieron esto, saben cómo ocultar el user agent. Digamos que no ejecutas JavaScript en tu bot.
con los bots en la web. No estoy hablando de los amigables, los de testing. Estoy hablando de los malos. Hablaremos sobre detecciones simples, cómo los bots han mejorado. Hablaremos sobre lo que posiblemente sea el mejor bot que está engañando a la mayoría de las soluciones de detección. Y por último, llegaremos a mi parte favorita, que es cómo puedes encontrarlos de todos modos. Pero antes de todo eso, una de las razones por las que estoy aquí es porque siempre me ha gustado desempacar cosas, y ahora soy el ingeniero inverso de DoubleVerify. Ellos miden anuncios. Pero mi trabajo consiste en jugar al escondite con estos bots, para que los anunciantes puedan evitarlos. Pero no solo los anunciantes y los juegos. También se trata de las redes sociales, los vendedores de entradas para conciertos, muchas personas que enfrentan este problema porque Internet no fue diseñado teniendo en cuenta la detección de bots. En serio. El único estándar real es bots.txt, que le dice a los bots qué pueden y no pueden hacer. Básicamente, es un sistema de honor que pide a las personas buenas que sean amables. Cuando haces eso, sí, historia real, cuando tenía 16 años, los proyectos de productos de la escuela secundaria pueden haber dejado de funcionar en algún sitio. Pero algunas personas realmente lo hacen a propósito y a gran escala, negando el servicio a usuarios reales, utilizando lo que tienen para robar, zapatillas de deporte, infiltrándose en las redes sociales con usuarios falsos. Practico esa parte. Así que para mejorar Internet, queremos detectarlos. Hablemos de las detecciones. Empezando por lo básico. No porque los creadores de bots no puedan jugar con esto, sino porque generalmente son lo primero en lo que te basas cuando desarrollas algo más complicado porque las detecciones simples son bastante directas. User agent. ¿Identifica el encabezado de la solicitud HTTP el navegador? Ustedes lo saben. Si es un bot de Python, lo bloqueas. Probablemente no haya un usuario real detrás de eso. Los creadores de bots descubrieron esto, saben cómo ocultar el user agent. Digamos que no ejecutas JavaScript en tu bot.
2. Detectando Bots con Tokens y Comportamiento de JavaScript
Short description:
Puedes usar tokens y el comportamiento de JavaScript para detectar bots en tu sitio. Las peculiaridades del navegador se pueden utilizar para verificar la verdadera naturaleza de un navegador. Profundizar en JavaScript puede revelar intentos de ocultar algo.
ocultar el user agent. Digamos que no ejecutas JavaScript en tu bot. Tal vez crees un token como detección en el sitio. En Azure, asegúrate de que esté creado. Entonces, si tienes un bot que navega en tu sitio y no genera este token, ni ejecuta JavaScript, sabes que algo está saliendo mal. Pero supongamos que sí ejecutan JavaScript. De repente, puedes verificar cómo se comporta el navegador. Probablemente ustedes odian las peculiaridades del navegador. Los creadores de bots también las odian, porque se pueden utilizar para verificar lo que está debajo del capó y no lo que el navegador está informando a simple vista. Y a veces puedes profundizar en JavaScript para ver si alguien está intentando
3. Detectando Bots con User Agent y Pruebas de Comportamiento
Short description:
El user agent, ocultándose con object.define property. Cosas divertidas, atributo malo, artefacto accidental para la detección. Tema del gato y el ratón, ocultando el to string. Formas inteligentes de evitarlo, vectores repetidos. La biblioteca JavaScript creep.js, efectividad limitada. Usando datos, tokens, tokens duplicados, navegaciones sin sentido para atrapar bots. Las cachés como otra vía de detección. Pruebas de comportamiento, frecuencia de clics del usuario.
tratando de ocultar algo. El user agent, ya hablamos de eso. Esa propiedad en el navegador de la ventana va a ser de solo lectura. Entonces los marcadores de bots, van a ocultar eso con object.define property. Miras el descriptor de la propiedad, ves que alguien hizo cosas divertidas allí, tratando de ocultar un user agent. Eso va a ser una imagen sospechosa aquí, ya que tienes un atributo malo que te identifica. Lo arreglas en algo perfectamente normal como el creador de bots accidentalmente deja atrás un artefacto que se puede usar para incriminarte y eso va a ser utilizado para la detección. Esto va a ser un tema común. El juego del gato y el ratón de la detección de bots. Otro ejemplo es que el creador de bots puede anular el to string en algo que están tratando de ocultar. Entonces miras el to string, el to string, ellos también lo ocultan. Hay un juego divertido establecido allí. Formas inteligentes de evitar esto, la idea clave aquí es el tema del gato y el ratón que se repetirá en más detecciones. Digamos que eres realmente bueno en estas tonterías. Creas una biblioteca JavaScript como creep.js para identificar un navegador bajo el capó. Eso solo llega hasta cierto punto porque los creadores de bots pueden ver lo que estás haciendo. Cada vez que los encuentras de alguna manera, van a evolucionar, van a parchar un poco y ahora tenemos que usar algo más. Digamos que en un sitio quieres usar data. Data puede ser complicado porque tienes que lidiar con problemas de privacidad o usuarios indisciplinados que estás testing, pero digamos que tienes un sitio al que los usuarios van solo por el bien de argumento. En cada página pones un token generado que puedes validar si un usuario lo atraviesa. Puedes ver a dónde fue ese usuario. De repente tienes un nuevo campo para atrapar estos bots, tokens duplicados, navegaciones sin sentido, cualquier cosa que te dé la más mínima pista de que alguien tal vez haya preprogramado tu lógica de alguna manera. No es un usuario real navegando. Algunos de ustedes podrían estar pensando, hey, ¿los usuarios también hacen esto? Y eso es absolutamente cierto. Con las cachés y demás. Es por eso que esto no es una prueba concluyente por sí sola, pero las cachés, por ejemplo, también introducen otra vía para la detección de bots. Algunos bots limpian demasiado la caché. Y entraremos en la detección advanced en un momento, pero aún en el ámbito de las detecciones simples de la vieja escuela, las pruebas de comportamiento. ¿Cuántas veces debe hacer clic el usuario?
4. Bots, Cachés y Navegadores Automatizados
Short description:
¿Cuánto hace cada usuario? Y vas a mirar en los extremos y por un lado tienes cero, que va a ser mi padre haciendo clic absolutamente cero veces después de un largo día de trabajo. Pero en el otro extremo, tienes personas haciendo clic 172 veces por segundo. Las cachés se usaban originalmente para distinguir a los humanos de los bots, pero ralentizan a los bots. La evolución de los bots y los avances en los navegadores automatizados los han vuelto más flexibles y difíciles de detectar. Puppeteer, el navegador automatizado de Google, es el líder en el botting, lo que lo hace accesible y difícil de detectar.
¿en el lado? Digamos en una hora. OK. Entonces, va a haber un pequeño espectro. ¿Cuánto hace cada usuario? Y vas a mirar en los extremos y por un lado tienes cero, que va a ser mi padre haciendo clic absolutamente cero veces después de un largo día de trabajo. Pero en el otro extremo, tienes personas haciendo clic 172 veces por segundo. OK, estamos avanzando ahí. Y también, las cachés. Eso es lo que se nos ocurrió originalmente para distinguir a los humanos de los bots. Puede que te preguntes, hey, ¿por qué no empiezas con eso? La razón es que los bots se entrenan, ellos destruyen absolutamente a los humanos en los simples. Y esto es para las captchas complejas también. Entonces, las captchas no están ahí para prevenir a los bots. Lo que hacen actualmente, la razón por la que las ves, es que ralentizan a los bots. Avanzando, hablemos de cómo los bots mejoraron. Acercándonos a la detección advanced, esa parte, los creadores de bots no han estado durmiendo en su guardia todo este tiempo. Mejoraron, siguen mejorando con cada pequeño parche que evolucionan. Eventualmente, el juego se volvió a su favor. Hace diez años, luchaban con scripts de Python. En noticias recientes, ahora se retuitea públicamente, así que aquí hay un tipo que se queja de esto a Elon Musk. Contáctame en la sesión de preguntas y respuestas si quieres hablar más sobre los buscadores y los sombrereros sobre esto. Estoy en lo correcto en eso. La idea es que la evolución es realmente buena en la mejora gradual y la resolución de problemas. Los bots eventualmente podrían volverse indistinguibles de los humanos por completo. Pero pasando de divagaciones filosóficas a la práctica, los mayores avances técnicos que hicieron los bots en el eso va a ser los navegadores automatizados. Los navegadores automatizados cambiaron el juego, no más solicitudes en Python, estás tomando todo el navegador, ejecutas el DOM en JavaScript, incluso puedes fingir ser el usuario. Los navegadores automatizados se volvieron realmente buenos en su tarea, permiten a los creadores de bots falsificar atributos como el user agent sin dejar el artefacto detrás que normalmente se haría en JavaScript. Eso hace que los bots sean más flexibles, más difíciles de detectar. Las peculiaridades del navegador y todo eso son útiles cuando la solución de automatización del navegador admite el navegador con cualquier peculiaridad que tenga y puedes tomar al usuario también con estas usando JavaScript puro o ganchos del navegador, desplazándote por algunos artículos con Windows Scrolls, aquí hay algunos navegadores automatizados que son buenos para testing pero no seas como algunos de los operadores de bots que descubrí que los usan para esquemas fraudulentos porque no están destinados a ocultar nada, son fáciles de detectar, no, quieres algo en lo que estamos llegando al líder aquí. Quieres algo basado en este chico, Puppeteer. Ese es el navegador automatizado de Google. No es malicioso ni intenta ocultar pero es realmente bueno en su tarea y se hace muy fácil de ampliar, hace todo muy fluido y con eso, todas las piezas encajaron, vemos que los bots se están volviendo mejores, los navegadores automatizados disponibles y los operadores mejorando su juego, así nació el bot rey. Este chico, Puppeteer X-Distill, es el mejor en ocultarse para que pueda ejecutarse headless, lo que significa que no se muestra en la pantalla, aún no se detecta, es increíble, increíblemente fácil de usar, haciendo que el botting realmente bueno sea muy accesible. La comunidad detrás de esto es un ejército que busca incluso las discrepancias más mínimas y, por ejemplo, parchean la concurrencia de hardware, que es la cantidad de procesadores disponibles que tienes, para que puedan escalar las operaciones, ejecutar muchos de estos en la misma computadora sin siquiera levantar sospechas de que hay bots, un campo de juego completamente diferente. Dejaron algunas huellas cuando parchearon este atributo en el prototipo, la gente lo detectó en la pantalla, lo encontraron.
5. Detectando Bots: Canvas Fingerprinting y Más
Short description:
Hablemos sobre el canvas fingerprinting y cómo se puede falsificar. El modo headless de Chromium facilita llenar objetos con valores falsos para la detección. Los bots fáciles pueden ser detectados, pero los bots difíciles requieren técnicas como la concurrencia de hardware, pruebas de comportamiento y análisis de datos. Al analizar los datos del agente de usuario, puedes identificar incluso a los mejores bots. Internet necesita más personas inteligentes para combatir el problema en evolución de los bots.
lo parchearon, lo hicieron rápido. Hablemos sobre algo más difícil de falsificar, el canvas fingerprinting, eso es cuando renderizas dinámicamente un canvas para identificar tu dispositivo junto con el navegador. Debería ser más difícil de falsificar, bam, estos fallos desarrollan una extensión que informa valores falsos utilizando ganchos de JavaScript, así que resuelven prácticamente todo.
Quiero tomarme el tiempo para explicar solo uno de estos antes de pasar rápidamente a los demás, el Chromium aquí, cuando está en modo headless, no termina el Chrome.csi, la aplicación Chrome, todas esas cosas de performance, para pensar, ¿puede detectar a Puppeteer cuando está en modo headless con esto? De repente, no tan rápido, amigo, llenan cada objeto con valores falsos como este, navigator Chrome, tiempos de carga, runtime, aplicación, y así sucesivamente, cualquier cosa que se pueda usar para la detección, lo están haciendo muy fácil de usar, molestan elegantemente, recuerda, los CAPTCHA son solo dos líneas aquí, un poco de dinero, y lo resuelven. Y todo esto va a ser solo con estas dos líneas aquí. Todo de lo que hablamos, muy fácil de usar, las pruebas de bots no pudieron encontrarlo, simplemente cuelgan la detección de bots en su repositorio, pero prometo que, llegaremos a lo que realmente funciona, esa parte, lo hice en 10 minutos, está bien. Obviamente, no puedo especificar demasiado aquí, pero comencemos con la parte fácil. Los bots fáciles son fáciles de detectar. Voy a mencionar tres formas de enfrentar a los bots difíciles. Esto será rápido, pero lo diré más de lo que hay por ahí. Comenzando con cosas como la concurrencia de hardware, todavía hay más artefactos de JavaScript que se pueden encontrar si sabes dónde buscar. Sin embargo, estos se están volviendo cada vez más raros, así que no contaría con ellos a largo plazo, pero la ventaja aquí es que son muy claros.
Lo que mantendremos en mente es las pruebas de comportamiento y el análisis de datos a nivel de sesión. Las pruebas de comportamiento que aún funcionan generalmente observan las discrepancias del contexto de la ventana que interactúan con el DOM, y el análisis de datos puede tomar muchas formas, por ejemplo, digamos que seleccionas perfectamente el agente de usuario , la pregunta es qué valor pones allí, mira este gráfico, ese es el agente de usuario al navegar a una aplicación, cada punto es cuántas personas navegaron con ese agente de usuario específico, dirías que hay cierta variación aquí, pero esto es cómo se supone que debe verse. La línea azul es casi plana, así que probablemente sea porque el bot se las arregló para variar correctamente el agente de usuario, pero se equivocó completamente en la parte del peso. Probablemente solo estén produciendo estos al azar. Los sitios normales no hacen esto, y aquí tienes una forma de detectar incluso al mejor bot. Entonces, al principio te pregunté qué pasa con los bots en la web. No puedo decirte con certeza, pero lo que sí sé es que están mejorando, necesitamos más personas inteligentes como tú para estar conscientes para que Internet se convierta en un lugar mejor. Gracias y no dudes en contactarme.
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
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.
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
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.
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
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.
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.
Tabla de contenidos: 1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL. 2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas. 3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas. 4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual. 5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.
Comments