Add nonce property to script tags

[branberry]

Resolves #1554

[brillout]

👍

• The crypto module should only be loaded if needed, and by using @brillout/import to avoid crypto from being bundled by bundlers.
• What's wrong with using Math.random() instead? I wonder how Math.random() can be a security hazard.

[branberry]

Thanks for the feedback! I'll update the import to not include crypto as a part of the bundle. Based on the MDN docs, that the nonce value needs to be cryptographically secure:

Allowing all inline scripts is considered a security risk, so it's recommended to use a nonce-source or a hash-source instead. To allow inline scripts and styles with a nonce-source, you need to generate a random nonce value (using a cryptographically secure random token generator) and include it in the policy. It is important to note, this nonce value needs to be dynamically generated as it has to be unique for each HTTP request:

Based on the MDN docs for Math.random, it does not generate cryptographically secure values.

[brillout]

• 👍 Good to know, how about adding a comment about this in the code?
• I think we need to add the nonce to all other <script> tags?
• How about we set the generated random nonce value to pageContext.nonce? Is there a use case for that? E.g. if the user wants to inject a script to the HTML?
• Maybe we can also let the user set a pageContext.none value (Vike wouldn't use crypto then but take that user-defined value instead), but I don't think there is a use case for that?
• How about we load the crypto module only if strictly necessary , e.g. only ifpageContext.nonce is set?
• Up for adding docs? Maybe creating a new page vike.dev/CSP?
• I'm thinking: should we maybe always generate a nonce by default? How much value does the nonce add? Is that worth it?

[branberry]

Thank you for the feedback! I don't have answers for you at the moment about whether or not there is value in generating a nonce by default. I'll also work on adding the nonce to the other script tags as well.