Loading of a resource blocked by Content Security Policy

Question

I'm getting the error below in the console of my browser:

Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:3000/favicon.ico (“default-src”).

I searched online and saw that this should be fixed with the snippet of code below:

<meta http-equiv="Content-Security-Policy" content="default-src *;
    img-src * 'self' data: https: http:;
    script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
    style-src  'self' 'unsafe-inline' *">

I added this to my front-end app.component.html file (the parent template for all my front-end views), but this didn't work as expected.

I've also tried multiple permutations thereupon to no avail.

My front-end is at localhost:4200 and back-end at localhost:3000.

Below is the snippet of code from my back-end server (middleware):

app.use(cors());
app.options('*',cors());
var allowCrossDomain = function(req,res,next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
}
app.use(allowCrossDomain);

I also have now added the following middleware to my backend (Express) server:

const csp = require('express-csp-header');

app.use(csp({
  policies: {
      'default-src': [csp.SELF, 'http://localhost:3000/', 'http://localhost:4200/' ],
      'script-src': [csp.SELF, csp.INLINE],
      'style-src': [csp.SELF],
      'img-src': ['data:', 'favico.ico'],
      'worker-src': [csp.NONE],
      'block-all-mixed-content': true
  }
}));

. . . but still hasn't fixed the problem.

Here is a screenshot:

What am I doing wrong and how can I fix it?

Answer 1

Content Security Policy (CSP) is a mechanism to help prevent Cross-Site Scripting (XSS) and is best handled at server side; please note it can be handled at client side as well, making use of the <meta> tag element of your HTML.

When configured and enabled, a web server will return the appropriate Content-Security-Policy in the HTTP response header.

You may want to read more about CSP on the on the HTML5Rocks website and Mozilla developer page here and here.

Google CSP Evaluator is a handy and free online tool to help test CSP for your website or web application.

In your instance, you may need to add the line below without enforcing HTTPS as protocol using the https: directive;
Because your website or application (as shared) is not available over HTTPS.

res.header('Content-Security-Policy', 'img-src 'self'');

Starting with default-src directive set to none is a great way to start deploying your CSP settings.

In case you opt to use the Content-Security-Policy middleware for Express , you may get started as illustrated in the snippet below;

const csp = require('express-csp-header');
app.use(csp({
    policies: {
        'default-src': [csp.NONE],
        'img-src': [csp.SELF],
    }
}));

// HTTP response header will be defined as:
// "Content-Security-Policy: default-src 'none'; img-src 'self';"

Remember CSP are case or application specific and based on your project requirements.

As such, you need to fine tune in order to meet your need.

Answer 2

• /favicon.ico is automatically loaded by the web browser in the absence of other URLs for the favicon. This is specified by: https://html.spec.whatwg.org/#rel-icon
• You current Content-Security-Policy was blocking it. You need to use something like: Content-Security-Policy: img-src 'self'

---

Ideally web browser shouldn't even try /favicon.ico when it would be blocked. After all, loading /favicon.ico is triggered by the web browser, not the developer. I patched chrome (version >= 88) to remove the error:

https://chromium-review.googlesource.com/c/chromium/src/+/2438388

---