Web Fortificado: Mejores Prácticas para la Seguridad de Aplicaciones 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

En el mundo actual, es crucial priorizar la seguridad de tu aplicación. Todos los datos almacenados en ella deben mantenerse seguros y protegidos, al igual que los habitantes de una fortaleza que dependen de altos muros para su defensa. Sin embargo, la historia y las películas han demostrado que incluso los muros más robustos no pueden resistir un ataque si se pueden explotar puntos débiles. Esto también es cierto para las aplicaciones VueJS.


Únete a mí para una sesión concisa y práctica sobre cómo fortificar tus aplicaciones Vue.js contra amenazas de seguridad e implementar mejores prácticas.

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

Ramona Schwering
Ramona Schwering
22 min
17 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla, titulada 'Fortificar o Ser Fortificado', discute el concepto de tratar tu aplicación como una fortaleza para protegerla de amenazas externas. Destaca la importancia de la seguridad de las aplicaciones web y los riesgos asociados con el control de acceso roto, la inyección y los valores criptográficos. La charla también enfatiza la necesidad de aplicar mejores prácticas y utilizar las características de seguridad de los frameworks. Además, aborda las preocupaciones de seguridad relacionadas con las URL proporcionadas por el usuario, la inyección de estilos y la inyección de JavaScript. El resumen concluye enfatizando la importancia de mantener las dependencias actualizadas y seguir las mejores prácticas para garantizar la seguridad del proyecto.

1. Introducción a la Seguridad Web y Fortalezas

Short description:

Hola a todos. Estoy muy contenta de estar aquí en JS Nation este año y hablar sobre seguridad web y cómo mantener tu aplicación como una fortaleza. Mi nombre es Ramona Schwering, una defensora del desarrollo en Auth0 y una Experta en Desarrollo Web reconocida por Google. Esta charla se llama Fortificar o Fortaleza de la Aplicación. Intenta ver tu aplicación como una fortaleza. Vamos a explorar el concepto de fortalezas a través de películas, como El Señor de los Anillos, donde una fortaleza llamada Helms Deep sirve como refugio. Sin embargo, incluso con una advertencia de nunca haber sido conquistada, se explotó un punto débil.

Estoy muy contenta de estar aquí en JS Nation este año y hablar sobre un tema que me apasiona mucho. Es la seguridad web y cómo mantenernos seguros en el mundo de los enemigos peligrosos, atacantes, lo que quieras llamarles, porque hay muchos peligros en la web. Y sí, quiero mostrarte cómo mantener tu aplicación como una fortaleza. Pero antes de eso, rápidamente, mi nombre es Ramona, Ramona Schwering. Trabajo como defensora del desarrollo en Auth0. Y además de eso, soy una Experta en Desarrollo Web reconocida por Google y una Embajadora de Cypress. Es posible que ya me hayas conocido antes hablando sobre testing, pero hay más y otros temas realmente importantes de los que hablar, y esta vez es la seguridad.

Ok, esta charla se llama Fortificar o Fortaleza de la Aplicación. Intenta ver tu aplicación como una fortaleza. Y si piensas en las fortalezas, ¿qué hacen normalmente? Bueno, incluso si es como un edificio que ves en el entorno, si viajas o en películas, protegen algo valioso. Y sí, las películas son realmente el lugar donde he visto muchas fortalezas. Y esta pequeña pantalla aquí ha sido tomada de una película que realmente disfruto. Se llama El Señor de los Anillos. Es posible que hayas oído hablar de ella. Se trata de un viaje de un hobbit que necesita destruir un anillo en particular. Y es una trilogía. Así que hay tres películas, y especialmente la segunda parte, la disfruté mucho, ya sea el libro o la película, como la que se llama Las Dos Torres. Y hay una fortaleza llamada Helms Deep en ella. Y está destinada a ser un refugio. Así que está destinada a proteger a todo Ulthuan, que son las personas de Rohan, como una región o país en el sentido más amplio, creo. Deben ser protegidos del asalto de las fuerzas de Zaruman. Y tenían una advertencia de que nunca fue conquistada. Bueno, nunca conquistada, 100% seguridad. Supongo que lo hemos escuchado antes en algún momento, ¿verdad? Bueno, volviendo a la fortaleza. Puedes adivinar, no resultó ser cierto. Al menos una parte de la fortaleza no resistió. Y por supuesto, como es en las películas, es casi un cliché. Es nuevamente el Kilmaryr el Mar, que era un punto débil. Hola, Devstar? Era lo mismo que eso

