React-fontawesome: Can't use react-fontawesome with sensible content security policies

[djbingham]

Hi,

I love Font Awesome and was delighted to find an officially supported React component. Unfortunately, the current implementation seems to rely on inline styles which can pose a significant security risk and are strongly advised against by security experts.

The recommended way to protect against attackers exploiting inline styles on a web page is to put all CSS into separate files and apply a strict Content Security Policy to disallow inline styles. I've done this in my application and when I try to use react-fontawesome, I get an error in my console indicating that it refused to apply inline styles because of my Content Security Policy.

Is there a way to use react-fontawesome without inline styles?

[robmadole]

@djbingham check out the info we have here

https://fontawesome.com/how-to-use/performance-and-security#content-security-policy

[djbingham]

Oh gosh, my mistake! Sorry I didn't find that for myself - I didn't think to check the FontAwesome website for information I thought was only relevant to the React component.

Looks perfect, I'll give that a go later. Thanks, @robmadole !

[robmadole]

No worries. There is still a chance that we are missing something with CSP (we haven't started using it yet on our own stuff) So just let us know what you run into. We have the desire to support it (because it's a fantastic idea)

[jmnunezizu]

Hi @robmadole,

I tried the suggested setting, but did not work.

What I get:

index.es.js:232 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-1Crl/GVwHSFINQSzfyuyHRndH1ljVgs19xrozlYQ1eU='), 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 don't want to change the CSP setting by allowing 'unsafe-inline'. Do you have any suggestions?

Thanks,
Jose.-

[robmadole]

Have you tried using the hash?

[jmnunezizu]

Hi @robmadole,

I'm not familiar with the way the hash works, but wouldn't it change based on the icons I render in the page? i.e. if I use 1 icon, the hash will be X, if I then add another icon, the hash will be Y, or a sequence of hashes: [X, Y].

if that's the case, even though the hash might solve it, it wouldn't be a robust solution as it would change over time.

Thanks,
Jose.-

[robmadole]

@jmnunezizu if you are going to use CSP you should use SRI anyway. I don't know what build tools you are using (Webpack?) but there are tools out there to help with this.

[lucidkodo]

@djbingham check out the info we have here

https://fontawesome.com/how-to-use/performance-and-security#content-security-policy

The latest link is here.
https://fontawesome.com/how-to-use/on-the-web/other-topics/security

[benm-eras]

I am using a fontawesome kit with the web font option and am also getting the "Refused to apply inline style" CSP error. The page linked to above says this:

However that is clearly not the case!