CSP warning when using FontAwesome web fonts (Kit)

user_4821435 0
Viewed 489

According to FontAwesome's documentation for V6:

Using Web Fonts with CSS? You don't need to worry about CSP issues. These workarounds aren't needed.

I load FontAwesome like so:

<script src="https://kit.fontawesome.com/589f449313.js" crossorigin="anonymous"></script>

My CSP is:

Content-Security-Policy: default-src data: 'self' https://*.bootstrap.com https://*.jsdelivr.net https://*.fontawesome.com https://fonts.googleapis.com https://fonts.gstatic.com https://code.jquery.com; form-action 'self'; upgrade-insecure-requests

However, the FontAwesome icons are not loading and I receive this error in the inspector:

Refused to apply inline style because it violates the following Content Security Policy directive: "default-src data: 'self' https://*.bootstrap.com https://*.jsdelivr.net https://*.fontawesome.com https://fonts.googleapis.com https://fonts.gstatic.com https://code.jquery.com". Either the 'unsafe-inline' keyword, a hash ('sha256-vbZVW+MEGpqM/MTrc0cuTI1eza7x/JNIBG8uVXROwnE='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

I am unsure what else I should do, as FontAwesome's documentation states that I should not need to do anything special in the CSP for inline styles.

What am I missing here?

font-awesome content-security-policy css
2 Answers

Your problem concern inline style. May be it's in your html page, or from the script. try somthing like this :

Content-Security-Policy: default-src data: 'self' https://*.bootstrap.com https://*.jsdelivr.net https://*.fontawesome.com https://fonts.googleapis.com https://fonts.gstatic.com https://code.jquery.com; form-action 'self'; style-src 'self' 'unsafe-inline'; upgrade-insecure-requests

you may be need to add the externals uri you use.

user_181362920

You can have a look here

I've not used the kit, but the single files instead:

<link href="~/fontawesome6/css/brands.min.css" rel="stylesheet" />
<link href="~/fontawesome6/css/solid.min.css" rel="stylesheet" />
<link href="~/fontawesome6/css/v5-font-face.min.css" rel="stylesheet" />
<script src="~/fontawesome6/js/fontawesome.min.js"></script>
<script src="~/fontawesome6/js/brands.min.js"></script>
<script src="~/fontawesome6/js/solid.min.js"></script>

In that way it was possible to better see with the Chrome Dev Tools, where to handle. I've added one by one the sha-* values suggested by Chrome.

I did not add unsafe-inline anywhere

My CSP code-block:

context.Response.Headers.Add(
"Content-Security-Policy-Report-Only",
"default-src 'none' ;" +
"script-src 'self' 'unsafe-eval' https://kit.fontawesome.com/ ;" +
"style-src 'self' ;" +
"img-src 'self' data:  ;" +
"font-src 'self' https://ka-f.fontawesome.com/  ;" +
"media-src 'self' data: ; " +
"frame-src 'self' ;" +
"connect-src 'self' ws: https://ka-f.fontawesome.com/ ;" +
"object-src 'none' ;" +
"base-uri 'self' data: ;" +
"report-uri /cspreport ;"
);

In the style-src you have to add your sha256-*

Hope it helps!

user_77290790
Related