2. La Importancia de Proteger tu Aplicación

Short description:

No hay fortaleza que sea segura todo el tiempo. La protección de tu aplicación puede considerarse como una fortaleza, donde quieres proteger todo lo que hay dentro contra amenazas externas. Siempre debemos ser escépticos y extremadamente cuidadosos.

también. Así que tienen un punto débil. Y si consideramos los libros, ni siquiera lo necesitaban, ya que había un desagüe por donde pasar. Y esto hizo que básicamente la gran primera pared fuera destruida. Y casi fueron abrumados. Así que sí, no hay fortaleza que sea segura todo el tiempo. ¿Por qué te digo esto? Porque la protección de tu aplicación puede considerarse como una fortaleza, donde quieres proteger todo lo que hay dentro contra amenazas externas. Ya sea data, ya sea las características que te gustaría tener para usuarios de pago o cualquier cosa valiosa. Y hay muchas cosas valiosas dentro de una aplicación web, ¿verdad? Así que sí, debemos considerar nuestra aplicación como una fortaleza.

Y no importa si estamos en El Señor de los Anillos, ya sea en la película o en los medios, el mundo está cambiando mucho. Aparecen más vulnerabilidades. Así que siempre debemos ser escépticos. Como Theodin. Si decimos que una fortaleza o una aplicación nunca ha sido conquistada o atacada o hackeada, debemos ser escépticos y extremadamente cuidadosos. Incluso si lo fue

3. Seguridad de Aplicaciones Web y OWASP

Short description:

Para mantener nuestra aplicación web segura, debemos considerar los peligros y riesgos. OWASP proporciona un ranking de los 10 principales riesgos de seguridad, y el primero es el control de acceso roto. Como desarrolladores front-end, podemos mejorar la seguridad mostrando mensajes de error genéricos para la autenticación e implementando límites de velocidad. También se pueden utilizar bibliotecas de terceros como Auth0. El control de acceso roto, los valores criptográficos y la inyección son importantes para el desarrollo front-end.

una lección tardía para Theodin. Nunca debemos sentirnos demasiado seguros. Entonces, si pensamos en cómo mantener nuestra aplicación web segura, lo primero que debemos considerar son los peligros que debemos mantener segura nuestra aplicación, ¿verdad? ¿Cuáles son los riesgos más peligrosos en la web? Bueno, afortunadamente, hay un proyecto que nos ayuda mucho. Es el Proyecto de Seguridad de Aplicaciones Web a Nivel Mundial o OWASP en resumen. Y su objetivo es elevar la seguridad en la web. Y a un ritmo determinado, publican un ranking de los 10 principales riesgos de seguridad más importantes. Y creo que el último ranking fue en 2021. Pero por favor, corríjame si me equivoco ahí.

