title: Make Angular working with restrictive Content Security Policy (CSP)
body: <p>I cannot make base Angular2 (final) application works with the following restrictive CSP.</p>
  <pre><code>default-src 'none';
  script-src 'self';
  style-src 'self';
  font-src 'self';
  img-src 'self' data:;
  connect-src 'self'
  </code></pre>
  <p>There are one <em>unsafe-eval</em> error in <a href="https://www.npmjs.com/package/lang-js" rel="nofollow noreferrer">lang.js</a> and two in <a href="https://github.com/angular/zone.js/" rel="nofollow noreferrer">zone.js</a>. Could you provide a solution ?</p>
  <h2>Step to reproduce with Angular CLI</h2>
  <p>I have created a <a href="https://github.com/nhenneaux/ng2-cli-webpack-csp" rel="nofollow noreferrer">GitHub repository</a>. You can also follow the instructions below.</p>
  <p>Use the last Angular CLI with Webpack 6.0.8 and the new application created with the instructions below.</p>
  <pre><code>ng new csp-test
  </code></pre>
  <p>Insert in the <code>index.html</code> the meta tag defining the following restrictive Content Security Policy.</p>
  <pre><code>&lt;meta 
    http-equiv=&quot;Content-Security-Policy&quot; 
    content=&quot;default-src 'none';script-src 'self';style-src 'self';font-src 'self';img-src 'self' data:;connect-src 'self'&quot;&gt;
  </code></pre>
  <p>Then serve the application.</p>
  <pre><code>ng serve
  </code></pre>
  <p>Access http://localhost:4200/, the page does not load since scripts are blocked by CSP.</p>
  <h1>Errors</h1>
  <p><a href="https://i.stack.imgur.com/eyTzo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eyTzo.png" alt="Error in Chrome" /></a></p>
  <h2>lang.js</h2>
  <pre><code>lang.js:335 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: &quot;script-src 'self'&quot;.
  </code></pre>
  <p>with the source code.</p>
  <pre><code>335: return new (Function.bind.apply(Function, [void 0].concat(fnArgNames.concat(fnBody))))().apply(void 0, fnArgValues);
  </code></pre>
  <h2>zone.js</h2>
  <pre><code>zone.js:344 Unhandled Promise rejection: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: &quot;script-src 'self'&quot;.
   ; Zone: &lt;root&gt; ; Task: Promise.then ; Value: EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: &quot;script-src 'self'&quot;.
  
  zone.js:346 Error: Uncaught (in promise): EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: &quot;script-src 'self'&quot;.(…)
  </code></pre>
  <p>with the source code.</p>
  <pre><code>343: if (rejection) {
  344:     console.error('Unhandled Promise rejection:', rejection instanceof Error ? rejection.message : rejection, '; Zone:', e.zone.name, '; Task:', e.task &amp;&amp; e.task.source, '; Value:', rejection, rejection instanceof Error ? rejection.stack : undefined);
  345: }
  346: console.error(e);
  </code></pre>