Inline script not loading

[mohdlatif]

After enabling the addon, my custom script is not loading,

my script inside a component

<script setup>
const nonce = useNonce()
useHead({
  script: [
    {
      src: "/js/sd.js",
      type: "text/javascript",
      async: true,
      body: false,
      nonce: nonce,
      onload: () => {
        let selectDropdowns = document.querySelectorAll("select")
        selectDropdowns.forEach((dropdown) => {
          new CustomSelect({
            elem: dropdown,
            bubbles: true,
          })
        })
      },
      onloadstart: () => {},
    },
    // {
    //   mode: "server",
    //   // Set the mode to 'server' if you want to avoid re-loading the script on the client
    //   // Set the mode to 'client' if you want client-side only loading
    //   // see: https://github.com/unjs/unhead/issues/136
    // },
  ],
})

my nuxt config script

...
headers: {
      contentSecurityPolicy: {
        "img-src": ["'self'", "data:", "https:"],
        "script-src": [
          // "'self'", // Fallback value, will be ignored by most modern browsers (level 3)
          // "https:", // Fallback value, will be ignored by most modern browsers (level 3)
          "'unsafe-inline'", // Fallback value, will be ignored by almost any browser (level 2)
          // "'strict-dynamic'", // Strict CSP via 'strict-dynamic', supported by most modern browsers (level 3)
          // "'nonce-{{nonce}}'", // Enables CSP nonce support for scripts in SSR mode, supported by almost any browser (level 2)

          "https://static.cdn.prismic.io", // Prismic script source
          "https://ixvxiuxv.prismic.io", // Your self-hosted script source
        ]
....

when i view the page, the sd.js is loading however the scripts that is within onload not running

I get this error

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src-attr 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

[Baroshem]

Hey,

Check out this documentation page :)

https://nuxt-security.vercel.app/documentation/advanced/strict-csp#whitelisting-external-resources

[Baroshem]

And maybe our CSP expert @vejja could help here :)

[vejja]

Following the error recommendation in the console will do it: "script-src-attr": ["'unsafe-inline'"]

Additional Notes

1- Unsafe-hashes

If you want to go one step further, you can also use the 'unsafe-hashes' policy, which requires you to manually hash the content of the onload inline handler. A quick look at the unjs/unhead github code shows that the generated inline event handler is this.dataset.onload = true. I hashed this string manually and it gave me the following policy: "script-src-attr": ["'unsafe-hashes'", "'sha256-jp2rwKRAEWWbK5cz0grQYZbTZyihHbt00dy2fY8AuWY='"]. But beware because I have no guarantee that unjs/unhead will keep this syntax constant over release cycles so this looks more like a temporary fix to me than a permanent solution.
@Baroshem: Maybe you want to ask the Nuxt core team about their views on this. Depending on their feedback we might be able to automate the generation of unsafe inline event handlers hashes for our users ?

2- CSP disabled

Please note that Strict CSP is not enabled on your site, because

• you have "script-src" : ["'unsafe-inline'"]
• you don't have the nonce-{{nonce}} placeholders
• setting the nonce via useNonce() in useHead is useless.

In short, you are allowing unsafe inline scripts and unsafe inline event handlers, so maybe you don't need CSP at all ?

[mohdlatif]

Thank you for your in-depth reply. I have tried the unsafe inline option and indeed solves the issues for me by adding it in Nuxt config file

 "script-src-attr": [
          "'self'", // Fallback value, will be ignored by most modern browsers (level 3)
          // "https:", // Fallback value, will be ignored by most modern browsers (level 3)
          "'unsafe-inline'", // Fallback value, will be ignored by almost any browser (level 2)
          // "'strict-dynamic'", // Strict CSP via 'strict-dynamic', supported by most modern browsers (level 3)
          // "'nonce-{{nonce}}'",
        ]

Honestly, I just started learning Nuxt early this week, I do not have much of an expert around generating hashes or nonce.

How would you go if you want to nonce this script while having Strict CSP since using useNonce() is useless

a clear example would really help me.

useHead({
  script: [
    {
      src: "/js/sd.js",
      type: "text/javascript",
      body: false,
      nonce,
      onload: () => {
        let selectDropdowns = document.querySelectorAll("select")
        selectDropdowns.forEach((dropdown) => {
          new CustomSelect({
            elem: dropdown,
            bubbles: true,
          })
        })
      },
    },
  ],
})

Thank you

[vejja]

Hi @mohdlatif
I would do the following:

• nuxt.config.ts:

