Right script-src parameter in Content-Security-Policy

[alexbidenko]

Problem description

At the moment, Content-Security-Policy header do not include script-src parameter. It means, that every script can be executives in user browser - and it is not secured. As a minimal solution I can propose: 'script-src': ["'self'", "'unsafe-inline'"] - it will be blocking eval and unsecured scripts from other recourses, but it is not right.

More secured solution is do not use unsafe-inline. But for this nuxt-data must be resolved by means of nonce or sha-***. But I do not know how do it.

Describe the solution you'd like

In ideal world script-src should include 'sha-***' of nuxt-data and automatically calculate it in every html rendering on server side.

As alternative script-src can include 'nonce-***' and the nonce must be injected as an attribute in nuxt-data script (for better security nonce must be randomize on every request, do not be constant).

Additional context

In Next.js framework we just can add <NextData nonce="next-data" /> component and inject nonce-next-data in script-src - it is simple correct solution.

[Baroshem]

Hey,

Thank you for reporting this issue! I will take a look at it in the upcoming days :)

[Baroshem]

I just talked about this during Nuxt Insiders meeting and we came up with some ideas on how this can be implemented. I will be working on it next week probably :)

[sfase3]

hello, did you fix that issue?

[Baroshem]

Hey, not yet.

I am working on it. Have been quite busy recently with other topics.

If anyone would like to contribute to it, feel free to open a PR with the change :)

[Baroshem]

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src

[royvzoelen]

Any updates on "As alternative script-src can include 'nonce-***' and the nonce must be injected as an attribute in nuxt-data script (for better security nonce must be randomize on every request, do not be constant)."

[Baroshem]

Hey, not really.

Recently, I did not have time to work on this feature. It is open for contributions for anyone who would like to tackle this. I will be able to come back to this earliest next week or the week after

[royvzoelen]

Thats no problem i cant contribute myself so i will wait for updates on this one.
Keep us posted :)

[trijpstra-fourlights]

I've implemented nonce support for CSP in #171

You can test this directly from github by using:
"nuxt-security": "github:trijpstra-fourlights/nuxt-security#build/nonce",
in your package.json.

Then in your nuxt.config.ts add:

security: {
  // ...
  nonce: true,    // <-- add to enable nonce
  headers: {
      contentSecurityPolicy: {
        // ... other csp settings
        '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'"],
        // ... other csp settings
      },
   }
}

For more information, refer to the updated documentation in the PR.

[alexbidenko]

@trijpstra-fourlights , your PR is super, thanks!

I have written some comments in PR. What do you think about my suggestions?

[trijpstra-fourlights]

@alexbidenko1998 I've addressed your feedback and added a commit regarding your inline literal comment.

[Baroshem]

@alexbidenko1998 @trijpstra-fourlights The feature has been merged and released in version 0.14.0. Thanks so much for this amazing contribution 💚