title: How to add a nonce for script and style tags to avoid 'unsafe inline' CSP header field?
body: <p><strong>Context description</strong>
  I am using AWS Amplify to deploy my static web page.</p>
  <p>The custom security headers are applied in the deployment through a configuration file customHttp.yml (<a href="https://docs.aws.amazon.com/amplify/latest/userguide/custom-headers.htm" rel="nofollow noreferrer">https://docs.aws.amazon.com/amplify/latest/userguide/custom-headers.htm</a>)</p>
  <p>I include the customHttp.yml file in a .nuxtignore file to prevent triggering a rebuild of the webpack files if only the custom headers change. However, this only works locally, not on the server side in the deployment process.</p>
  <p><strong>Problem description</strong>
  AWS Amplify does not use the .nuxtignore file in the deployment process. Therefore webpack files are rebuilt every time, resulting in a different hash value that I would need to include in the CSP header fields script-src and style-src. But since triggering a rebuild to apply a modification to customHttp.yml results in a new has value for the jetpack file(s), we never know the correct value upfront.</p>
  <p><strong>Suggestion for solving the problem</strong>
  A nonce would (if static) solve my use case. For example by defining the nonce in the nuxt.config.js file. By including the nonce in the webpack rebuild, I would be able to refer to the static nonce in the CSP header fields because the value would not change.</p>
  <p>For example - nuxt.config.js:</p>
  <p>generate: {
  script-nonce: 'nonce-457bb2Bb06E44Ab5aa9996Ed1a34b26F',
  style-nonce: 'nonce-[ ADD A VALUE HERE ]'
  }</p>
  <p>I realize that the Content Security Policy specification calls for a unique nonce value each time the server transmits a CSP-policy, But for this use case, a static nonce would be my preferred suggestion.</p>