Make Angular working with restrictive Content Security Policy (CSP)
<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>