title: How do I inject a CSP nonce into Angular's auto-generated script tags?
body: <p>The <a href="https://angular.io/guide/security#content-security-policy" rel="nofollow noreferrer">Angular docs mention CSP</a>, and Google's Security Engineers <a href="https://youtu.be/_L06HetskC4?t=674" rel="nofollow noreferrer">recommend against using whitelists</a>. What I haven't figured out yet is how to inject a nonce into the script tag(s) that Angular injects into the index.html (to &quot;bootstrap&quot; itself). I suppose it has to do with Webpack, but the <code>ng eject</code> command has been removed from the cli a while ago, I believe, and I haven't been able to find a tutorial on this. Can anyone get me started with pointers, please?</p>
  <p>The <a href="https://webpack.js.org/guides/csp/" rel="nofollow noreferrer">Webpack docs</a> mention that a variable</p>
  <pre><code>__webpack_nonce__ = 'let-nonce-string-be-injected-by-server-here';
  </code></pre>
  <p>needs to be defied in the entry file (not the config - so an <a href="https://github.com/just-jeb/angular-builders" rel="nofollow noreferrer">@angular-builders/custom-webpack npm module</a> is probably not going to help?), but I'm not clear what Webpack's entry file is in the context of Angular...?</p>
  <p>P.S.: Judging from <a href="https://www.freecodecamp.org/news/how-to-configure-webpack-4-with-angular-7-a-complete-guide-9a23c879f471/" rel="nofollow noreferrer">this blog post</a>, the polyfill file is one of the entry files - but it looks like it's not the first, so I doubt adding the variable there will work...?</p>