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.

Comments

[Favour Felix]

Hi Jakub,

Lovely article, really helpful.
Curious to know if I can use this security module on Nuxt 2.6> ?

[Jakub Andrzejewski]

I have not tested that. The main aim of this module was to have this functionality for Nuxt 3 where nitro and h3 are being used to handle server functionality. In case of Nuxt 2, you can always use express.js middlewares that esentially will do similar thing to what my module does for Nuxt 3.

For example: npmjs.com/package/nuxt-helmet for express-helmet, npmjs.com/package/express-rate-limit for rate limiting, etc :)

[Favour Felix]

Alright. Makes sense. Will try this out.
Thanks.

[GreggHume]

Any examples on how to custom set some of the headers... as in how do we put the code to change headers?

[Jakub Andrzejewski]

Sure, basically, you can set a security property in your nuxt.config.ts. Inside of it, you can set property headers to false which will disable all the headers or set certain headers like headers: { xXSSProtection: { value: true, route: 'SOME_ROUTE_OR_EMPTY_STRING_FOR_GLOBAL' } }

[Jakub Andrzejewski]

If something won't work, please let me know! I am doing my best to make the module work perfectly and deliver the best Developer Experience possible :)

[GreggHume]

Thanks,

What would be great is to add the custom config to your examples somewhere. Thanks for pasting here though, its appreciated

[Jakub Andrzejewski]

I am planning to create a documentation website for this module for better examples and instructions. I will publish it quite soon :)

[GreggHume]

Thanks for this. Its a wonder to me why nuxt doesnt have a security module built in as this is something every website would want.

[Jakub Andrzejewski]

I talked to the Core Team, and we think that we can make some functionalities of the module to be merged in to the core Nuxt or Nitro :) Just giving it some time to be battle tested