Cómo los desarrolladores pueden utilizar pruebas automatizadas de seguridad de aplicaciones para proteger las aplicaciones Vue

Rate this content
Bookmark

Los frameworks de frontend como Vue son vulnerables a entradas no sanitizadas para ejecutar código malicioso. Los patrones que permiten esto se entienden en general, pero aún hay casos en los que tus aplicaciones podrían estar en riesgo. Aprende cómo puedes implementar seguridad de aplicaciones automatizada para mantener tus aplicaciones seguras.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Moverse hacia la izquierda significa integrar herramientas de seguridad en una etapa más temprana del ciclo de vida del desarrollo de software, lo que permite identificar y corregir vulnerabilidades antes de que el software llegue a producción.

Durante el desarrollo, se pueden utilizar herramientas como la detección de secretos, análisis de composición de software, pruebas de seguridad de aplicaciones estáticas y dinámicas para encontrar vulnerabilidades de seguridad en el código.

StackHawk es especialista en pruebas de seguridad de aplicaciones dinámicas, analizando instancias en ejecución de aplicaciones para detectar vulnerabilidades de la misma manera que un actor malintencionado podría explotarlas.

Un ataque de scripting entre sitios (XSS) es un tipo de vulnerabilidad de seguridad que permite a un atacante inyectar scripts maliciosos en páginas web vistas por otros usuarios, lo que puede comprometer la información sensible de las cuentas.

Para proteger una aplicación Vue contra XSS se pueden usar medidas como evitar el uso de VHTML para renderizar HTML directamente, emplear bibliotecas de saneamiento de HTML y establecer políticas de seguridad de contenido (CSP).

CSP (Política de Seguridad de Contenido) es una medida de seguridad que ayuda a detectar y mitigar ciertos tipos de ataques, incluyendo XSS y la injeción de datos, mediante la restricción de recursos externos que pueden cargar en la aplicación.

Nick Teets
Nick Teets
7 min
20 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Hoy, te voy a contar cómo los desarrolladores pueden utilizar pruebas automatizadas de seguridad de aplicaciones para proteger sus aplicaciones Vue. Explicaré qué significa desplazar hacia la izquierda, mostraré un ejemplo de una vulnerabilidad de scripting entre sitios y proporcionaré las herramientas que necesitas para encontrar estas vulnerabilidades antes de la producción. Vamos a ver un ejemplo de nuestra aplicación Vue con scripting entre sitios. Tenemos FontTalk, un foro de mensajes donde los usuarios pueden discutir fuentes y dar estilo a sus publicaciones. Bob inicia sesión y ve una conversación sobre fuentes. Sin saber sobre el scripting entre sitios, su cuenta se ve comprometida. La etiqueta de imagen maliciosa envía su información confidencial al atacante. Para evitar esto, necesitamos hacer cambios en el código.

1. Introducción a las pruebas de seguridad de aplicaciones

Short description:

Hoy, voy a contarles cómo los desarrolladores pueden utilizar pruebas automatizadas de seguridad de aplicaciones para proteger sus aplicaciones Vue. Explicaré qué significa moverse hacia la izquierda, mostraré un ejemplo de una vulnerabilidad de scripting entre sitios y proporcionaré las herramientas que necesitan para encontrar estas vulnerabilidades antes de la producción.

Hola a todos. Mi nombre es Nick Teets y soy un ingeniero front-end en StackHawk. Y hoy, voy a contarles cómo los desarrolladores pueden utilizar pruebas automatizadas de seguridad de aplicaciones para proteger sus aplicaciones Vue.

Un poco sobre mí, soy un ingeniero front-end, así que debo admitir que me emociono con las fuentes. También soy el coorganizador del meetup de Jamstack en Denver, donde hablamos de todo desde CMS sin cabeza hasta generación de sitios estáticos. Y cuando no estoy ocupado tocando música o emocionándome con Helvetica, soy músico aquí en Denver.

