search

primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.28k stars 4.56k forks source link

Content-Security-Policy 'nonce' not working for some elements #15911

Closed jlfrances closed 3 months ago

jlfrances commented 3 months ago

Describe the bug

The bug happens for some elements that are not applying the CSP 'nonce' policy correctly.

In my case, the p-table element is failing since it seems when it's configured as responsive, using responsiveLayout="stack" (check PrimeNG docs here), there are inline styles applied dynamically (using the innerHTML attribute) that do not contain the 'nonce' attribute.

I have replicated the error in a Stackblitz.

Check the Steps to reproduce the behavior section for details.

Reproducer

https://stackblitz.com/edit/2xjzsk

Angular version

18

PrimeNG version

17.18.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20

Browser(s)

No response

Steps to reproduce the behavior

I added to my project the configurations provided by Angular and PrimeNG in order to apply and comply the Content-Security-Policy NONCE feature as follows:

Angular configurations (see Security section):

Angular configurations

index.html

  1. The meta tag image

  2. The ngCspNonce attribute in the main component drawing

PrimeNG configurations (see Configution > CSP)

prime ng docs

table-basic-demo.ts

  1. The PrimeNG configuration prime ng configuration

Error(s)

When loading the p-table component, you could see errors saying that nonce is not implemented for some inline styles.

table errors

Note that there might be other errors not related to this issue.

Error 1: related to other component. Might be related to the same nonce issue.

Error 2 and 3: related to p-table issue. In createResponsiveStyle() function is where the issue happens:

table error function

Related issue

14847 p-pickList: Content-Security-Policy throws a inline-style error when [responsive]="true"

SoyDiego commented 3 months ago

@cetincakiroglu This is the problem that I was talking with you.

jlfrances commented 3 months ago

I was checking the table.ts component code, and it seems that nonce is not applied in the function I reported before (createResponsiveStyle()), as it's done in a function immediately above called createStyleElement().

Could this be the related to the issue?

image