insertBefore and appendChild in font awesome kit (version 5.15.4) causing csp issue only in Firefox-CodePudding

I've added Content Security Policy into my website and if I run it using Edge or Chrome it works fine. Using Firefox and Firefox Developer Edition I get the following message:

Content Security Policy: The page’s settings observed the loading of a resource at inline (“default-src”). A CSP report is being sent.

I drilled down to the issue and the problem is the font awesome kit. The following lines of code in the font awesome js file are causing it:

t.map(function (t) {
                    try {
                        N.insertBefore(t, D ? D.nextSibling : null);
                    } catch (e) {
                        N.appendChild(t);
                    }
                }),

Commenting out them, solves the problem, but this should not be solution of the issue. And why does this happen only in Firefox?

These are my Content Security Policy settings (still in development stage) in my Startup.cs file:

context.Response.Headers.Add("X-Xss-Protection", "1");
context.Response.Headers.Add("X-Frame-Options", "SAMEORIGIN");
context.Response.Headers.Add("X-Content-Type-Options", "nosniff");
context.Response.Headers.Add("Referrer-Policy", "same-origin");
context.Response.Headers.Add(
"Content-Security-Policy-Report-Only",
"default-src 'self' ws: data: 'unsafe-hashes' 'unsafe-eval' 'nonce-aGRoYmZkc3ZiNzY3JcKnPTg3aFRaVFJUZGRyZXN0cnN0' 'nonce-YmNoZGZHNXV3ZHNoamNkNygvSSZaVFVIQnpodmp6dHRmY2hn' https://kit.fontawesome.com/52d38e1a9e.js https://kit.fontawesome.com/ https://ka-f.fontawesome.com/ https://gstatic.com/ https://localhost:44331/ https://fonts.googleapis.com/ https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js https://unpkg.com/@googlemaps/markerclustererplus/src/cluster-icon.ts 'sha256-cb637ea0f8082b5a5bc9d82b34f76107d12280c583667182dc964947646f29f4' 'sha256-uCITVBkyNmwuSQXzSNUuRx7G7 1kS2zWJ9SjHF0W2QA=' 'sha256-ZL58hL5KbUHBRnMK797rN7IR Tg9Aw61ddJ/rmxn1KM=' 'sha256-bepHRYpM181zEsx4ClPGLgyLPMyNCxPBrA6m49/Ozqg=' 'sha256-HZr72FSDtYjoEg U4NojWEWsNaTgrhMORN8ybhRDQSs=' 'sha256-Uvo 1nX aMLgIJnIGm7G6XZT7KWoJkHCbLpMTgAv01Y=' 'sha256-HZr72FSDtYjoEg U4NojWEWsNaTgrhMORN8ybhRDQSs=' 'sha256-Uvo 1nX aMLgIJnIGm7G6XZT7KWoJkHCbLpMTgAv01Y=' 'sha256-HZr72FSDtYjoEg U4NojWEWsNaTgrhMORN8ybhRDQSs=' 'sha256-Uvo 1nX aMLgIJnIGm7G6XZT7KWoJkHCbLpMTgAv01Y=' 'sha256-yEPgAJ9xKhJvKwes2YTVIBSMk7B4hWg3zbYSw52wr1I=' 'sha256-UH4e1EuuJz6i5zgkOPew50GcFwZ1NH48NYvUM kOwL0=' 'sha256-HZr72FSDtYjoEg U4NojWEWsNaTgrhMORN8ybhRDQSs=' 'sha256-Uvo 1nX aMLgIJnIGm7G6XZT7KWoJkHCbLpMTgAv01Y=' 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE=' 'sha256-rJOLjqvjgn1zEXQNkKqELY76zoK3WC6Ua0xxgCwVtVE=' 'sha256-zIsksnTnPrHZq7Q79LNNskIIcK3fKKzlbBk9hVBff08=' 'sha256-iiNRhEPOjhCdIE0uTbsXEifSQ/mLv0xd6PrH0DEM3MU=' 'sha256-YXVOm5Zx6ev6 zLCf5Q1mAEjy94JuiKbP4ME7oARgYA=' 'sha256-V/76Tb35rdz/dDtlkr C2I4JpYZZzZCqhhEt fYLYMk=' 'sha256-AyJmRpZpXIvAmU64iQpX2Ut03f6MTPgAbex6oprvEms=' 'sha256-t6oewASd7J1vBg5mQtX4hl8bg8FeegYFM3scKLIhYUc=' ;"  
"script-src-elem 'self' 'nonce-aGRoYmZkc3ZiNzY3JcKnPTg3aFRaVFJUZGRyZXN0cnN0' 'nonce-YmNoZGZHNXV3ZHNoamNkNygvSSZaVFVIQnpodmp6dHRmY2hn' https://kit.fontawesome.com/ https://kit.fontawesome.com/52d38e1a9e.js https://ka-f.fontawesome.com/ https://www.google-analytics.com/analytics.js https://maps.googleapis.com/maps/api/ https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js https://maps.googleapis.com/ https://js.stripe.com/v3/ https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.min.js https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.9/jquery.validate.unobtrusive.min.js 'sha256-jpjNsgAUcw4bRnjwadK7eXkHIZ5U/NKOlBNQxHEmaks=' 'sha256-fIkC4b4crvv6N/  kl5qCd/nhTe0/JC7KANDL3YeODw=' 'sha256-EuabHSnz98x5cuuQ/sdN1Z8gPxaTn00z5J20cvrWKl4=' 'sha256- fPW75vLIBgWpR7fY/Cy5avrOp3uSpkkuyeiEztic04=' 'sha256-60gvxwFPUMSsgTLBh44jwW0wr2J6IsmBWn4MeX9KpHw=' ;"  
"style-src-elem 'self' 'nonce-YmNoZGZHNXV3ZHNoamNkNygvSSZaVFVIQnpodmp6dHRmY2hn'  https://fonts.googleapis.com/ https://kit.fontawesome.com/52d38e1a9e.js https://kit.fontawesome.com/ https://ka-f.fontawesome.com/ 'sha256-ZL58hL5KbUHBRnMK797rN7IR Tg9Aw61ddJ/rmxn1KM=' 'sha256-bepHRYpM181zEsx4ClPGLgyLPMyNCxPBrA6m49/Ozqg=' 'sha256-uCITVBkyNmwuSQXzSNUuRx7G7 1kS2zWJ9SjHF0W2QA=' 'sha256-/VVOq Ws/EiUxf2CU6tsqsHdOWqBgHSgwBPqCTjYD3U=' 'sha256-ZL58hL5KbUHBRnMK797rN7IR Tg9Aw61ddJ/rmxn1KM=' 'sha256-bepHRYpM181zEsx4ClPGLgyLPMyNCxPBrA6m49/Ozqg=' 'sha256-uCITVBkyNmwuSQXzSNUuRx7G7 1kS2zWJ9SjHF0W2QA=' 'sha256-mmA4m52ZWPKWAzDvKQbF7Qhx9VHCZ2pcEdC0f9Xn/Po=' 'sha256-59z2Ykt7odDkwf2/Ef0ZgCSGegjdzB0AWB4812PzQnA=' 'sha256-lqO9GtizDrXbeRXIR3ynpmU gCyvU40G2GmqvrAGxBk=' 'sha256-lqO9GtizDrXbeRXIR3ynpmU gCyvU40G2GmqvrAGxBk=' 'sha256-jPTo51UfMyQY49ExaRBNooDCP2NMF8PgeSYuKJSVZpA=' 'sha256-NsEzkM762veirpWZeMiqlWTPdCYrm1uJHLzzwfYnDLM=' 'sha256-k8VVyuObKUPygF5AIY0Saj1vg5MaPPa/250lyF74yPQ=' 'sha256-PNsPul0zQFUiYu9XLVKzTdD5Cz5ghp1MT4H5/zAeI3Q=' 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE=' 'sha256-ixVUGs3ai0rMA0pgIVBN0KVlYbQip7/5SGmnUwJPNqE=' ;"  
"img-src 'self' 'nonce-YmNoZGZHNXV3ZHNoamNkNygvSSZaVFVIQnpodmp6dHRmY2hn' http://www.w3.org/ https://img.icons8.com/ https://maps.gstatic.com/ https://maps.googleapis.com/ data: ;"  
"font-src 'self' 'nonce-YmNoZGZHNXV3ZHNoamNkNygvSSZaVFVIQnpodmp6dHRmY2hn' https://fonts.googleapis.com/ https://kit.fontawesome.com/52d38e1a9e.js https://kit.fontawesome.com/ https://ka-f.fontawesome.com/ https://fonts.gstatic.com/ ;"  
"media-src 'self' data: ;"  
"frame-src 'self' https://js.stripe.com/ ;"  
"connect-src 'self' 'nonce-YmNoZGZHNXV3ZHNoamNkNygvSSZaVFVIQnpodmp6dHRmY2hn' ws: https://maps.googleapis.com/ https://ka-f.fontawesome.com/ https://kit.fontawesome.com/ https://ka-f.fontawesome.com/ ws://localhost:5832/ ws://localhost:22234/ ;"  
"report-uri https://localhost:44331/Home/cspViolationReportEndpoint/"
);

