Error 400 when using useNonce() and a lot of CSP errors

[Extarys]

I'm making a single discussion in case my two issues are related (ie: bad config). I'll split if needed.

I cannot use useNonce() and the module disables all javascript in dev mode. In prod mode (build > preview) no css is loaded either.
I also tried deleting .nuxt and node_modules folders without any joy.

SSR is set to true in nuxt.config. I should note that this project extends a nuxt-base layer that set tailwind and some other modules as default (not nuxt-security).

Nuxt-security (1.0.0 rc 1) options:

  // Nuxt-Security
  security: {
    nonce: { // only "true" throws vscode errors and doesn't fix the issues
      enabled: true,
      mode: "renew",
    },
    csrf: {
      https: true,
      cookie: {
        // CookieSerializeOptions from unjs/cookie-es
        path: "/",
        httpOnly: true,
        sameSite: "strict",
      },
      methodsToProtect: []

    },
    headers: {
      contentSecurityPolicy: {
        'img-src': ["'self'", 'data:', 'https:'], // NuxtImg
        'style-src':
          process.env.NODE_ENV === 'production'
            ? [
                "'self'", // backwards compatibility for older browsers that don't support strict-dynamic
                "'nonce-{{nonce}}'",
                "'strict-dynamic'",
              ]
            : // In dev mode, we allow unsafe-inline for hot reloading
              ["'self'", 'https:', "'unsafe-inline'"],
        'script-src': [
          "'self'", // backwards compatibility for older browsers that don't support strict-dynamic
          "'nonce-{{nonce}}'",
          "'strict-dynamic'",
        ],
        'script-src-attr': ["'self'", "'nonce-{{nonce}}'"],
      },
    },
    // xssValidator: {
    //   value: {
    //     stripIgnoreTag: true,
    //   },
    //   route: "/my-custom-route",
    //   throwError: false, // optional
    // },
  },

Error 1 (useNonce):

400
Bad Request
at createError (/mnt/disk/repo/node_modules/h3/dist/index.mjs:78:15)
at Object.handler (/mnt/disk/repo/node_modules/nuxt-security/dist/runtime/server/middleware/xssValidator.mjs:20:17)
at Object.handler (/mnt/disk/repo/node_modules/h3/dist/index.mjs:1630:31)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async toNodeHandle (/mnt/disk/repo/node_modules/h3/dist/index.mjs:1840:7)
at async ufetch (/mnt/disk/repo/node_modules/unenv/runtime/fetch/index.mjs:9:17)
at errorhandler (/mnt/disk/repo/node_modules/nuxt/dist/core/runtime/nitro/error.js:35:30)
at async Server.toNodeHandle (/mnt/disk/repo/node_modules/h3/dist/index.mjs:1847:9)

The error disappear as soon as I remove const nonce = useNonce() from my page.

Error 2:

