Asp net core Content Security Policy implementation

Question

I have implemented code to manage the Content Security Policy layer in my application. My implementation is based on an ActionFilterAttribute which was inspired from the code available here (I am including in the question for the sake of simplicity).

public override void OnResultExecuting( ResultExecutingContext context ) {
    var result = context.Result;
    if ( result is ViewResult ) {
        if ( !context.HttpContext.Response.Headers.ContainsKey( "X-Content-Type-Options" ) ) {
            context.HttpContext.Response.Headers.Add( "X-Content-Type-Options", "nosniff" );
        }
        if ( !context.HttpContext.Response.Headers.ContainsKey( "X-Frame-Options" ) ) {
            context.HttpContext.Response.Headers.Add( "X-Frame-Options", "SAMEORIGIN" );
        }

        var csp = "default-src *;";

        // once for standards compliant browsers
        if ( !context.HttpContext.Response.Headers.ContainsKey( "Content-Security-Policy" ) ) {
            context.HttpContext.Response.Headers.Add( "Content-Security-Policy", csp );
        }
        // and once again for IE
        if ( !context.HttpContext.Response.Headers.ContainsKey( "X-Content-Security-Policy" ) ) {
            context.HttpContext.Response.Headers.Add( "X-Content-Security-Policy", csp );
        }
    }
}

However, as you can see from the following pictures, I still get errors in the browser (Firefox in the sample). This is the developer console showing the header which are present:

And these are the console errors

What I am doing wrong, expecially for the last three errors in the console?

Answer 1

To eliminate the CSP errors in the console screen capture, you must make this header happen:

Content-Security-Policy:
  script-src 'self' https://cdnjs.cloudflare.com;
  style-src 'self' https://fonts.googleapis.com;
  img-src 'self' data:

(The value shown in that above is broken up across multiple lines just for readability.)

The key points are:

• you need to have 'self' in there
• you need to give the origin values for the third-party https://cdnjs.cloudflare.com and https://fonts.googleapis.com origins that you're loading fonts and scripts from
• you need to have data: in there to allow the data:image/gif URL in your markup

And if the document is really also loading resources from https://localhost:5000 then you need to have that in there too.

And if there's already some other part of your backend that's adding a CSP header, then it's important to understand that any policy you add with an additional CSP header can only make the policy stricter, not more liberal.

So if the CSP header that's being added elsewhere is a stricter one than you need, then you must find the part of the system which is adding that, and make it stop. And then you can add the more-liberal CSP header you need.