Y en él, echaremos un vistazo a los tres primeros, porque son los más significativos y más importantes para tener en cuenta, especialmente si queremos aplicar prácticas recomendadas o como algunas pequeñas pero fáciles de aplicar mejores prácticas para mantener segura tu aplicación. Así que aquí va un pequeño spoiler. Uno de esos tres puntos es el más importante para nosotros en el frente, pero los otros también son importantes. Así que el primer lugar, eso es algo que quiero cubrir porque es el primer lugar en el ranking. Es importante y hay algo que nosotros como desarrolladores front-end podemos hacer. Es el control de acceso roto. Este punto trata sobre el riesgo de seguridad en la autorización. Y como autenticación es el primer paso para la autorización porque necesitas saber quién eres, como quiénes son tus usuarios dentro de tu aplicación para saber qué se puede permitir para ella o qué permiso se le puede otorgar. Y sí, hay algunos puntos front-end que debemos tener en cuenta de una manera fácil. No es el enfoque completo de esta charla, pero permítanme mencionar la primera mejora fácil. Es mostrar mensajes de error genéricos para la autenticación. Imagina que tienes un formulario de inicio de sesión. Alguien ingresa credenciales inválidas y dices algo como, oh, tu contraseña es incorrecta. Esto no es una buena idea porque si el atacante ve este mensaje de error, sabe que la contraseña es lo que necesita para realizar un ataque de fuerza bruta. Como si solo necesitara probar algunas otras contraseñas porque sabe que es una contraseña. Así que pensemos en un mensaje de error genérico como que el nombre de usuario o la contraseña son incorrectos. De esta manera, el atacante no sabe qué es exactamente lo que está mal dentro de este formulario de inicio de sesión, lo que nos ayuda a ser un poco más seguros. Y como dije, siendo DDoS, debemos pensar en un límite de velocidad. Entonces, un atacante no podría simplemente enviar spam a tu aplicación con todas las contraseñas posibles, ¿verdad? Tener un pequeño temporizador o un límite de velocidad donde bloqueas tu aplicación te ayudará mucho a mantener seguros a tus usuarios. Si no quieres encargarte completamente de este punto, puedes pensar en usar bibliotecas de terceros como Auth0, por ejemplo. O, por supuesto, podrías construirlo tú mismo si eres lo suficientemente valiente. Hay ejemplos para introducir, por ejemplo, tokens JWT para la autenticación basada en tokens dentro de las aplicaciones, pero hay muchos más. En el contexto del front-end, sin embargo, hay un punto de los tres, como el control de acceso roto, los valores criptográficos y la inyección, que es especialmente importante para nosotros, los desarrolladores front-end. Así que supongo que ya lo viste.

4. Riesgos de Inyección y Prevención

Short description:

La inyección es el riesgo de que un atacante suministre datos no confiables a un programa, que pueden ejecutarse como código malicioso. Los ataques como cross-site scripting (XSS) y las inyecciones SQL pueden ocurrir cuando los datos suministrados por el usuario no se validan, filtran o desinfectan correctamente. Para prevenir estos ataques, nunca utilices contenido no confiable como plantilla de tus componentes. Solo agrega contenido confiable que controles.

Quiero hablar sobre la inyección. La inyección es en realidad el riesgo de que un atacante suministre datos no confiables a un programa, lo que significa en detalle que la entrada puede ser entregada por un campo de entrada u otros medios y luego procesada por un intérprete como parte de un comando o una consulta. Y esto lleva a que esta entrada maliciosa se ejecute como tu propio programa. Por lo tanto, también es la ejecución de ese problema básicamente. Y esos ataques incluyen cross-site scripting o XSS, y también pueden ser inyecciones SQL donde tienes el ángulo de una consulta o más.

Y esas inyecciones pueden ocurrir si los datos, que son suministrados por el usuario, por ejemplo, un campo de entrada, no se validan, filtran o desinfectan, o si tienes consultas dinámicas o llamadas no parametrizadas sin contexto que estemos escapando. Por lo tanto, se utilizan directamente dentro de tu intérprete. Por lo tanto, es bastante obvio por qué este es un ángulo de ataque importante por parte de un cliente o de las partes front-end de tu aplicación.