And this is the razor page header:

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
<title>Vivace</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/css/fonts.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script nonce="YmNoZGZHNXV3ZHNoamNkNygvSSZaVFVIQnpodmp6dHRmY2hn" async src="https://kit.fontawesome.com/52d38e1a9e.js" crossorigin="anonymous"></script>
@*<script nonce="YmNoZGZHNXV3ZHNoamNkNygvSSZaVFVIQnpodmp6dHRmY2hn" src="~/js/fontawesomekit.js"></script>*@

As you see, I've tried to use the js file of the font awesome kit locally

src="~/js/fontawesomekit.js"

just to better understand what is going on. Normally I use the kit with the provided link. In this way I was able to see where the proble is, and to comment out the t,map(func...

Using 'unsafe-inline' is for me NOT an option. I've tested it and would solve the problem, but it is not best practice for security!

Any idea how to solve it? Many thanks

CodePudding user response：

After hours and hours of work, I've found a solution.

First of all, I have set "default-src 'none' ;"

All the other rules have been put within script-src

It was also very important NOT to use the Font Awesome 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 the issue was. I've added one by one the sha-* values suggested by Chrome.

Doing that way, I was able to avoid using 'unsafe-inline'.

I've also tried to use the Font Awesome API, but it is much more complicated and does not solve the problem by simply using data-auto-add-css="false". Render each icon must be handled by itself and there are also a lot of naming mismatches!

I hope to have brought some light into this!

Happy coding ;-)