Feature Request: support nuxt-security csp dynamically

[zakarialounes]

Currently it is only possible to set a csp nonce via theme.cspNonce configuration object (will therefore be static). This should be possible dynamically.

useTheme() via the global property already allows changing the theme, it would be useful to be able to set/change the nonce in the same way. It will probably be necessary to add a vuetify nitro hook in order to allow us to change the csp token before rendering?

For reference:

// change theme 
const vuetifyTheme = useTheme()
const changeTheme = () => {
  vuetifyTheme.global.name.value = getNextThemeName()
};

• Nonce implementation for style src Baroshem/nuxt-security#239 (comment)

[AndreyYolkin]

This is already possible today — no module change needed.

The generated Vuetify plugin runs per SSR request and calls the vuetify:before-create runtime hook with a mutable vuetifyOptions right before createVuetify. So you can read the per-request nonce (e.g. from nuxt-security) and assign theme.cspNonce dynamically:

// plugins/vuetify.ts
import { defineNuxtPlugin, useRequestEvent } from '#imports'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('vuetify:before-create', ({ vuetifyOptions }) => {
    if (import.meta.server) {
      const nonce = useRequestEvent()?.context.security?.nonce
      if (nonce) {
        vuetifyOptions.theme ||= {}
        vuetifyOptions.theme.cspNonce = nonce
      }
    }
  })
})

Vuetify applies theme.cspNonce to the injected <style> tag, and since the hook runs per request the nonce is no longer static. A Nitro hook isn't required.

Documented here: https://nuxt.vuetifyjs.com/guide/advanced/runtime-hooks#dynamic-csp-nonce