Entonces, ¿cómo podemos prevenirlos? Lo más fundamental, y realmente necesito enfatizar esto, es nunca, nunca utilices contenido no confiable como plantilla de tus componentes. Si estás utilizando, por ejemplo, Vue.js, que utilizaré como ejemplo a lo largo de la charla, pero trataré de ser lo más agnóstico posible. Pero si estás utilizando React, Angular, Swift o cualquier otro framework, búscalo. No sería muy diferente, porque si utilizas contenido no confiable o contenido que no puedes controlar como plantilla de tus componentes, será equivalente a permitir la ejecución arbitraria o de JavaScript dentro de tu aplicación. Sé que en el contexto de Vue.js en particular, una plantilla se compilará en JavaScript. Y todas las expresiones dentro de esas plantillas se ejecutarán como parte del proceso de renderizado. Así que por favor, no lo hagas. Simplemente no lo hagas. Solo agrega contenido confiable, que esté controlado y sea confiable por ti.

5. Funciones de seguridad del framework y mejores prácticas

Short description:

Tu framework puede proporcionar algunas funciones de seguridad, como prevenir la inyección mediante el escape adecuado del contenido. Sin embargo, confiar únicamente en el framework no es suficiente. Es crucial aplicar las mejores prácticas y construir tu aplicación teniendo en cuenta la seguridad.

Y por favor, no esperes que tu framework haga todo el trabajo pesado, porque hay algunas funciones que tu framework, tal vez Vue, React, Angular, te ayudarán a estar protegido. Pero es impráctico, especialmente desde el punto de vista del rendimiento, que tu framework haga todo el trabajo por ti. Sin embargo, tu framework puede ser la primera línea de defensa a la que debes prestar atención. Como dije, usaré Vue.js como ejemplo, porque soy desarrollador de Vue, pero puedes buscar fácilmente para React o Angular qué funciones de seguridad te proporcionan. Entonces, ¿qué medidas puede proporcionar un framework por sí mismo? En el ejemplo de Vue en este momento. Echemos un vistazo. Entonces, la inyección se previene fácilmente mediante el escape adecuado del contenido, por ejemplo. Por lo tanto, se escapan las cadenas de script, los caracteres especiales. Entonces, las etiquetas de script, como la que tengo aquí, como debajo de este fragmento de código, no se pueden ejecutar de ninguna manera. Y si usas una cadena proporcionada por el usuario en Vue, que contiene el script mencionado al respecto, se escapará a esto. Entonces, el script ya no está ahí, está escapado. Y esto evitará la inyección de script. En el caso de Vue, el escape se realiza utilizando API nativas, como TextContext. Y se hace algo similar con la vinculación de atributos en Vue. En resumen, si tu framework te proporciona funcionalidad para escapar la entrada de datos proporcionada por el usuario, úsala. Como dije, tu framework puede proporcionar muchas funciones de seguridad, pero no puede ser lo único en lo que confíes, ya que es demasiado pedir. Por lo tanto, siempre será el caso de que la protección más importante eres tú mismo. Así que me enfoco en cómo construyes tu aplicación o cómo aplicas estándares y algunas mejores prácticas. Echemos un vistazo a algunas prácticas y cosas a considerar que te ayudarán a aumentar la seguridad dentro de tu aplicación rápidamente.

6. URLs, Style Injection, and JavaScript Injections

Short description:

Las URL proporcionadas por el usuario pueden representar riesgos de seguridad, como el phishing o dirigir a sitios web maliciosos. Utiliza una biblioteca como sanitizeURL para sanear las URL proporcionadas por el usuario. Recuerda sanear las URL en el backend antes de guardarlas en la base de datos. Ten precaución, ya que las URL pueden dirigir a destinos inseguros. La inyección de estilos puede ser un problema de seguridad, como los ataques de redireccionamiento de la interfaz de usuario (UI redress). Limita los estilos proporcionados por el usuario a un entorno seguro o sandbox. Evita las inyecciones de JavaScript al no aceptar Strings.js en las plantillas y funciones de renderizado.