...
headers: {
      contentSecurityPolicy: {
        // do not modify other defaults, only script-src-attr
        "script-src-attr": [
          "'unsafe-hashes'",
          "'sha256-jp2rwKRAEWWbK5cz0grQYZbTZyihHbt00dy2fY8AuWY='"
        ]
      }
....

• Component code

<script setup>
// do not use useNonce, do not set nonce in useHead. This will be done automatically by Nuxt-Security
useHead({
  script: [
    {
      src: "/js/sd.js",
      type: "text/javascript",
      body: false,
      onload: () => {
        let selectDropdowns = document.querySelectorAll("select")
        selectDropdowns.forEach((dropdown) => {
          new CustomSelect({
            elem: dropdown,
            bubbles: true,
          })
        })
      },
    },
  ],
})
...
</setup>

I can see that you are using Prismic but I must say I never used them so I do not know whether they are CSP-compatible.

Content Security Policy is a very strict set of rules that prevent third-party scripts from running on your website. Nuxt Security implements Strict CSP Level 3, which is the highest CSP protection standard, so if you are using Nuxt Security with Prismic, there is a chance that Prismic scripts are considered 3rd party and won't load.

In that case, there are workarounds, and it depends on your goals:
1- Do you need CSP ? If you don't, you can disable CSP protection in Nuxt Security, either completely or partially
2- If you need CSP, can you try the setup that I am recommending above, and tell me what the console says? I will be able to further guide you on setting up CSP properly
3- Can you share a little bit more on how Prismic deploys assets? If you have a repro (Github, Stackblitz) and/or a link to Prismic sources or deployment, this would be super helpful for me to understand how we can help other Prismic users.

Thanks

[Baroshem]

Hey @mohdlatif

Have you tried the recommendations from @vejja ?

[mohdlatif]

Yeb, it worked, this is my config.

  security: {
    nonce: true,
    ssg: {
      hashScripts: true, // In the SSG case, inline scripts generated by the server will be allowed by hash
      hashStyles: false, // Disables CSP hash support for styles in SSG mode (recommended)
    },
    //https://nuxt-security.vercel.app/documentation/advanced/strict-csp
    headers: {
      contentSecurityPolicy: {
        "img-src": [
          "'self'",
          "data:",
          "https://res.cloudinary.com",
      
        ],
        "script-src": [
          "'self'",
          "'nonce-{{nonce}}'",
          "https://static.cdn.prismic.io",
          "https://domain.prismic.io",
        ],
        "script-src-attr": [
          "'unsafe-hashes'",
          "'sha256-jp2rwKRAEWWbK5cz0grQYZbTZyihHbt00dy2fY8AuWY='",
        ],
        "style-src": ["'self'", "'unsafe-inline'"],
        "frame-src": ["'self'", "https://domain.prismic.io"],

        "worker-src": ["'self'", "blob:"],
        "connect-src": [
          "'self'",
          "https://api.iconify.design",
          "https://api.unisvg.com",
          "https://domain.cdn.prismic.io",
        ],
        "upgrade-insecure-requests": true,
      },
      crossOriginOpenerPolicy: false,
      crossOriginEmbedderPolicy: false,
      xXSSProtection: "1; mode=block",
    },
  },

Thank you @Baroshem @vejja

[Baroshem]

Awesome,

Kudos especially to @vejja 🚀

I am mainly a maintainer recently ;)

[Baroshem]

@vejja

Do you think it would be useful to add a note about this question/issue in our docs? :)

[vejja]

Yes definitely

Although I’d like to ask @mohdlatif :

• Did you try ‘strict-dynamic’ on script-src ?
• Would you be willing to tell what kind of scripts you needed to load from static.cdn.prismic.io and domain.prismic.io ?

I am wondering whether ‘strict-dynamic’ was causing issues with these scripts

[mohdlatif]

Sure @vejja,

For strict-dynamic I have not really tried. I just tried to modify my script-src from

"script-src": [
          "'self'",
          "'nonce-{{nonce}}'",
          "https://static.cdn.prismic.io",
          "https://domain.prismic.io",
        ],

to

 "script-src": [
          "'self'",
          "'strict-dynamic'", // Strict CSP via 'strict-dynamic', supported by most modern browsers (level 3)
          "'nonce-{{nonce}}'",
        ],

And Prismic loads fine, but there is a catch. Not all browsers support CSP Level 3

So, there is a risk, that Prismic or external scripts not loads on old browser.

---

When commenting out

// crossOriginOpenerPolicy: false,
// crossOriginEmbedderPolicy: false,

I got this error

---

For the 2nd question: basically you need to exclude 2 scripts, otherwise, Prismic content will not show on the page. All content fetched from prisimic.io will be shown as undefined on the page.

both scripts to exclude are mandatory; static.cdn.prismic.io is fixed
domain.prismic.io needs to be updated with your Prismic custom domain. custom-domain.prismic.io. It is created once you started a project.

[vejja]

Note: Prismic COOP/COEP Github Issue opened at : nuxt-modules/prismic#204