More secure Vue & Nuxt apps -> by default! 🛡️

Making your web application more secure is not easy and belive me, I have learned it the hard way in several projects and companies I was working at. There are multiple things that you need to take care of in order to develop a stable and attack proof web app.

Thankfully, in Vue/Nuxt ecosystem you can use NuxtSecurity that will help you make your web app more secure by default.

And what is more, we recently released 1.0.0 version of NuxtSecurity with the stable API 🎉

In this article, I will tell you more about the module, what it does, and how you can customise its functionality and behavior to match your security needs better.

Remember that NuxtSecurity is Open Source and we value contributions and feature requests so feel free to open an issue or discussion and let's make the module better together 💚

🤔 What is NuxtSecurity?

NuxtSecurity is a Nuxt module that helps you build more secure web applications - by default.

What this means that using this module without any configuration should help making your app more protected against common web security threats. This is achieved by configuring Nuxt app to follow recommendations from OWASP and more specifically specifically OWASP TOP10

The OWASP Top 10 is a standard awareness document for developers and web application security. It represents a broad consensus about the most critical security risks to web applications.

It is globally recognized by developers as the first step towards more secure coding.

By default, the module configures for you security response headers, certain middleware, and utils. But remember that you can customise or disable any of the functionalities of the module to match your needs best.

Security response Headers

By default, NuxtSecurity will set security response headers to match the values recommended by OWASP and a popular Express.js middleware called helmet.

This will instruct the browser how it should behave in certain situations like handling scripts, assets, native browser API's and many more. You can check more details about each configured header here

Security response headers are usually reserved for applications that utilise the server (so called Server Side Rendered apps). What if I am using static apps? Don't worry, we got you covered! Nuxt Security can set Content-Security-Policy header even without a server through the usage of meta http-equiv that you can read more here

Middleware

NuxtSecurity comes with several handlers called middleware. They are functions that actively help secure your application but are not related specifically to browser like headers but more focused on the underlying Nuxt server -> Nitro.

These handlers are:

• Rate Limiter
• Request Size Limiter
• XSS Validator
• CORS Handler
• Allowed HTTP Methods (optional)
• Basic Auth (optional)
• Cross Site Request Forgery (CSRF) (optional)

They were implemented accordingly to OWASP recommendations that you can read more about here. These recommendations helps protect your app against attacks such as XSS, DDOS, CSRF, and more.

Check out all available customization options for middleware here

Utils

Apart from headers and middleware, NuxtSecurity also ships with few smaller utility functions:

• Hide X-Powered-By -> Nuxt by default sends a X-Powered-By header set to Nuxt which is not recommended by OWASP and that is why, NuxtSecurity hides this header completely.
• Remove Console Loggers -> Avoid shipping console.log('test', user.password) while building your app for production.
• Subresource Integrity -> Make sure that sub resources such as scripts or stylesheets have not been modified against origin.

These utils help spread good security patterns across developers.

🖥️ Usage

The usage of the module is pretty straigtforward.

First, let's install the module:

yarn add nuxt-security

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

export default defineNuxtConfig({
  modules: ['nuxt-security']
})

And that's it! NuxtSecurity will now help you have more secure apps by default 🛡️

You can customise the behavior of the module by using the security configuration object like following:

export default defineNuxtConfig({
  security: {
    headers: {
      // certain header
      xXSSProtection: '1',
    },
    // certain middleware
    rateLimiter: {
      // options
    }
  }
})

You can configure the rules for both global and per route cases. Check out the documentation here to learn more about it.

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

Well done! You have just learned how to use NuxtSecurity to make your Vue & Nuxt apps more secure by default. NuxtSecurity is a powerful set of handlers that helps protect your app against popular web application threats. These handlers can work globally or per route to match your needs best.

Take care and see you next time!