Content-Security-Policy: The page’s settings blocked the loading of a resource at https://127.0.0.1:3001/_nuxt/@vite/client (“script-src”). [obnl](https://127.0.0.1:3001/page/)
Content-Security-Policy: The page’s settings blocked the loading of a resource at https://127.0.0.1:3001/_nuxt/mnt/disk/repo/node_modules/nuxt/dist/app/entry.js (“script-src”). [obnl](https://127.0.0.1:3001/page/)
Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). [page:57:154](https://127.0.0.1:3001/page/)
Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src-attr”).
Source: this.setAttribute('data-error', 1) [obnl](https://127.0.0.1:3001/page/)
Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src-attr”).
Source: this.setAttribute('data-error', 1) [obnl](https://127.0.0.1:3001/page/)
Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). [page:197:10934](https://127.0.0.1:3001/page/)
Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

I'm using a vue3-prlx fork, and it stops working as soon as I enable this module.

I couldn't find much information in the issues or in the documentation. Your insights are very welcome ❤️

[Baroshem]

@vejja Would you be able to help?

[Extarys]

@vejja I can reproduce Error 2 again when using yarn build && yarn preview, it is gone when on dev mode though
It seems the variable {{nonce}} isn't getting replaced at runtime.

  security: {
    nonce: true,
    csrf: {
      https: false,
      cookie: {
        // CookieSerializeOptions from unjs/cookie-es
        path: "/",
        httpOnly: true,
        sameSite: "strict",
      },
      methodsToProtect: [],
      excludedUrls: ["/api/__link_checker__/"],
    },
    headers: {
      crossOriginEmbedderPolicy:
        process.env.NODE_ENV === "development" ? "unsafe-none" : "require-corp",
      contentSecurityPolicy: {
        "img-src": ["'self'", "data:", "https:"], // NuxtImg
        "style-src":
          process.env.NODE_ENV === "production"
            ? [
                "'self'", // backwards compatibility for older browsers that don't support strict-dynamic
                "'nonce-{{nonce}}'",
              ]
            : // In dev mode, we allow unsafe-inline for hot reloading
              ["'self'", "https:", "'unsafe-inline'"],
        "script-src": [
          "'self'", // backwards compatibility for older browsers that don't support strict-dynamic
          "'nonce-{{nonce}}'",
          "'strict-dynamic'",
        ],
        "script-src-attr": ["'self'", "'nonce-{{nonce}}'", "'strict-dynamic'"],
      },
    },
    rateLimiter: {
      tokensPerInterval: 2000, // FIXME: Needed, else build process throws error 429 (IPX/NuxtImg?)
      interval: 300000,
    },
  },

[vejja]

@Extarys
Would you be able to provide a minima repro ? Either via Stackblitz or via Github repo.

I'd like to understand why the headers return 'nonce-{{nonce}}' without replacing the nonce value. Are you pre-rendering some pages ?
Also would like to understand why the nonce value in the cookie is not the same as the one which is being rejected by CSP in the console.
Finally, looks like you are modifying inline styles via javascript event handlers, do you know where this is coming from in your code?

Some form of repro would be very useful to answer these questions.

[Extarys]

I'm sadly having quite a lot of trouble replicating the whole thing :/. I investigated a bit and looked at some lines throwing the errors, then searched my node_modules folder to find the package. @nuxt/ui-templates triggers a warning for the body element 🤷‍♂️ . The second package is @fontawesome/fontawesome-svg-core. I'll try to make it reproducible with at least FA tomorrow if needed.

[vejja]

Ok, thanks this is actually useful
It looks like you are using modules that are using javascript to insert inline <style> tags dynamically.
Unfortunately this is exactly what your CSP style-src policy is disallowing.

Can you try to set

{
  "style-src": ["'self'", "https:", "'unsafe-inline'"]
}

and let me know if the errors are still there ?

This would still pass the Google CSP Evaluator test

[Extarys]

Your trick seems to work for now. I'll see eventually how I can find a workaround, thanks! Found another culprit. Using <NuxtLoadingIndicator /> component throws a bunch of CSP errors 😇 Looks like injected scripts don't have the nonce tag. https://stackblitz.com/edit/baroshem-nuxt-security-yyys12?file=app.vue,nuxt.config.ts

[Extarys]

I tried to create a project in a folder outside the monorepo.

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "nuxt": "^3.8.0",
    "vue": "^3.3.6",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "nuxt-security": "1.0.0-rc.1"
  }
}

Console:

$ yarn dev
[12:51:05 p.m.] Nuxt 3.8.0 with Nitro 2.7.0
[12:51:05 p.m.] 
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose


[12:51:07 p.m.]  ERROR  Cannot start nuxt:  viteRemove is not a function

  at setup (node_modules/nuxt-security/dist/module.mjs:167:21)
  at async normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:2141:17)
  at async installModule (node_modules/@nuxt/kit/dist/index.mjs:2439:95)
  at async initNuxt (node_modules/nuxt/dist/index.mjs:3655:7)
  at async NuxtDevServer._load (node_modules/nuxi/dist/chunks/dev2.mjs:255:5)
  at async NuxtDevServer.load (node_modules/nuxi/dist/chunks/dev2.mjs:187:7)
  at async NuxtDevServer.init (node_modules/nuxi/dist/chunks/dev2.mjs:182:5)
  at async Object.run (node_modules/nuxi/dist/chunks/dev-child.mjs:103:5)
  at async runCommand$1 (node_modules/nuxi/dist/shared/nuxi.c6444792.mjs:1647:7)
  at async runCommand$1 (node_modules/nuxi/dist/shared/nuxi.c6444792.mjs:1638:11)

$ node -v
v18.18.0

[Baroshem]

Ahh, there was a bug in that wasnt catch in the testing process. Can you try with 1.0.0-rc.2 instead?

I had to publish a new version right after first because the first one had a bug that could ne discovered until it was published to public npm (I tried with local verdaccio and bug wasnt there) so with 1.0.0-rc.2 it should work for you.

[Extarys]

Ohhhh, there is no RC 2 on GH, I thought I was on latest. Sorry for the trouble, kind developer. :D

[Baroshem]

@Extarys

Yes that is correct. It is done because I needed to make a fix right after publishing an rc.1 and I didnt want to include an empty rc.2 there.

Glad that it helped resolve the issue :)