Cómo implementar una aplicación Jamstack de Vue.js en Netlify con actualizaciones de seguridad automáticas de Snyk

¿Te interesa aprender sobre seguridad front-end y, al mismo tiempo, cómo implementar un sitio web estático en Netlify? ¿Quieres aprender a detectar y corregir automáticamente dependencias vulnerables de JavaScript?

Comencemos.

En este artículo usaremos lo siguiente:

• Netlify: una plataforma para crear e implementar tus sitios al instante en una red global.

• Snyk.io: una plataforma de seguridad pensada para desarrolladores, para bibliotecas de código abierto, contenedores y aplicaciones nativas de la nube.

• Vue.js: un framework progresivo de JavaScript.

• Vuetify: un framework de componentes de interfaz de usuario con diseño Material para aplicaciones de Vue.js.

Una excelente forma de aprender conceptos nuevos es mediante la interacción. ¿Y qué mejor manera de aprender un par de temas nuevos de seguridad front-end que jugando Bingo?

Así que eso es lo que haremos: implementaremos un juego de Bingo de seguridad front-end. ¿Cómo se gana? Las reglas son simples: marca todas las casillas correspondientes a las prácticas que sigues en tu equipo o en tus proyectos de código abierto. ¿Las marcaste todas? ¡Ganaste!

Aquí tienes una captura de Frontend Security Bingo en acción.

Implementar en Netlify

Para publicar el sitio web estático, lo implementaremos en Netlify, una de las herramientas preferidas y optimizadas para alojar sitios web Jamstack.

Con Netlify, tienes dos maneras de implementar un sitio web:

1. Conecta el repositorio de un proyecto desde la interfaz de Netlify. Esto resulta útil si quieres usar un modelo de implementación continua, en el que Netlify se mantiene sincronizado con los cambios que haces en el control de versiones e implementa el sitio web siempre que haya modificaciones. En este caso, la configuración de Netlify indica que se ejecute la herramienta de compilación que elijas para crear el sitio web estático, y Netlify lo implementa.

2. Usa la CLI de Netlify para implementar el sitio web directamente desde la CLI. Es una forma sencilla y muy accesible de comenzar, ya que puedes iniciar una implementación rápidamente desde el espacio de trabajo de un proyecto en tu máquina de desarrollo.

Usaremos la primera opción e implementaremos el juego Frontend Security Bingo directamente desde un repositorio.

Primero, inicia sesión o regístrate en Netlify:

Luego, importa el repositorio de tu proyecto de sitio web desde GitHub, GitLab o Bitbucket.

En mi caso, está en GitHub, así que el proceso es el siguiente:

1. Haz clic en GitHub

2. Autoriza a la aplicación de Netlify para que acceda a tu cuenta de GitHub

3. Elige el repositorio del sitio web en la lista

Si ves el mensaje No repositories found, haz clic en Configure Netlify on GitHub e instala la aplicación de Netlify en el perfil de cuenta de GitHub correspondiente. Después, puedes instalarla en todos los repositorios o elegir específicamente el repositorio del sitio web.

Cuando termines, debería verse así. Entonces, ya estaremos listos para comenzar a implementar y conectar algunos complementos de compilación:

Haz clic en la entrada del sitio web llamada frontend-security-bingo para completar la configuración y luego presiona el botón Deploy:

Netlify comenzará clonando el repositorio, instalando las dependencias y compilando el sitio web. Cuando termine, te proporcionará una URL temporal para el sitio web, que puedes personalizar.

En cuestión de segundos, nuestro juego Frontend Security Bingo estará disponible en https://frontend-security-bingo.netlify.app.

Parece que ya terminamos, ¿verdad?

No exactamente. Aún falta algo.

Una vulnerabilidad de seguridad de JavaScript en mi sitio web

Es un sitio web estático y pequeño. ¿Qué quieres decir con que podría tener vulnerabilidades de seguridad de JavaScript?

Ni siquiera uso muchas dependencias. De hecho, mi proyecto solo tiene dos dependencias de producción. Este es el archivo package.json del sitio web, con el andamiaje predeterminado que se creó usando la CLI de Vue.js cuando inicialicé el proyecto:

