Add Content Security Policy (CSP) config

[ydcjeff]

Describe the feature you would like to see added

Currently, PrimeVue creates many style elements and directly append into head tag. While we deploy the app with strict CSP headers, many CSP style errors occur saying failed to inject inline styles.

Thus, to support CSP config, I think we could add a CSP config when creating PrimeVue vue plugin.

app.use(PrimeVue, { csp: /* ... */ });

Is your feature request related to a problem?

Currently, our client apps are deployed with strict CSP report only headers. Although the app works, there are multiple errors in the console and multiple false positive CSP style errors are reported.

Describe the solution you'd like

Provide a CSP config when creating PrimeVue vue plugin, and use the provided CSP values when creating inlin style elements.

app.use(PrimeVue, { csp: /* ... */ });

Describe alternatives you have considered

• Use 'unsafe-inline', but unfortunately we can't do for our case.
• Write a Vite plugin that injects setAttribute('nonce', ...) code (we workaround with this for now, however could break between each version).

Additional context

No response

[mertsincan]

Thanks a lot for the report! On 3.32.0, please try;

app.use(PrimeVue, {
    csp: {
        nonce: '...'
    }
});

[ydcjeff]

Thank you for implementing quickly.

[ElteHupkes]

@ydcjeff This may not be the place, but is there any indication, here or in some other docs, on how to actually securely use such a nonce value? Unless you're serving the frontend from a backend that randomly rotates the nonce, I fail to understand how a nonce config value is any less unsafe than unsafe-inline.