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 htt

Answer 1

• /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

---

Answer 2

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.