Parece que Vuln Cost (una extensión de VS Code que uso) me avisa que en la línea 12 hay una dependencia de mi proyecto que tiene una vulnerabilidad de seguridad.

¿Te pasa que ignoras estas alertas? Entiendo que priorizar las vulnerabilidades puede parecer abrumador, pero si incorporas herramientas y flujos de trabajo más optimizados para tu proceso de desarrollo, será más fácil. Estas son algunas ventajas de Snyk:

• Base de datos de vulnerabilidades: todos los usuarios de Snyk, tanto los que usan el plan gratuito como los que pagan, tienen acceso a la base de datos de inteligencia de vulnerabilidades de Snyk. El equipo de investigación de seguridad de Snyk, con amplia experiencia, mantiene esta base de datos y garantiza una cobertura extensa de vulnerabilidades y un número bajo de falsos positivos. Incluye un 370 % más de vulnerabilidades que los conjuntos de datos CVE.

• Monitoreo: los análisis puntuales son una excelente manera de comenzar con la seguridad del código abierto, pero para las aplicaciones del mundo real tendrás que monitorear tu proyecto continuamente. Así te asegurarás de recibir alertas sobre nuevas vulnerabilidades de seguridad y, mejor aún, de que se creen automáticamente correcciones de seguridad en forma de pull request, para que puedas corregirlas con una fusión.

Al expandir el error del linter en línea de Vuln Cost, vemos que se trata de una vulnerabilidad de nivel medio que afecta al framework de interfaz de usuario Vuetify para Vue.js. No conviene ignorarla.

¿Te animas a aceptar un desafío rápido?

El sitio web en vivo, https://frontend-security-bingo.netlify.app/, incluye esta vulnerabilidad de JavaScript de Vuetify que no se ha corregido. ¿Puedes encontrarla?

Pista: es una vulnerabilidad de Cross-site Scripting (XSS) de JavaScript que afecta a las versiones de Vuetify anteriores a la 2.1.9. Encontrarás más detalles en la Snyk vulnerability database pública. Visita los recursos de seguridad de Snyk para obtener más información sobre las vulnerabilidades de Cross-site Scripting y descubrir con qué frecuencia las encontramos, incluso en aplicaciones web desarrolladas en 2020.

Te explicaré esta vulnerabilidad.

En la parte inferior del sitio web Frontend Security Bingo encontrarás un cuadro para compartir el sitio web en Twitter. El campo de texto te permite personalizar el tuit antes de publicarlo:

Este cuadro de texto usa el slot **error-messages** de Vuetify para mostrar un mensaje de error

<template>
 <div>
   <v-text-field
     :counter="true"
     v-model="shareTwitterText"
     label="tweet"
     required
     :error-messages="tweetErrors"
   ></v-text-field>
   <v-btn
     color="blue"
     outlined
     large
     @click="shareTwitter"
     class="blue--text text--darken-1 font-weight-bold"
     full-width
   >Share on Twitter</v-btn>
 </div>
</template>

En el código del componente, configuramos la lógica de manejo de errores usando el arreglo **tweetErrors** y el método **shareTwitter()**.

<script>
export default {
 name: "SocialShare",
 data: () => {
   return {
     shareTwitterText:
       "Learn about Frontend Security Bingo: https://goo.gl #FrontendSecurity #WebDev",
     tweetErrors: []
   };
 },
 methods: {
   shareTwitter() {
     if (this.shareTwitterText.length > 280) {
       this.tweetErrors.push(
         `Your text is longer than 280 characters: ${this.shareTwitterText}`
       );
       return true;
     } else {
       this.tweetErrors = [];
       const tweetMsg = encodeURIComponent(this.shareTwitterText);
       const tweetUrl = `https://twitter.com/intent/tweet?text=${tweetMsg}&via=liran_tal`;
       window.open(tweetUrl, "_blank");
     }
   }
 }
};
</script>

Si el texto supera los 280 caracteres, establecemos el error. Se ve así:

¿Qué pasaría si el texto del tuit incluyera elementos HTML con JavaScript?

Incluye el siguiente texto en el tuit y luego haz clic en el botón para compartir:

<img src=x onError=”alert(1)” />