Consideremos agregar enlaces mediante la vinculación del atributo href. Así que en realidad estoy hablando de las URL proporcionadas por el usuario, que podrían contener direcciones incorrectas de Vue o incrustaciones de JavaScript, como aquí. Los casos que puedo pensar en este sentido podrían estar relacionados con el phishing, al construir e ingresar una URL dentro de tu aplicación que dirija a un sitio web malicioso, o una suscripción de curso reflejada.

Entonces, hay una URL que se muestra en la aplicación web. Pero un atacante agregará algo de JavaScript a la URL. Nuevamente, la sanitización te ayudará mucho a evitarlo. Por lo tanto, podrías considerar usar bibliotecas como sanitizeURL para ayudarte. Supongo que lo pondré en un tuit, para que puedas encontrarlo aún más fácilmente, porque veo que no agregué un código QR. Pero no olvides tu backend, ya que tu backend siempre debe sanear las URL proporcionadas por el usuario antes de guardarlas en una base de datos. Y lo último, pero aún importante, ten en cuenta que las URL siempre pueden dirigir a destinos inseguros, incluso si al principio son destinos seguros. Por lo tanto, es el punto en el que pierdes el control.

Bueno, el siguiente tipo de inyección es la inyección de estilos, un tipo que me sorprendió al principio, porque pensé, ¿estilizar con CSS, verdad? ¿Cómo puede ser un ángulo de ataque? Pero hay un punto. Existe una técnica llamada ataque de redireccionamiento de la interfaz de usuario (UI redress). Imagina que tienes un control oculto de la interfaz de usuario. Entonces, un atacante lo estilizará. Ok, comencemos con un ejemplo. Tienes un formulario de inicio de sesión con un botón de inicio de sesión para enviar tus credenciales, y el atacante estilizará este botón de inicio de sesión como otra caja transparente que cubre este botón de inicio de sesión. Y luego, estilizará un enlace sobre él. Así que no enviarás tus credenciales de inicio de sesión a la página que esperas, sino que te llevará a una página de inicio de sesión falsa al tener una caja transparente encima o cubriendo tu botón de inicio de sesión. Redireccionamiento, en realidad. Entonces, con estos estilos proporcionados por el usuario aquí, los usuarios malintencionados podrían proporcionar CSS para hacer clic en la verificación. ¿Cómo podemos evitar eso? Bueno, deberíamos permitir que el usuario ajuste el estilo solo de manera segura, como tener un iframe en un entorno seguro o permitir el control total de CSS de manera segura. Es decir, en este sentido, el usuario solo puede establecer un color determinado o solo un fondo determinado, todos esos cambios que no son tan peligrosos, ¿verdad? Entonces, hay muchas formas de mantenerlos seguros limitando el alcance donde un usuario puede proporcionar estilos.

Por supuesto, también hay un ángulo de ataque en el propio JavaScript, que se llama inyecciones de JavaScript. Y hay algunas cosas que no deberías hacer en Vue, al menos, pero también cuando se trata de otros frameworks. Porque desde un punto de vista de código limpio o de mantenibilidad, las plantillas y las funciones de renderizado no deben tener efectos secundarios, ya que dificulta mucho la depuración. Por lo tanto, debes evitar tener atributos que acepten Strings.js. Es decir, no se deben utilizar eventos como unclick o unfocus, ni atributos. Y los scripts, por supuesto, no deben usarse en ningún complemento. Por lo tanto, se deben evitar estos elementos.

7. Keeping Projects Secure and Conclusion

Short description:

Mantén actualizados tus paquetes NPM y el framework para evitar vulnerabilidades. Utiliza herramientas como Dependabot y NPM audit para garantizar la seguridad de tu proyecto. Siempre ten en cuenta tus dependencias. Nunca uses plantillas no confiables y aplica las mejores prácticas para sanitizar la entrada del usuario. Echa un vistazo al sitio web de OWASP para obtener más recursos. Gracias por tu interés en temas de seguridad y hagamos de la web un lugar más seguro.

