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.
Cómo los desarrolladores pueden utilizar pruebas automatizadas de seguridad de aplicaciones para proteger las aplicaciones Vue
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.
Available in English
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
3. Cross-Site Scripting y Contramedidas
Short description:
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 prevenir esto, necesitamos hacer cambios en el código.
servicio de terceros con información confidencial de la cuenta. Así que vamos a cerrar sesión como Jane. Y vamos a iniciar sesión como Bob. Y Bob llega aquí, y ve, ya sabes, hay una buena conversación sobre fuentes, y él dice, sí, las fuentes son geniales. Y luego Bob va a salir del chat, porque tal vez no sea una persona de foros de mensajes. Pero lo que no sabe es que el scripting entre sitios ha afectado su cuenta. Así que si vamos a este sueño imposible, este cubo, este punto final que hemos configurado, podemos ver que esa etiqueta de imagen envió la información confidencial de Bob aquí, por lo que nuestra mala actriz Jane puede verla. Ahora ella puede iniciar sesión y publicar como Bob, o tal vez, ya sabes, robar su información de tarjeta de crédito, si ese tipo de sistema se implementara en nuestra aplicación. Lo cual, obviamente, no es bueno. Entonces, ¿qué podemos hacer en el código para evitar que esto suceda? Una cosa que podríamos hacer es ir a nuestra lista de Notas, y en lugar de usar VHTML, que utiliza ese método interno HTML en nuestro elemento, podemos simplemente renderizar la información en esta nota, el valor real. Y si lo comprobamos, podemos ver que hemos expuesto estas etiquetas HTML que las personas están insertando en nuestro foro de mensajes. Así que aquí está esa etiqueta de imagen mala que está enviando esa información, pero esto está eliminando algunas de las características de nuestro genial foro de mensajes sobre fuentes, así que esa no es la solución. Usemos esta biblioteca de HTML sanitizado que se puede escanear con SCA, por supuesto, para eliminar parte de ese HTML malicioso mientras permitimos a nuestros usuarios dar estilo a sus publicaciones. Así que si inspeccionamos este elemento, podemos ver que esa etiqueta de imagen maliciosa se ha eliminado de nuestras publicaciones, y parece que todo está funcionando. Ahora, hay una última cosa que podríamos hacer, como una primera línea de defensa contra los ataques de scripting entre sitios, y eso es agregar el encabezado CSP. Así que si vamos a nuestra terminal, vamos a ejecutar un escaneo de Stackhawk, esto obviamente se implementaría en tu canal de integración y entrega continua cada vez que envíes código, y mientras se ejecuta ese escaneo, vamos a ir a la plataforma de Stackhawk para ver cómo se ve un escaneo finalizado. Aquí está nuestra aplicación que ya hemos registrado, y si hacemos clic aquí, podemos ver que hay un par de hallazgos o vulnerabilidades de encabezado CSP que hemos descubierto. Y cuando hacemos clic aquí, se nos da la capacidad de clasificarlos o marcarlos como falsos positivos o aceptar el riesgo para estos diferentes tipos de vulnerabilidades, y también proporcionamos un poco de texto educativo sobre lo que significa la política de seguridad de contenido. Y así, usando una herramienta como Stackhawk, puedes ver cuáles son algunas de estas vulnerabilidades antes de llegar a producción porque lo ejecutas en un canal. Y me encantaría contarte más sobre la seguridad y VLAPs y Stackhawk, pero nos estamos quedando sin tiempo, así que vamos a reproducir esta guía de agradecimiento. Obtén más información sobre Stackhawk en Stackhawk.com. El artículo de blog del que obtuve inspiración para este ejemplo de vista está disponible en el siguiente enlace. Y si quieres contactarme en Twitter, soy NickTex en Twitter. Pasa por allí, dime que te encantó la presentación, hablemos de música o seguridad o JavaScript. Gracias a Vue por tenerme. Gracias por ver, y esto ha sido increíble. Nos vemos luego.
