title: How do I integrate the value of __webpack_nonce___ with my Content Security Policy?
body: <p>From my understanding of <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP" rel="noreferrer">Content Security Policy</a>, the nonce has to change on every request. That means (I think) it must be generated at run-time on the client, not at build-time in the Webpack config. I've tested <a href="https://webpack.js.org/guides/csp/" rel="noreferrer">the webpack_nonce functionality</a> in my app and it works great. </p>
  
  <p>Unfortunately, I'm not sure how to get that value, generated at run-time on the client, to the actual CSP policy, which is either set as a meta-tag in the index.html file (or some equivalent) or on the server itself. </p>
  
  <p>I suppose you could set the CSP meta-tag dynamically on the client, but that seems like a security risk. I've experimented with the <a href="https://www.npmjs.com/package/csp-webpack-plugin" rel="noreferrer">csp-webpack-plugin</a>, which calculates hashes of files at build-time and then adds them to the index.html. This process makes sense to me, it just didn't support our use case. </p>
  
  <p>I just feel like I'm missing something with using webpack_nonce. </p>