🔐 Feature Request: Per-Extension Configuration for Nuxt-Security

[envygeeks]

Is your feature request related to a problem? Please describe.

Currently, Nuxt-Security only allows global security configuration. This makes it difficult to lock down specific file types (e.g., SVGs) that are served from the /public directory or other Nitro routes. For example, securing all .svg files with a strict Content-Security-Policy and X-Content-Type-Options requires either duplicating route patterns or relying on runtime middleware, which adds overhead and complexity.

Describe the solution you'd like

I'd like to be able to define security headers based on file type or extension using a byFileExtension key, like so:

// noinspection JSUnusedGlobalSymbols

export default defineNuxtConfig({
  security: {
    strict: true,
    nonce: true,
    corsHandler: {
      methods: ['GET', 'HEAD', 'OPTIONS'],
      preflight: {
        statusCode: 204,
      },
    },
    byFileExtension: {
      '.svg': {
        headers: {
          /**
           * Merge into main headers
           * That way we can set defaults and
           * override them
           */
          contentSecurityPolicy: {
            'script-src': ['\'none\''],
            'default-src': ['\'none\''],
            'object-src': ['\'none\''],
            'style-src': ['\'none\''],
          },
        },
      }
    },
    headers: {
      referrerPolicy: 'no-referrer',
      contentSecurityPolicy: {
        'upgrade-insecure-requests': true,
        'default-src': ['\'self\''],
        'style-src': [
          '\'self\'',
          '\'nonce-{{nonce}}\'',
          '\'unsafe-hashes\'',
          '\'sha256-<sha>\'',
          '\'sha256-<sha>\'',
          '\'sha256-<sha>\'',
          '\'sha256-<sha>\'',
          '\'sha256-<sha>\'',
          '\'sha256-<sha>\'',
        ],
        'connect-src': [
          self, '\'nonce-{{nonce}}\'',
        ],
        'img-src': [
          ''self'',
          '\'nonce-{{nonce}}\'',
        ],
      },
    },
  },
});

Describe alternatives you've considered

• Duplicating routeRules for every static path manually, which doesn't scale
• Writing a custom Nitro middleware to inspect file extensions, which adds complexity
• Moving SVGs into a separate directory just to isolate them for routing purposes

Additional context

SVGs are often overlooked as an attack vector because they can contain <script> or <foreignObject> elements. Without correct MIME headers and CSP, this can lead to XSS. A first-class way to lock down file types via nuxt-security would enhance its value for CSP-focused developers and align with best practices recommended by OWASP and Mozilla.

[Baroshem]

Hey Buddy,

Sounds like an interesting idea! I can totally see the use case. Would you be interested in creating a proof of concept PR that we coukd test and give you feedback? :)