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
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 ;-)