Bien, otro punto, que se mencionó, supongo, en el séptimo lugar. Así que no lo marqué en el ranking más antiguo, pero es una buena práctica tener siempre en cuenta. Si tienes un proyecto que se vea así, como el pequeño proyecto de prueba que configuré. Normalmente, no está en producción. Pero no importa si tu proyecto ya está en producción o solo está en modo de desarrollo, nunca debería verse así. Desactualizado, con tantas vulnerabilidades, incluso dos críticas. Por favor, siempre intenta mantener tus paquetes NPM o los paquetes de cualquier administrador de paquetes que uses y tu framework actualizados a la última versión. Y hay algunas cosas que puedes hacer para asegurarte sin poner tanto esfuerzo en ello. Como usar Dependabot si alojas tu proyecto en GitHub o usar NPM audit u otros comandos similares. Echar un vistazo a las bases de datos de CWA donde se mencionarán las vulnerabilidades divulgadas públicamente. Así que por favor mantén tus proyectos actualizados y no esperes demasiado tiempo para aplicar parches de seguridad.

De acuerdo. Cuando se trata de mantener seguras tus aplicaciones web, cuando se trata de tener tu aplicación como una fortaleza, cuando se trata de mi charla, hay algunas cosas que quiero que recuerdes. En realidad, cuatro cosas para recordar. Primero, ya sea Vue, ya sea React, ya sea Angular. Tu framework es la primera línea de defensa y tú eres la segunda línea más importante, pero eres la segunda que marca la mayor diferencia. Por favor, nunca uses plantillas no confiables o plantillas. No puedes controlar las plantillas que no son tuyas. Plantillas en las que no confías. Puedes aplicar muchas pequeñas mejores prácticas como sanitizar, escapar, limitar el alcance de las cosas que un usuario puede proporcionar. Muchas de esas cosas. Y por último, pero no menos importante, ten en cuenta tus dependencias. Mantén tus proyectos actualizados.

Aquí puse algunos códigos QR para obtener más mejores prácticas que me ayudaron mucho, que realmente utilicé las mejores prácticas agnósticas al framework como las de HTML5 de una página completa de OWASP. Siempre tiene sentido echar un vistazo aquí. Y buscaré más recursos yo mismo y los publicaré en Twitter, para no consumir demasiado de tu tiempo porque, sí, hay muchas cosas que puedes hacer. Bueno, ¿qué queda por decir entonces? Gracias por escucharme, por estar aquí, por estar interesado en temas de seguridad y por intentar hacer de la web un lugar más seguro para nosotros, para los desarrolladores y para los usuarios. Si tienes alguna pregunta, solo pregúntala. Encuéntrame en todas las plataformas conocidas como Twitter, Mastodon, LinkedIn y, sí, nos vemos. Hasta pronto. Adiós.

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

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
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.

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.
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
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
Deja que la IA sea tu Documentación
JSNation 2024JSNation 2024
69 min
Deja que la IA sea tu Documentación
Workshop
Jesse Hall
Jesse Hall
Únete a nuestro masterclass dinámico para crear un portal de documentación impulsado por IA. Aprende a integrar ChatGPT de OpenAI con Next.js 14, Tailwind CSS y tecnología de vanguardia para ofrecer soluciones de código e resúmenes instantáneos. Esta sesión práctica te equipará con el conocimiento para revolucionar la forma en que los usuarios interactúan con la documentación, convirtiendo las búsquedas tediosas en descubrimientos eficientes e inteligentes.
Aspectos destacados:
- Experiencia práctica en la creación de un sitio de documentación impulsado por IA.- Comprensión de la integración de la IA en las experiencias de usuario.- Habilidades prácticas con las últimas tecnologías de desarrollo web.- Estrategias para implementar y mantener recursos de documentación inteligente.
Tabla de contenidos:- Introducción a la IA en la documentación- Configuración del entorno- Construcción de la estructura de documentación- Integración de ChatGPT para documentación interactiva