Hoy, les voy a contar qué significa moverse hacia la izquierda, les mostraré un ejemplo de una vulnerabilidad de scripting entre sitios en una aplicación Vue y luego les daré las herramientas que necesitan para encontrar este tipo de vulnerabilidades antes de llegar a producción.

Entonces, ¿qué significa moverse hacia la izquierda? En pocas palabras, estamos moviendo las herramientas del ciclo de vida del desarrollo de software hacia una etapa anterior del proceso. Ahora hay una variedad de herramientas de seguridad que puedes utilizar cuando estás trabajando en tu rama de desarrollo o tu rama de características que te ayudarán a encontrar vulnerabilidades de seguridad. Cosas como la detección de secretos o la idea de que deberíamos ofuscar las claves de API que utilizamos para comunicarnos con servicios de terceros. El análisis de composición de software, que consiste en analizar los módulos de código abierto que utilizas en tu aplicación y encontrar vulnerabilidades allí. Tenemos pruebas de seguridad de aplicaciones estáticas, que examinan el código real y los archivos de texto de tu repositorio para encontrar vulnerabilidades. Y por último, las pruebas de seguridad de aplicaciones dinámicas. Esto es en lo que StackHawk es realmente bueno, ya que tomamos una instancia en ejecución de tu aplicación, ya sea en el pipeline o en desarrollo local, y encontramos vulnerabilidades de la misma manera en que un actor malintencionado podría explotar tu aplicación.

2. Ejemplo de aplicación Vue con scripting entre sitios

Short description:

Vamos a ver un ejemplo de nuestra aplicación Vue con scripting entre sitios. Tenemos FontTalk, un foro donde los usuarios pueden discutir sobre fuentes y dar estilo a sus publicaciones. Jane inicia la conversación con una etiqueta de negrita, pero también incluye una etiqueta de imagen oculta que envía información sensible a un servicio de terceros.

Así que vamos a ver nuestro ejemplo de nuestra aplicación Vue con scripting entre sitios. Aquí tenemos FontTalk. Este es un lugar donde los usuarios pueden iniciar sesión en un foro y hablar sobre fuentes. Y, por supuesto, les vamos a dar la capacidad de dar estilo al texto que publican en este foro. Así que Jane va a iniciar la conversación y decir: ¿a todos les gustan las fuentes? Vamos a envolver esto en una etiqueta de negrita para enfatizar que estamos aquí para hablar de fuentes, por supuesto. Y lo vamos a publicar. Y puedes ver que tenemos el texto en negrita ahí. El mensaje está disponible para que todos lo vean. Pero luego Jane va a seguir con otra publicación. Vamos a enfatizar lo hermoso aquí. Pero también vamos a incluir esta etiqueta de imagen. Vamos a ocultar esto del usuario. Y cuando esta etiqueta de imagen se cargue, vamos a enviar información sensible de la cuenta a un repositorio que hemos configurado en un servicio de terceros. Así que vamos a guardar esta nota. Y es posible que como usuario que no está muy familiarizado con la web, no te des cuenta de algo, pero si inspeccionas esta parte, puedes ver que aquí está nuestra etiqueta de imagen, que está oculta, y que está accediendo a nuestro

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

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
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.
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento
Construyendo formularios Vue con VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Construyendo formularios Vue con VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
En este masterclass, aprenderás cómo usar vee-validate para manejar la validación de formularios, gestionar los valores de los formularios y manejar las presentaciones de manera efectiva. Comenzaremos desde lo básico con un formulario de inicio de sesión simple hasta el uso de la API de composición y la construcción de formularios repetibles y de múltiples pasos.

Tabla de contenidos:
- Introducción a vee-validate
- Construcción de un formulario básico con componentes vee-validate
- Manejo de validación y presentaciones de formularios
- Construcción de componentes de entrada validables con la API de composición
- Arrays de campos e inputs repetibles
- Construcción de un formulario de múltiples pasos
Prerrequisitos:
Configuración de VSCode y un proyecto Vite + Vue vacío.