[CSP] providePrimeNG csp nonce does not solve all csp issues when "theme" property is defined

[tom-vism]

Describe the bug

Not all CSP issues are fixed when providing the CSP nonce into the PrimeNG config when the "theme" property is an empty object or "preset" is null.
While debugging, the first nonce value is passed undefined.

Environment

strict csp policy, no unsafe-inline, we are using nonces.

Reproducer

https://stackblitz.com/edit/azxstcmm?file=src%2Fmain.ts

Angular version

^18.2.11

PrimeNG version

^18.0.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.18.1

Browser(s)

Chrome 131.0.6778.140

Steps to reproduce the behavior

|

Expected behavior

Nonce attribute is set correctly and no csp issues are thrown in the console when "theme" is defined in the primeng config

[SavGRY]

Yep, this is also happening to me with the rc 19.0.0-rc.1 with Angular 19.

Although it's not a stable release, it's the same problem.

Angular version
19

PrimeNG version
19.0.0-rc.1

Browser(s)
Firefox 133.0.3

[Jonathazn]

Wondering if I have the same issue, but in my case, the nonces are empty strings like so:
<style type="text/css" nonce="" data-primeng-style-id="global-style">...</style>

Nonce gets set in providePrimeNG like this:
csp: {nonce: 'angularNonce'}

Nonce is correctly set in the ngcspnonce attribute of app-root (server is nginx), but all other nonce values are empty strings.
Locally the nonces are set to the same default value the ngcspnonce has, but in production they are empty.

Angular version
19.0.1

PrimeNG version
19.0.0-rc.1

[tom-vism]

Wondering if I have the same issue, but in my case, the nonces are empty strings like so: <style type="text/css" nonce="" data-primeng-style-id="global-style">...</style>

Nonce gets set in providePrimeNG like this: csp: {nonce: 'angularNonce'}

Nonce is correctly set in the ngcspnonce attribute of app-root (server is nginx), but all other nonce values are empty strings. Locally the nonces are set to the same default value the ngcspnonce has, but in production they are empty.

Angular version 19.0.1

PrimeNG version 19.0.0-rc.1

For security reasons, nonce attribute is hidden. In devtools you can try to access it with document.querySelector('style[nonce]')?.nonce.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce#accessing_nonces_and_nonce_hiding

[Jonathazn]

Wondering if I have the same issue, but in my case, the nonces are empty strings like so: <style type="text/css" nonce="" data-primeng-style-id="global-style">...</style>
Nonce gets set in providePrimeNG like this: csp: {nonce: 'angularNonce'}
Nonce is correctly set in the ngcspnonce attribute of app-root (server is nginx), but all other nonce values are empty strings. Locally the nonces are set to the same default value the ngcspnonce has, but in production they are empty.
Angular version 19.0.1
PrimeNG version 19.0.0-rc.1

For security reasons, nonce attribute is hidden. In devtools you can try to access it with document.querySelector('style[nonce]')?.nonce. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce#accessing_nonces_and_nonce_hiding

The console is full of errors saying the csp header is violated... unless the issue is that nonce is different on every request, but I don't see why you wouldn't want that...

Edit: The log i get (more than a 100 times)

The only thing I can think of is that the hash being sent from the server is set correctly, but it's different than the one in ngcspnonce, which is a different issue. But not even the slightest clue how to resolve that.

Edit 2: Running document.querySelector('style[nonce]')?.nonce shows angularNonce, which is not correct or is it?

Edit 3: In chrome i get the same error as tom-vism

Which means it's the same issue, mozilla just shows it differently than chrome i guess

[Jonathazn]

The same happens in 19.0.0, does anything configuration wise need to change? @mertsincan