Improving Security of Nuxt 3

Web applications are becoming more and more complex everyday. They can store confidential data or process user information on the fly. In order to handle this in a good way, developers need to implement certain layers of security. This can be achieved by using several applications like rate limiters or packages that help your application be more secure.

In this article, I would like to introduce you to the new Nuxt module that I recently created that should help you build more secure Nuxt applications, no matter if you build just a simple blog, or a complex e-commerce store. Just keep in mind that this module won't solve all your security problems. The main idea of it is to help building secure applications and it should be a solid start in implementing security layers in your project.

Also, keep in mind, that as of today, the module is in very early stages so more security recommendations will be implemented over time. I just wanted to release it fast so that I can get a better and faster feedback :)

You can check out the module here

If you have some recommendations or requests, please do not hesitate to contact me here or in other social medias.

Module Base

The nuxt-security module is currently based on two main aspects; OWASP Top 10 for Node.js and Helmet.js.

In it, you will have middlewares that will set the same Security Headers as the ones used in Helmet, but you will also get two custom middlewares that are based on the recommendations from OWASP that are meant to limit both rate and request size. These two middlewares will trigger an error with appriopriate HTTP code when:

1. [429] There will be too many requests from one IP Address (Protection against DOS - Denial of Service attacks)
2. [413] The request body (both normal and file) will be too large to handle (Protection against attacks that are meant to exhaust the Server memory)

Helmet.js Security Headers will have the following default values:

Content-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
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Resource-Policy: same-origin
Origin-Agent-Cluster: ?1
Referrer-Policy: no-referrer
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Content-Type-Options: nosniff
X-DNS-Prefetch-Control: off
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-Permitted-Cross-Domain-Policies: none
X-XSS-Protection: 0

I developed this module with extendability and customizability in mind so you are free to:

• disable unwanted headers or middlewares
• configure middlewares to work only on certain routes
• change middleware values

Usage

Adding nuxt-security to your Nuxt 3 app is relatively simple. The module does not require any configuration when used with the default/recommended values for middlewares but you feel free to experiment with the values to match your project requirements best.

In order to use nuxt-security in your app, first let's install it using our favourite package manager:

yarn add nuxt-security # yarn
npm i nuxt-security # npm

Next, let's add it to modules array in nuxt.config.ts:

// nuxt.config.js

{
  modules: [
    "nuxt-security",
  ],
}

And that's it! Both Helmet Headers and limiter middlewares are now enabled and will help you make your app safer.

If you are interested in customization options, please refer to the README

Summary

Nicely done! You have just added few security middlewares to your application that should help you make it a bit safer. Just keep in mind that this is just the beginning of your journey to make the project secure :)

If you have some recommendations or requests, please do not hesitate to contact me here or in other social medias.