Nonce Attribute Empty in Styles When Content-Security-Policy Headers are Set

[esszed]

Describe the bug

Issue: When implementing nonce with the PrimeVue library in a Vite-based Vue project, the nonce attribute in styles becomes empty if Content-Security-Policy (CSP) headers are set, both through Vite server configuration or Nginx.

We tried this both using vite locally and using nginx in our enviroment, where we have setup that substitutes the nonce string by generated one and same incorrect behavior. It works for other nonces added to our styles/scripts apart from the ones from PrimeVue. It also works fine if the policy is added via metatag and the nonces stay:

<meta http-equiv="Content-Security-Policy" content="style-src 'self' 'nonce-test-nonce'; style-src-elem 'self' 'nonce-test-nonce';'">

Reproducer

codesandbox

PrimeVue version

3.43.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Create a new Vue project using Vite. Install PrimeVue and implement some PrimeVue component as a test. In main.ts, add PrimeVue with the nonce attribute in the CSP object:

app.use(PrimeVue, {
  ripple: true,
  csp: {
    nonce: 'test-nonce'
  }
});

Build and preview the project using npm run build and npm run preview. The nonce gets correctly added to styles: <style type="text/css" nonce="test-nonce" data-primevue-style-id="common">... styles</style>

Modify the Vite server configuration to include CSP headers:

server: {
  headers: {
    'Content-Security-Policy': "style-src 'self' 'nonce-test-nonce'; style-src-elem 'self' 'nonce-test-nonce';"
  }
}

Run npm run preview again and notice that CSP errors are thrown and the nonce in the style tag is empty. <style type="text/css" nonce="" data-primevue-style-id="common">... styles</style>

Expected behavior

The nonce should be maintained in the style tags when CSP headers are set.

[esszed]

It turns out I am wrong. The nonce is actually still being added even though it looks empty in the html. And it can be seen in the properties of the element.

However the nonce still does not seem to work for styles added from directives as you can see in the screenshot.

[opterus]

I am also seeing behaviour like this. Some components work fine, however there are many warning that occur from primarily usestyle.esm.js as shown in the screen shot.

The nonce value is being added as follows

// add nonce for PrimeVue to secure inline scripts app.use( PrimeVue, { ripple: true, csp: { nonce: getCookie( "__n_id" ) }, } );

[mertsincan]

Interesting! Could you please try it with the latest PrimeVue version? If the problem persists, please attach a sample stackblitz link or project to replicate it. Also, are there specific components you're having trouble with?

[github-actions[bot]]

We're unable to replicate your issue, if you are able to create a reproducer or add details please edit this issue. This issue will be closed if no activities in 20 days.

[opterus]

Hi,

The problem is still there, I will try to create a sample.

Ian Long Chief Software Architect & Founder Opterus Inc. Simplifying Communications Mobile: 416.817.9206

From: Mert Sincan @.> Date: Monday, January 29, 2024 at 8:11 AM To: primefaces/primevue @.> Cc: Ian Long @.>, Comment @.> Subject: Re: [primefaces/primevue] Nonce Attribute Empty in Styles When Content-Security-Policy Headers are Set (Issue #4962) You don't often get email from @.*** Learn why this is importanthttps://aka.ms/LearnAboutSenderIdentification [CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe]

Interesting! Could you please try it with the latest PrimeVue version? If the problem persists, please attach a sample stackblitz link or project to replicate it. Also, are there specific components you're having trouble with?

— Reply to this email directly, view it on GitHubhttps://github.com/primefaces/primevue/issues/4962#issuecomment-1914667922, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AEJHPRGC3FCQ2TZUSEIY2NDYQ6NXVAVCNFSM6AAAAABARN6GGSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMJUGY3DOOJSGI. You are receiving this because you commented.Message ID: @.***>