Tree: opening tree-node causes CSP (Content-Security-Policy) inline style error

[KyrumX]

Describe the bug

Running an application with the following CSP value: "Content-Security-Policy": "default-src 'self'; script-src 'self' 'nonce-randomNonceGoesHere'; style-src 'self' 'nonce-randomNonceGoesHere' https://unpkg.com; connect-src 'self' https://unpkg.com; font-src 'self' https://unpkg.com; img-src 'self' https://primefaces.org;"

and setting the nonce at the root in index.html ngCspNonce="randomNonceGoesHere" gives errors when expanding a tree node.

vendor.js:110199 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-randomNonceGoesHere' https://unpkg.com". Either the 'unsafe-inline' keyword, a hash ('sha256-biLFinpqYMtWHmXfkA1BPeCY0/fNt46SAZ+BBk5YUog='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

Debugging shows this is related to ul.p-treenode-children with style/'display: none;'

Environment

"primeng": "17.3.3",
"@angular-devkit/build-angular": "^17.0.5",
"@angular/animations": "^17.0.5",
"@angular/cdk": "^17.0.2",
"@angular/cli": "^17.0.5",
"@angular/common": "^17.0.5",
"@angular/compiler": "^17.0.5",
"@angular/compiler-cli": "^17.0.5",
"@angular/core": "^17.0.5",
"@angular/forms": "^17.0.5",
"@angular/platform-browser": "^17.0.5",
"@angular/platform-browser-dynamic": "^17.0.5",
"@angular/platform-server": "^17.0.5",
"@angular/router": "^17.0.5",
"chart.js": "3.3.2",
"primeflex": "^3.3.1",
"primeicons": "^6.0.1",
"quill": "1.3.7",
"rxjs": "~7.8.1",
"tslib": "^2.5.0",
"zone.js": "~0.14.0"

Reproducer

https://stackblitz.com/edit/8ejmvb?file=package.json

Angular version

17.0.5

PrimeNG version

17.3.3

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.0

Browser(s)

Chrome, Edge

Steps to reproduce the behavior

1. Create simple tree structure with children
2. Ensure CSP headers are returned by server
3. Ensure CSP token is set via ngCspNonce
4. Expand a tree node

Expected behavior

No response

[victorgawk]

I am facing the same issue here

The locations with inline styles I've noticed:

1: p-tree > div > div > ul > p-treenode > li > ul.p-treenode-children

<ul role="tree" class="p-treenode-children ng-star-inserted" style="display: block;">

2: p-tree > div > div > ul > p-treenode > li > div > button > span.p-ink

<span class="p-ink" aria-hidden="true" role="presentation" style="height: 32px; width: 32px; top: -6.175px; left: 0.824982px;">

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you for your understanding!