Nuxt

Nuxt does not ship CSP in core. The established route is the Nuxt Security module, which is listed in Nuxt's own module directory and offers nonce support for SSR apps built around 'strict-dynamic'.

What Nuxt Security gives you

A security.headers.contentSecurityPolicy block in nuxt.config, written as directives.
security.nonce: true, which generates a cryptographically random nonce per request and parses every <script>, <link> and <style> tag in your application to apply it.
A 'nonce-{{nonce}}' placeholder for use inside your directives.
Handling of external resources as well as inline elements.

Setting the header

Your URL comes from the Setup page:

export default defineNuxtConfig({
  security: {
    nonce: true,
    headers: {
      contentSecurityPolicy: {
        'script-src': ["'strict-dynamic'", "'nonce-{{nonce}}'"],
        'report-uri': ['https://abc123.report-uri.com/r/d/csp/reportOnly'],
      },
    },
  },
})

Things to watch for

Hashes and nonces cancel 'unsafe-inline'. Once you introduce either, every inline element must carry a nonce or a matching hash - there is no partial adoption. The module's own documentation calls this out as critical, because a single missed inline element breaks the page.
Nonce support is for SSR. A statically generated Nuxt site has no per-request server step, so the nonce route does not apply - deliver the policy from the host instead, and see our Netlify and Cloudflare pages.
This is a community module rather than Nuxt core, so its release cadence is its own. Pin the version and re-check the emitted header after upgrades.

Official documentation

Nuxt Security - Content Security Policy

Start Monitoring with Report URI

Already using us for CSP? Find your report-uri value on Setup, or view your CSP reports.

New to Report URI? Create an account and grab your report-uri value from the Setup page.

Start your free trial