Cannot use nonce in nuxt-security:headers hook

[jackpercy-acl]

Version

nuxt-security: 1.2.2
nuxt: 3.11.1

Reproduction Link

https://stackblitz.com/edit/nuxt-security-missing-nonce?file=server%2Fplugins%2Fsecurity.ts

Steps to reproduce

1. Configure the nuxt-security:headers hook to change CSP with Runtime Config as per docs
2. Include a 'nonce-{{nonce}}' value in one of the CSP values

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('nuxt-security:ready', async () => {
    await nitroApp.hooks.callHook('nuxt-security:headers', {
      route: '/**',
      headers: {
        contentSecurityPolicy: {
          'script-src': [
            "'self'",
            'https:',
            "'unsafe-inline'",
            "'strict-dynamic'",
            "'nonce-{{nonce}}'",
          ],
        },
      },
    });
  });
});

What is Expected?

The CSP header should be transformed to include the actual nonce value.

What is actually happening?

The CSP value contains the exact string 'nonce-{{nonce}}'

By adding some logging into the nuxt-security nitro plugins files, you can see that the custom CSP from the hook is being registered. However, when the plugin 99-cspSsrNonce.ts runs, the CSP value it resolves and replaces the nonces in, is the default/nuxt.config.ts CSP.

nuxt-security/src/runtime/nitro/plugins/99-cspSsrNonce.ts

Line 43 in 13a96a6

const csp = security.headers.contentSecurityPolicy

This is meaning we cannot do a combination of using runtime config in the CSP and nonces.

[Baroshem]

Hey, thanks for reporting this.

@vejja @huang-julien do you have some ideas about it? :)

[vejja]

@jackpercy-acl : does it work if you don't use the runtime config and instead use the default nuxt.config.ts ?

[jackpercy-acl]

@vejja yes, it works fine if configuring only in nuxt.config.ts

[vejja]

Thanks
@huang-julien looks like the runtime config is not picked up here ?

[huang-julien]

I'm not sure about that, I can't reproduce it

I may have to try reproduce it locally

[jackpercy-acl]

@huang-julien if you check the headers on the returned doc rather than logging render:response you will see the unset nonce.

I assume this beforeResponse hook is run after render:response which is when the CSP from the nuxt-security:headers hook is set on the response.

nuxt-security/src/runtime/nitro/plugins/00-context.ts

Line 35 in 13a96a6

nitroApp.hooks.hook('beforeResponse', (event) => {