CSP nonce for dynamically added <style> tags? | Angular Community | Page 1

steep zodiac Feb 7, 2024, 4:40 AM

#

Hello. I am configuring CSP. Right now I am adding nonces to <script> and <style> tags in backend to index.html before serving the content back to client and adding same nonce to headers as well. All is good with the pre-generated index.html placeholders.

Problem is Angular triggers and adds some dynamic <styles> after index.html is served to client in <head> section, guessing some modules pop up and do that.

Why is this a problem?
When I add style-src 'self' 'nonce-%s' 'unsafe-inline';

nonce tag gets added to all pre-rendered <style> tags and all that is fine. But now, the dynamic <style> tags are not loaded because I dont have nonce tag on them and they are blocked from running. Fallback to unsafe-inline does not work for dynamic style tags because nonce is given.

Can I pre-render all possible styles and attach them, so I can nonce them.
Or can angular take the nonce and attach it to dynamic styles (though idk, that kind of defeats the purpose a little bit).

Config on frontend is:

"hp-dev": {
              "optimization": {
                "scripts": true,
                "styles": {
                  "minify": true,
                  "inlineCritical": false
                },
                "fonts": true
              },
              "outputHashing": "all",
              "sourceMap": true,
              "namedChunks": true,
              "extractLicenses": false,
              "vendorChunk": true,
              "buildOptimizer": true,
              "serviceWorker": true,
              "ngswConfigPath": "ngsw-config.json",
            /.../
            },

steep zodiac Feb 7, 2024, 5:11 AM

#

One solution here says to make some custom angular module which fetches the nonce from a known source e.g.: nonce is attached to a meta tag in index.html. And then when attaching <style> tags, we add nonce to them. However this doesn't seem like a robust soluton. Any feedback? Thank you.

https://dev.to/ferdiesletering/how-to-implement-an-inline-styles-content-security-policy-with-angular-and-nginx-2ke2

steep zodiac Feb 7, 2024, 7:42 AM

#

I belive I have found the solution.
We should do:

<app-root ngCspNonce="**PLACEHOLDER_NONCE_SERVER**"></app-root>

#CSP nonce for dynamically added <style> tags?