Agregar seguridad a Nuxt 3

Escrito por

26 de enero de 2023

0 minutos de lectura

¿Qué es Nuxt?

Nuxt es un framework web intuitivo que te permite crear tu próxima aplicación de Vue.js con confianza. Es un framework de código abierto con licencia MIT que hace que el desarrollo web sea simple y potente. Te recomiendo visitar el sitio web oficial si quieres empezar a usarlo.

Acerca de la seguridad web

Las aplicaciones web son cada vez más complejas. Pueden almacenar datos confidenciales o procesar información de los usuarios en tiempo real. Para manejar esto de manera eficaz, los desarrolladores deben implementar ciertas capas de seguridad. Esto se puede lograr con controles de seguridad, como limitadores de velocidad, y usando paquetes de código abierto que ayudan a que tu aplicación sea más segura.

Acerca del módulo nuxt-security

En este artículo, quiero presentarte el nuevo módulo de Nuxt que creé recientemente y que debería ayudarte a desarrollar aplicaciones Nuxt más seguras, ya sea un blog sencillo o una tienda de comercio electrónico compleja. Ten en cuenta que este módulo no resolverá todos tus problemas de seguridad. Su propósito principal es ayudarte a desarrollar aplicaciones seguras y ofrecerte una forma sencilla de implementar capas de seguridad en tu proyecto.

Antes de empezar, consulta el módulo de GitHub y la documentación. El módulo nuxt-security se basa actualmente en dos aspectos principales: OWASP Top 10 for Node.js y Helmet.js.

Con nuxt-security, tendrás funciones de middleware que establecen los mismos encabezados de seguridad HTTP que se usan en HelmetJS, además de funciones de middleware personalizadas basadas en las recomendaciones de OWASP.

Estos son algunos ejemplos de códigos de estado HTTP que se devuelven para las solicitudes al implementar controles de seguridad en una aplicación Nuxt:

429 demasiadas solicitudes: habrá demasiadas solicitudes desde una misma dirección IP (protección contra ataques DOS, o de denegación de servicio).
413 entidad de solicitud demasiado grande: el cuerpo de la solicitud (tanto normal como de archivo) será demasiado grande para procesarlo. Esto protege contra ataques diseñados para agotar la memoria del servidor.
Encabezado `X-Powered-By` oculto. Por lo general, se considera una mala práctica mostrar con qué tecnología se creó la aplicación, por lo que este módulo oculta por completo este encabezado.
400 solicitud incorrecta: validador de XSS para solicitudes GET y POST que descarta las solicitudes que contienen código peligroso.
Controlador CORS similar al popular middleware de Express.js.
405 método no permitido: limitador de métodos HTTP permitidos que te permite restringir los métodos HTTP que se pueden aceptar.
Una implementación de autenticación básica para proteger tu aplicación contra el acceso no autorizado.

Los encabezados de seguridad de Helmet.js tendrán la siguiente estructura:

1Content-Security-Policy: default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests
2Cross-Origin-Embedder-Policy: require-corp
3Cross-Origin-Opener-Policy: same-origin
4Cross-Origin-Resource-Policy: same-origin
5Origin-Agent-Cluster: ?1
6Referrer-Policy: no-referrer
7Strict-Transport-Security: max-age=15552000; includeSubDomains
8X-Content-Type-Options: nosniff
9X-DNS-Prefetch-Control: off
10X-Download-Options: noopen
11X-Frame-Options: SAMEORIGIN
12X-Permitted-Cross-Domain-Policies: none
13X-XSS-Protection: 0

Desarrollé este módulo pensando en la extensibilidad y la personalización. Esto significa que puedes adaptar la configuración de seguridad de Nuxt a las necesidades de tu aplicación, por ejemplo:

desactivar encabezados o middlewares no deseados
configurar middlewares para que funcionen solo en ciertas rutas
cambiar los valores del middleware

En la documentación del módulo también encontrarás secciones sobre buenas prácticas, donde podrás leer más sobre los próximos pasos que puedes seguir para hacer que tu aplicación sea más segura.

Usar el módulo nuxt-security

Agregar `nuxt-security` a tu aplicación Nuxt 3 es bastante sencillo. El módulo no requiere configuración si se usan los valores predeterminados y recomendados para los middlewares, pero puedes experimentar con ellos para adaptarlos a los requisitos de tu proyecto.

Para usar nuxt-security en tu aplicación, primero debemos instalarlo con el administrador de paquetes que prefieras:

1# if you use yarn:
2yarn add nuxt-security
3
4# if you use npm:
5npm i nuxt-security

A continuación, agreguémoslo al arreglo de módulos en `nuxt.config.ts`:

1{
2  modules: [
3    "nuxt-security",
4  ],
5}

¡Y eso es todo! Los encabezados de seguridad HTTP de Helmet y las funciones de middleware ya están habilitados y ayudarán a que tu aplicación sea más segura.

Este módulo registrará automáticamente varios middlewares de seguridad y recomendaciones. Si quieres saber más sobre estas funciones, consulta el limitador del tamaño de las solicitudes y los demás middlewares de esta sección.

Sin embargo, si quieres personalizar las funciones de seguridad predeterminadas, puedes hacerlo así:

1{
modules: [
  "nuxt-security",
],
5​​  security: {
  rateLimiter: {
    value: {
      tokensPerInterval: 2,
      interval: "day",
    },
    route: '/my-custom-route',
  }
}
14}

Esto anulará la configuración predeterminada del middleware de seguridad para que el limitador de velocidad bloquee ciertas direcciones IP después de solo 2 solicitudes y se restablezca al cabo de un día. Sin embargo, esto solo funcionará en una ruta específica. Si quieres que sea global, solo tienes que pasar una cadena vacía, que es como Nuxt registra los middlewares globales.

Si quieres conocer más opciones de personalización, visita la página de configuración.

Resumen

¡Muy bien! Agregaste controles de seguridad a tu aplicación correctamente, lo que debería ayudar a que sea un poco más segura. Ten en cuenta que este es solo el comienzo de tu camino hacia la seguridad. Para aprender más, mira el video de YouTube que aparece a continuación.

Si tienes recomendaciones o solicitudes, no dudes en contactarme.