Jakub Andrzejewski

Posted on Nov 24

How to Implement Content Security Policy in Nuxt

#vue #nuxt #csp #security

When building modern web applications with Nuxt, security should never be an afterthought. One of the most effective ways to protect your app from malicious attacks—especially Cross-Site Scripting (XSS)—is to implement a Content Security Policy (CSP).

In this article, we’ll explore:

What Content Security Policy is and why it matters
How to manually configure CSP in Nuxt
How to enable CSP using the Nuxt Security module
Upcoming first-class CSP support in Nuxt core

Enjoy!

🤔 What Is Content Security Policy (CSP)?

Content Security Policy (CSP) is an HTTP response header that defines where the browser is allowed to load resources from. Instead of trusting everything, you specify rules such as:

Which domains can execute JavaScript
Which images can be displayed
Whether inline scripts are allowed
Whether frames and iframes can load external sites
Whether dynamic eval-like operations are permitted

For example:

Content-Security-Policy: default-src 'self'; script-src 'self';

If a malicious attacker injects a <script> tag or manipulates external resources, the browser will block the execution, protecting your users.

CSP is one of the most effective defenses against:

Cross-Site Scripting (XSS)
Clickjacking
Data injection
Compromised third-party scripts

And since Nuxt apps rely on SSR + hydration, they benefit even more from a strict CSP.

🟢 Manually Adding CSP in Nuxt (Nitro Route Rules)

Nuxt allows you to manually set CSP headers using Nitro’s routeRules. This gives you complete control but requires careful tuning—especially to avoid breaking hydration or external integrations.

Example: Manual CSP configuration

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/**': {
        headers: {
          'Content-Security-Policy':
            "default-src 'self'; " +
            "script-src 'self'; " +
            "style-src 'self' 'unsafe-inline'; " +
            "img-src 'self' data:; " +
            "connect-src 'self';"
        }
      }
    }
  }
})

Notes:

'self' allows resources only from your own domain
'unsafe-inline' for styles is often necessary for hydration unless you add hashing
CDNs like Google Analytics, Sentry, Stripe, etc., must be explicitly added
For more complex apps, hashing or nonces for SSR inline scripts may be required

Manual CSP is powerful but can quickly become complex, especially for larger projects.

🟢 Using the Nuxt Security Module (Recommended)

The nuxt-security module simplifies CSP dramatically. It handles normalization, merging, nonce generation, and integration with SSR hydration so you don’t need to manually maintain large header strings.

Install the module

npm install nuxt-security

Enable and configure CSP

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-security'],

  security: {
    headers: {
      contentSecurityPolicy: {
        'default-src': ["'self'"],
        'script-src': ["'self'"],
        'style-src': ["'self'", "'unsafe-inline'"],
        'img-src': ["'self'", "data:"],
        'connect-src': ["'self'"]
      }
    }
  }
})

Why this approach is easier

✔ CSP rules are merged and normalized
✔ Nonces added automatically
✔ Inline scripts get hashed
✔ Compatible with SSR and Nitro
✔ Great balance of convenience + security

This is currently the most reliable CSP method for Nuxt 3 and Nuxt 4 projects.

🟢 Upcoming: Native CSP Support in Nuxt Core

Nuxt is introducing first-class CSP support directly inside the framework.

Draft PR:
https://github.com/nuxt/nuxt/pull/32242

This new system will provide:

Built-in secure CSP defaults
Automatic hashing of inline scripts
Tight integration with the rendering pipeline
No need for Nuxt Security for basic use cases
Better DX and safer production defaults

Once merged, enabling CSP in Nuxt will become even simpler and more secure.

📖 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 the most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects.

🧪 Advance skills

A certification boosts your skills, builds credibility, and opens doors to new opportunities. Whether you're advancing your career or switching paths, it's a smart step toward success.

Check out Certificates.dev by clicking this link or by clicking the image below:

Invest in yourself—get certified in Vue.js, JavaScript, Nuxt, Angular, React, and more!

✅ Summary

Adding a Content Security Policy is one of the simplest but most impactful improvements you can make to your Nuxt application’s security.

Take care!
And happy coding as always 🖥️

DEV Community