blazor server side - CSP Meta Tag incorrect: Blocking all fonts and JS

Question

I followed up on a different SO answer and updated my meta tag like so:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:; default-src 'self' 'unsafe-inline'; https://*.googleapis/*/ https://*.fontawesome.com/*/ script-src 'self' 'unsafe-eval'; object-src 'self';">

My aim was to get FontAwesome to pass a CySec findings. However, the fix broke more than it fixed:

Ignoring duplicate Content-Security-Policy directive 'default-src'.

folio.dubaiairports.ae/:9 Ignoring duplicate Content-Security-Policy directive 'default-src'.

Unrecognized Content-Security-Policy directive '<URL>'.

mySite.myCompany.co/:9 Unrecognized Content-Security-Policy directive 'https://*.googleapis/*/'.

chext_driver.js:65 Unrecognized Content-Security-Policy directive 'https://*.googleapis/*/'.

mySite.myCompany.co/:1 Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Roboto:400,500' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

blazor.server.js:1 [2021-01-26T09:27:01.087Z] Information: Normalizing '_blazor' to 'https://mySite.myCompany.co/_blazor'.
mySite.myCompany.co/:1 Refused to load the script 'https://kit.fontawesome.com/4f9675fbb7.js' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

mySite.myCompany.co/:1 Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Roboto:400,500' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

Any helpful pointers will be greatly appreciated

question from:https://stackoverflow.com/questions/65898870/csp-meta-tag-incorrect-blocking-all-fonts-and-js

Answer 1

Your CSP has errors:

• a double default-src directives, the second one will be ignored.
• in the part 'unsafe-inline'; https://*.googleapis/*/ https://*.fontawesome.com/*/ the directive name is missed, therefore browser counts a https://*.googleapis/*/ and https://*.fontawesome.com/*/ host-sources as directive's names'. The ; is a separator for directives, therefore after 'unsafe-inline'; a directive name should follow.
• https://*.googleapis/*/ and https://*.fontawesome.com/*/ have invalid syntax because * is not allowed in the path-part or to cover top level domain zone, pls see how to correctly specify host-source.

I an not sure about gap: and content: scheme-sources, they not used in ordinary CSP, but they may be applicable in CSP for browser extensions.