CODEWITHSUNDEEP
angularasp.net-corecontent-security-policy
Liam Fleming
Liam Fleming

Reputation: 1106

Angular 5 & ASP.Net Core with (CSP) Content Security Policy

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.

I have enabled CSP using NWebSec, as follows:

 app.UseCsp(options =>
        {
            options.DefaultSources(s => s.Self());
            options.ScriptSources(s => s.Self());
            options.StyleSources(s => s.Self().CustomSources("stackpath.bootstrapcdn.com"));
        }); // Use Content Security Policy

I have built the angular application using:

ng build --aot --prod

The ASP.Net Core application is hosting the (built) Angular application, using the app.UseStaticFiles() middleware.

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:

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.

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.

I have tried this with Angular 5 and Angular 6 (Even tried using a new Angular project). Same issue.

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?

Cheers

Additional Details: Index.html (Default build Angular 6 application)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Default Angular App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="styles.34c57ab7888ec1573f9c.css">
</head>

<body>
  <app-root></app-root>

  <script type="text/javascript" src="runtime.6afe30102d8fe7337431.js"></script>
  <script type="text/javascript" src="polyfills.2903ad11212d7d797800.js"></script>
  <script type="text/javascript" src="main.ae5fbeccd9ff1305a55c.js"></script>
</body>

</html>

Upvotes: 4

Views: 9617

Answers (3)

Darren Street
Darren Street

Reputation: 1830

I'am a bit late to the party on this...but I have the same setup too and was getting those CSP errors. I ended up injecting a response header in the Configure method of the startup class.

As an example this code allows scripts and css from cloudflare and maxcdn.

        app.Use(async (ctx, next) =>
        {
            ctx.Response.Headers.Add("Content-Security-Policy",
            "default-src 'self'; script-src 'self' https://cdnjs.cloudflare.com; " +
            "style-src 'self' https://maxcdn.bootstrapcdn.com" );
            await next();
        });

Insert before "app.UseStaticFiles();" I hope it helps.

Upvotes: 1

Alex Klaus
Alex Klaus

Reputation: 8934

Processing of the CSS in Angular isn't compliant with modern security standards, as styles remain inline in all the components (here is a ticket for that). So far we have to put up with unpleasant style-src 'unsafe-inline' directive in the CSP headers.

For a simple app with Google fonts, the CSP header may look like

Content-Security-Policy: "default-src 'self'; style-src 'self' fonts.googleapis.com 'unsafe-inline'; font-src 'self' fonts.gstatic.com";

This post goes into details of the CSP policies in Angular.

Upvotes: 4

Ritwick Dey
Ritwick Dey

Reputation: 19012

This is broswer security, not related with Angular. You have used inline style in your index.cshtml (assuming you're using Razor Engine of ASP.NET Core).

app.UseCsp(options =>
        {
            options.DefaultSources(s => s.Self());
            options.ScriptSources(s => s.Self());
            options.StyleSources(s => s.Self().CustomSources("stackpath.bootstrapcdn.com").UnsafeInline());
        });

or,

Add this line in <head> tag.

<meta http-equiv="Content-Security-Policy" content=""style-src:'unsafe-inline'; script-src 'unsafe-inline'">

Upvotes: 2

Related Questions