¿Te apareció la ventana emergente de alerta?

¡Felicidades! Eres hacker. :-)

Sin embargo, no es tan bueno si no conoces esta vulnerabilidad. Como se describe en la página de la vulnerabilidad XSS de Vuetify:

Las versiones afectadas de este paquete son vulnerables a Cross-site Scripting (XSS) a través del arreglo error-messages. Nota: Si no usas HTML en las props rules, messages, hint, success-messages o error-messages, este problema no te afecta.

Es una vulnerabilidad de seguridad de conocimiento público, lo que significa que los atacantes pueden acceder fácilmente a esta información y usarla como arma en tu contra.

¿Cómo implemento sitios web y mantengo su seguridad?

¡Qué bueno que lo preguntas!

Puedes y deberías ejecutar análisis de seguridad de terceros antes de implementar tu sitio web. ¿Y qué forma más fácil de hacerlo que usar un complemento de Snyk directamente en la compilación de Netlify?

El ecosistema de complementos de Netlify te permite conectar complementos que pueden ejecutar acciones adicionales y ampliar tu proceso de compilación.

Busquemos y agreguemos el complemento de Snyk a nuestro sitio web:

Para obtener resultados de seguridad, necesitaremos un token de API para desarrolladores. Así que iremos a Snyk.io y obtendremos uno. En la página de inicio, haz clic en el botón QUICK START de la esquina superior derecha e inicia sesión con el perfil de identidad que prefieras. Recomiendo especialmente GitHub, ya que también puede enviarte pull requests con correcciones de seguridad automáticas y actualizaciones de dependencias a versiones más recientes.

Encontrarás tu token de API en la página de configuración general de tu cuenta:

Una vez que tengas el token de API de Snyk, podemos agregarlo como variable de entorno para el proceso de compilación de Netlify. En Netlify, puedes encontrar la configuración de compilación en la página de configuración general del sitio, en el menú Build & deploy de la barra lateral izquierda:

Haz clic en Edit variables y agrega una variable nueva con el nombre SNYK_TOKEN y el token de API como valor de esta entrada.

¡Eso es todo!

A partir de ahora, cualquier vulnerabilidad de seguridad detectada en las dependencias de paquetes necesarias para compilar tu sitio web hará que falle la compilación, para que puedas corregirla primero y rápidamente. Snyk te indicará con claridad cómo corregir las vulnerabilidades y qué paquetes debes actualizar.

Veamos cómo se ve una compilación fallida en mi proyecto. Primero, el estado general de implementación indica que la compilación falló debido al complemento y nos da información sobre la causa del fallo:

Al desplazarnos hacia abajo por los registros, podemos ver claramente el error que señala el complemento de Snyk: impide que implementemos esta compilación del sitio web debido a una vulnerabilidad de seguridad de Cross-site Scripting en vuetify:

Gracias al complemento de Snyk, se detuvo el proceso de compilación de Netlify. Detectó la vulnerabilidad de seguridad exacta en Vuetify que usamos para inyectar código JavaScript malicioso mediante una vulnerabilidad de Cross-site Scripting, debido a la versión vulnerable de Vuetify en nuestro árbol de dependencias.

¿Qué pasa si surge una nueva vulnerabilidad de seguridad en una dependencia que usas, pero hace mucho que no compilas el sitio web? No te preocupes, ¡Snyk te respalda! Snyk no solo se ejecutará cada vez que se realice una compilación, sino que el complemento también monitoreará el proyecto en la plataforma de Snyk y ejecutará pruebas diarias. Si se detecta una nueva vulnerabilidad de seguridad en alguna de tus dependencias, recibirás una notificación.

¿Qué sigue?

• Si usas Vuetify, asegúrate de analizar tus dependencias para detectar vulnerabilidades de seguridad y corregirlas. Consejo: si conectas tu repositorio a Snyk, se abrirán automáticamente pull requests para corregirlas y monitorearlas en busca de vulnerabilidades futuras, por si no las analizas o implementas con regularidad por tu cuenta.

• Comienza a usar el complemento de compilación de Netlify de Snyk

• Obtén un token de API en Snyk y agrega tus repositorios para comenzar a monitorearlos y corregirlos