Adding Content Security Policy is blocking 'local' hosted JavaScript and other site resources for multiple sites

Question

In the process of adding a Content-Security-Policy (CSP) to an existing site which uses a variety of JavaScript and other local resources such as jQuery, fonts, etc.

The CSP seems to even be blocking & scanning against these resources disrupting normal functionality and how the site displays.

These different resources are a part of the same site project solution for the site.

Started off with a CSP like this:

"default-src https; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self'; base-uri 'self'; form-action 'self'"

Which blocked jQuery, page functionalities, caused layout issues, etc So then went to:

"default-src https ; img-src 'self' data:; script-src 'self' 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline' 'report-sample'; connect-src 'self'; base-uri 'self'; form-action 'self';"

Allowing 'unsafe-eval' and 'unsafe-inline' on style-src and script-src seemed to at least allow jQuery and a variety of the resources to work. Though still doesn't cover allowing some of the font and icon resources such as in the picture below.1

As can be seen in a browser's dev tools console indicating "blocked the loading of a resource" for various fonts etc that are hosted on the same localhost the site is running from.1

These are the sources I've found useful so far for trying to figure this out:

• How does Content Security Policy (CSP) work?
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src

How can those resources be allowed to load? It seems to be the "default-src https" section which is preventing them from loading.

If "localhost:50149" gets added they seem to load fine but that doesn't work when the local ISS changes its port or the same code gets deployed to multiple hosted sites.

To allow both development and multiple sites to get deployed with the same settings.

Is there a way to allow the resources from the same localhost to be permitted without directly knowing what the "host" site name will be?

Answer 1

How can those resources be allowed to load? It seems to be the "default-src https" section which is preventing them from loading.

Yes, you do not specify the font-src directive, therefore it do fallback to default-src. It's default-src https directive blocks loading fonts in your case because:

• https ia a wrong scheme-source, the right one is https: (with a colon).
• specifying https: will not solve the issue, because you load fonts by http: (http://localhost:50149/Content/fonts/...)

You can use default-src http: https:. It's insecure, because allows any host-sources for omitted fallback-directives.
You can use default-src 'self'. The 'self' will allow to load resources from localhost:xyz if page is loaded from localhost:xyz (the same scheme, hostname and port number).
Also instead of using default-src, you can add font-src 'self' into CSP if only fonts are blocked.

If "localhost:50149" gets added they seem to load fine but that doesn't work when the local ISS changes its port or the same code gets deployed to multiple hosted sites.

It's possible to specify localhost:*. The asterisk (*) means any port number. Or use 'self' as mentioned above.