Security composable to use in pages

[maxdzin]

Hey @Baroshem, is it possible to set the security settings on the page directly?

It would be good to have since it requires to be set by certain conditions sometimes.
So, it would be nice to have some composable, similar to useSeoMeta.

And so in the /pages/[slug].vue:

// some logic to define if form with files upload is used
const canUploadFiles = computed<boolean>(() => true)

useSecurity({
  xssValidator: canUploadFiles.value ? false : {},
  corsHandler: {
    origin: '*',
    methods: canUploadFiles.value ? ['GET', 'HEAD'] : ['GET', 'HEAD', 'POST', 'PUT'],
    preflight: {
      statusCode: 204,
    }
  },
  // ... other route security settings
})

Whad do you think?

[Baroshem]

Hey @maxdzin

This is a really interesting feature!

I would completely see the usage of it as a similar approach to useSeoMeta.

I am just not sure if its doable from the Nuxt side as right now Nuxt Security uses either runtime config or routeRules to configure server middlewares dynamically.

@danielroe what do you think about it?

[danielroe]

There's already support for routeRules being defined directly in pages. Maybe this would be a good way to implement.

[maxdzin]

There's already support for routeRules being defined directly in pages.

@danielroe Where can I see that?

[danielroe]

nuxt/nuxt#20391

[Baroshem]

Wow this is amazing! I will try to create a PoC solution to see how it works :)

[Baroshem]

I tried to make this work but for some reason the composable I created does not work :(

import type {
  NuxtSecurityRouteRules
} from '../../types'

export function useSecurity (config: NuxtSecurityRouteRules & { headers?: Record<string, string> }) {
  const { headers, ...security } = config

  defineRouteRules({
    security,
    headers
  })
}

I tried adding normal defineRouteRules in the page and it works correctly. But it still needs to add this line manually in the nuxt config ts:

  experimental: {
    inlineRouteRules: true
  },

And at this point I wonder if it actually makes sense to create such composable.

Right now, users can easily configure per page routes like (after enabling it in the nuxt.config.ts):

defineRouteRules({
  headers: {
    'X-XSS-Protection': '1'
  },
  security: {
      rateLimiter: {
    tokensPerInterval: 3,
    interval: 60000,
  },
  }
})

Not sure if it makes sense to do that (Especially that it does not work)

[maxdzin]

It was a real problem for some projects and I suppose not only I who faced such a thing.
So, yes, that definitely must be in the docs!

[Baroshem]

Added in 724186f

[maxdzin]

@Baroshem when specifying like that

  defineRouteRules({
    security: {
      xssValidator: canUploadFiles.value ? false : {},
    },
  })

typecheck error appears:
error TS2741: Property 'allowedMethodsRestricter' is missing in type '{ xssValidator: false | {}; }' but required in type 'NuxtSecurityRouteRules'.

so I needed to specify the allowedMethodsRestricter for the security within those page settings:

  defineRouteRules({
    security: {
      xssValidator: canUploadFiles.value ? false : {},
      allowedMethodsRestricter: '*',
    },
  })

I think that could be possibly omitted if its default value is about to be used, right?

[Baroshem]

@maxdzin Yes, it fixed in 1.0.0-rc.1 :)

[maxdzin]

Perfect! Thank you!