Firefox: Cannot inspect Font Awesome Pro icon (Subresource Integrity check bug)

[fabswt]

Describe the bug In Firefox (at least as of 67.0.4, possibly earlier), inspecting an i.fa element won't show any styles, neither on the <i>, neither on the pseudo ::before:

Notice how the styles area is empty.

This occurs when Font Awesome Pro is loaded with Subresource Integrity check (i.e.: integrity="sha384-…) and another resource (e.g.: a JavaScript file) is also loaded with integrity check.

I reported the bug here on Bugzilla, but I haven't seen it documented anywhere, so I think it makes sense to have the information here too.

To Reproduce Test case: mvce-bug-firefox-inspector-font-awesome.zip

See Bugzilla for steps to reproduce.

Expected behavior Works fine in Chrome:

Works fine if getting rid of the second resource loaded with Subresource Integrity check:

Screenshots If applicable, add screenshots to help explain your problem.

Version and implementation Version: Font Awesome Pro v5.9.0 Browser and version: Firefox (at least as of 67.0.4)

• [ ] SVG with JS
• [x] Web Fonts with CSS
• [ ] SVG Sprites
• [ ] On the Desktop

To be fair, only tested with Web Fonts. Don't know if this occurs with other ways of inserting Font Awesome. Shouldn't occur if the Web Fonts are included without Subresource Integrity check (e.g.: no CDN, local copy of files.)

Bug report checklist

• [x] I have filled out as much of the above information as I can
• [x] I have included a test case because my odds go way up that the team can fix this when I do
• [x] I have searched for existing issues and to the best of my knowledge this is not a duplicate

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community and for the detailed report.

I've prepared a fiddle so you don't have to download a zip: https://jsfiddle.net/tagliala/jevd7r6o/

I can reproduce on Firefox 68.0 and, strangely enough, this does not happen with Font Awesome Free (and sha384 integrity) https://jsfiddle.net/tagliala/jevd7r6o/5/

The only difference I can see in the Pro CDN answer are the accept-ranges header and a couple of extra headers.

Anyway, I don't know if this issue depends on firefox or the CDN, let's wait for feedback from bugzilla

[tagliala]

This approach (brands only on Pro CDN) randomly works: https://jsfiddle.net/tagliala/jevd7r6o/6/

[fabswt]

The thread was updated. Looks like an issue on your end:

Putting it on the backlog. The issue is reproducible, but the root cause it not yet known. Best guess so far: server misconfiguration serving an HTML file instead of a stylesheet for the paid version of Font Awesome Pro. comment 10

[tagliala]

Thanks for the heads-up

I don't know if I've got this correctly, but if the suggestion is about mime types, I cannot confirm:

fontawesome.css

brands.css