title: Angular 5 & ASP.Net Core with (CSP) Content Security Policy
body: <p>I'm spending some time with CSP in the interest of making my Angular 5 application as secure as possible, but struggling to get it to work. </p>
  
  <p>I have enabled <code>CSP</code> using <code>NWebSec</code>, as follows:</p>
  
  <pre><code> app.UseCsp(options =&gt;
          {
              options.DefaultSources(s =&gt; s.Self());
              options.ScriptSources(s =&gt; s.Self());
              options.StyleSources(s =&gt; s.Self().CustomSources("stackpath.bootstrapcdn.com"));
          }); // Use Content Security Policy
  </code></pre>
  
  <p>I have built the angular application using:</p>
  
  <pre><code>ng build --aot --prod
  </code></pre>
  
  <p>The <code>ASP.Net</code> Core application is hosting the (built) Angular application, using the <code>app.UseStaticFiles()</code> middleware.</p>
  
  <p>I have read through a few articles and tried to find a straight answer on how to get this working but I can't get passed this error, which originates from /main.ae5fbeccd9ff1305a55c.js: </p>
  
  <blockquote>
    <p>Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' stackpath.bootstrapcdn.com". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.</p>
  </blockquote>
  
  <p>I believe that Angular is creating the code which causes these errors and the solution is to use the "--aot" command when building the application, but that's not working for me. </p>
  
  <p>I have tried this with Angular 5 and Angular 6 (Even tried using a new Angular project). Same issue. </p>
  
  <p>My question is: 
  Is there currently a recommended way to get Angular 5/6 working with CSP, without sacrificing security? and if not, what is the next best thing? </p>
  
  <p>Cheers</p>
  
  <p>Additional Details: 
  Index.html (Default build Angular 6 application)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Default Angular App&lt;/title&gt;
    &lt;base href="/"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
    &lt;link rel="stylesheet" href="styles.34c57ab7888ec1573f9c.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  
    &lt;script type="text/javascript" src="runtime.6afe30102d8fe7337431.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="polyfills.2903ad11212d7d797800.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="main.ae5fbeccd9ff1305a55c.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>